남들 다쓴다는 ReactJS 설치하고 셋팅해보기

1. 개요

• 다들 리액트 씀
• 리액트 설치하고 프로젝트 셋팅하기

2. 특징

• 리액트로 SPA(Single Page Application)을 쉽게 만들 수 있음
  • SPA는 이름 그래도 하나의 페이지(Single Page)만 보여주는 방식
  • 하나의 페이지를 로딩하고, 그 안에 들어있는 데이터만 바꿔서 새로운 컨텐츠를 보여줌
• html 재사용이 편리함(HTML을 변수에 담아서 쓸 수 있음) (= 컴포넌트)
• 앱도 만들 수 있음 (= 리액트 네이티브)

3. 설치방법

• 우선 nodejs 설치해야 함

2023.01.19 - [코딩/NodeJS] - 백엔드 공부를 위한 NodeJS 알아보기 + 설치

백엔드 공부를 위한 NodeJS 알아보기 + 설치

• 위 링크에서 nodejs가 뭔지, 어떻게 설치하는지 확인해보세요
• 근데 리액트랑 노드랑 무슨사이냐구요?
  • 노드 설치하면 npm이라고 라이브러리 관리 프로그램도 설치되고, 바벨이라는 컴파일 도구도 설치되어서 JSX 사용할 수 있음

npx create-react-app 프로젝트명

• 위 코드로 리액트 프로젝트 셋팅
• 프로젝트명은 적당히 예쁘게 영어로 지으면 됨
• 프로젝트 셋팅끝나면 /src/app.js파일을 찾을 수 있는데 거기에 코드 작성하면 웹페이지 만들 수 있음

npm start

• 위 코드 입력하면 웹페이지 미리보기 볼 수 있음(VSCode의 Liveserver같은)
• 막 이것저것 생성된 폴더들의 용도가 궁금하다면?
  • node-modules : 프로젝트에 사용할 라이브러리 저장소
  • public : 정적인(static) 파일 보관소, CSS파일이나 이미지 같은거
  • src : 코드 짜는 곳
    • app.js파일에서 코드 짜고 빌드하면
    • index.js가 /public/index.html에 html코드 만들어줌
    • 이게 뭔말이냐?
      • app.js에 암만 웹페이지 코딩해도 결국 브라우저는 HTML파일을 렌더링해서 보여줌
      • 그러니깐 app.js에 코딩한 웹페이지를 HTML코드로 바꿔줘야한다~이말임
  • package.json : 프로젝트 정보가 기록된 파일