본 정리는 인프런 John Ahn 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의를 참고하였습니다.

  • 전체 흐름도

    스크린샷 2022-12-28 오후 9 59 00

프론트도 다루기 위해서 React JS 사용

React JS는 2013년도에 페이스북에서 만들어진 라이브러리이다.

  • 특징
    • 컴포넌트로 이루어져 있어 재사용이 용이하다.
    • Virtual DOM
      • Real DOM VS Virtual DOM
        • 10개의 리스트 중 1개만 변화한 경우
          • Read DOM은 전체를 업데이트 해야함
          • Virtual DOM은 1개만 업데이트 가능
      • 스냅샷을 찍어 바뀐 부분부분만을 확인 후 RealDOM에서 바꾸는 형식

Create - React 설치하기

  • 전체 흐름도

    스크린샷 2022-12-28 오후 10.33.06.png

프론트도 해야하므로 client, server 폴더 생성하여 분리

server 폴더에 지금까지 했던 파일들 이동

  • config 폴더
  • middleware 폴더
  • Models 폴더
  • index.js 파일

client 폴더로 이동 후 터미널에 다음 명령어 실행

npx create-react-app .

—# npm ? npx?

  • npm (node package manager)
    • 저장소 역할
    • -g 플래그를 주면 글로벌로 다운로드
      • 플래그를 주지 않으면 node-modules에 저장
    • 원래는 글로벌로 create-react를 다운로드 했었음
  • npx를 이용하여 다운없이 저장소에 있는 리액트를 가져와서 사용가능
    • 저장공간 부담이 없음
    • 항상 최신 버전 사용 가능

client 폴더로 이동하여 npm run start 입력

—# package.json 스크립트에 start 명령어가 등록되어 있음

  • node_modules
    • 라이브러리 저장소
  • public
    • static 파일들 보관함
  • src
    • 소스코드 보관함 (실질적으로 여기파일들로 코딩함)
  • package.json
    • 설치한 라이브러리 목록
  • App.js
    • 렌더링된 페이지가 보여짐