React 기본 방법, 게시판 완성

두부링·2025년 2월 27일

Spring

목록 보기
8/24

이미지가 나타나는 과정

  • 논리적으로만 존재하는 경로 = 이미지 컨트롤러에 존재한다.

  • white list 로 설정해야 로그인 안해도 보임

img src 에 있는 경로로 요청을 해서 이미지를 받아온다.

이미지 업로드 과정

  • 이미지를 업로드 하면 문자열로 응답()

글 응답

  • 글 저장하기 : /post/save ==> /post/view 로 리다일텍트 된다.
  • addFlashAttribute 에 담은 걸 자동으로 model에 담기게 된다.
  • DB에서 정보를 가져와서

글 삭제

  • 참조하고 있는 readed_data 에서 먼저 삭제한 이후에 삭제해야 본 테이블에서 삭제가 가능


댓글 삭제

React 설정

node

  • node js로 웹서버 어플리케이션을 만듬

  • 개발 환경을 node js로 만듬

  • 자바스크립트로 앱을 개발할 수 있다.

  • ctrl + c 로 빠져나오기

  • node를 설치하면서 npm으로 라이브러리를 쉽게 설치 가능함

  • 추가 설치:
    https://www.npmjs.com/

React 설치

  • react 자아나무...... = 걸작임.....라이브러리임....



  • react work 에서 cmd 실행하기
  • 반응 있는지 확인하기
  • 개발환경 만들기
  • hello 환경 만들어짐

  • hello 환경 실행하기
  • 리액트 실행하기

vs에서 실행하기

  • JSX

    동적으로 innerHtml 을 추가하는 느낌쓰...

  • 요소와 동작을 만들어서 html에 끼어 넣을 수 잇다.

vs에서 tab 가능케



react 에서도 tab이 가능하게 된다.

CSR

  • 클라이언트 사이드 렌더링
  • 컴파일 단계를 거쳐야만 hello 환경에서 div root에 넣어줌(웹브라우저가 완성함
  • 작성한 전체가 들어가서 bundle를 구성한다.

React 분할할당

데이터가 변경되면 자동으로 UI가 변경된다.
바닐라 스크립트는 변경되고 값을 또 넣어줘야 했지만 그런 수고가 없어짐

보완

profile
하이하잉

0개의 댓글