박재형 / IT 개발 공부

기본적인 데이터 통신 (Tanstack Query 사용 전)  UserList.js

1. 라이브러리 설치  2. App.jsimport React, { useRef, useState, useCallback, useEffect } from 'react';import Webcam from "react-webcam";function App() {  const webcamRef = useRef(null);  const [imgSrc, setImgSrc] = useState(null);  const [hasPermission, setHasPermission] = useState(null);  useEffect(() => {    navigator.mediaDevices.getUserMedia({ video: true })      .then(() => setHasPermission(true)) ..

import logo from './logo.svg';import './App.css';import {createBrowserRouter, RouterProvider, useParams} from 'react-router-dom';import Home from './pages/Home';import Products from './pages/Products';import ProductsDetail from './pages/ProductsDetail';import ProductsDetail2 from './pages/ProductsDetail2';import RootLayout from './pages/RootLayout';import ErrorPage from './pages/ErrorPage';impor..

1. 강사용 github의 todo_boot_security_jwt_mysql 깃클론    가. sts의 workspace 가기     cd C:\springboot_study\sts-4.22.1.RELEASE\workspace    나. clone 명령어     git clone https://github.com/inky4832/todo_boot_security_jwt_mysql.git    다. sts import    import > maven > maven exists project

1. 참조 사이트https://reactrouter.com Home v6.24.1 | React Router reactrouter.com 2. 설치npm install react-router-dom 3. App.js 수정 import logo from './logo.svg';import './App.css';import {createBrowserRouter, RouterProvider} from 'react-router-dom';const router = createBrowserRouter([  {    path:"/",    element:div>Hello Worlddiv>  },  {    path:"/xxx",    element:div>안녕하세요div>  },]);function App() {  ..

- SPA ( Single Page Application ) import logo from './logo.svg';import './App.css';import {useEffect, useState } from 'react';import UserList from './components/UserList';import { fetchUserList, fetchUserSave  } from './http/HttpService';import ResponeError from './components/ResponseError';function App() {  const [userList, SetUserList] = useState([]);  const [error, SetError] = useState(null);..

import logo from './logo.svg';import './App.css';import {useEffect, useState } from 'react';import UserList from './components/UserList';import { fetchUserList } from './http/HttpService';import ResponeError from './components/ResponseError';function App() {  const [userList, SetUserList] = useState([]);  const [error, SetError] = useState(null);  const [modalIsOpen, SetModalIsOpen] = useState(f..

가. 예외처리용 컴포넌트 작성    ==> 예외발생시 랜더링됨   export  function ResponseError( ){     return (         //예외메세지  );} import logo from './logo.svg';import './App.css';import {useEffect, useState } from 'react';import UserList from './components/UserList';import { fetchUserList } from './http/HttpService';import ResponeError from './components/ResponseError';function App() {  const [userList, SetUserList] = ..

- async/await fetch 함수 ==> JS에서 기본적으로 제공하는 함수- 나는 fetch로 연동할예정 - 외부 라이브러리 ==> axios   npm install axios   fetch 사용