박재형 / IT 개발 공부

1. 특징 -  ORM 프레임워크 ( object-Relational Mapping )   ==> 자바의 클래스(엔티티, entity)를 이용해서 DB의 테이블을 생성 ( 자바의 클래스와 DB 테이블이 맵핑됨 )          자바의 메서드가 DB의 SQL을 자동 실행함 ( 자바의 메서드와 DB의 SQL이 맵핑됨 ) - JPA는 명세서임 ( 자바의 인터페이스와 같은 개념 )  JPA의 명세를 구현한 구현체들이 있음 ( 대표적으로 hibernate가 있음 ) https://hibernate.org/하이버네이트를 쓸려면 의존성 추가 우리가 실질적으로 쓰는건 하이버네이트가 아니고 스프링 데이터 JPA를 쓴다 - Spring Data JPA ==> hibernate 기술을 개발자들이 쉽게 사용하도록 커스터마이..

자동으로 서버에서 수정됐을 경우 우리가 다른 곳을 들렸다오면 자동으로 싱크를 맞춰준다 ( 따로 fetchEvent를 쓸 필요가 없다 ) 설치npm i @tanstack/react-query import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider,} from '@tanstack/react-query'//useQuery -select 작업시 //useMutation - insert / update / delete 작업시

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

팀장git 저장소 생성 - sts 프로젝트 생성 - sts git에 들어가기 - create a new git repository - 디렉토리에 프로젝트 폴더 경로, 브랜치 네임은 main  - git staging에서 commit - 프로젝트에서 Team 안에 Remote 안에 push 하면 저장소 업로드 팀원깃허브 저장소 주소 클론 -  sts에서 Maven import - 로컬 브랜치 만들어서 수정

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);..