• 실습일자 : 20240416

---

create-react-app 설치

예전에 나는 React 설치를 했기 때문에 아래 과정이 필요 없지만, 새로운 컴퓨터에서 한다고 했을 때는 아래 과정을 진행

⇒ create-react-app을 설치

npm install -g create-react-app

⇒ 설치 확인

create-react-app --version

• 문제없이 설치하였다면, 다음과 같이 create-react-app의 버전이 표시

React 프로젝트 생성 / 구조 / 설명

⇒ create-react-app을 사용하여 React 프로젝트를 생성

npx create-react-app my-app

• my-app 부분에 내가 원하는 폴더명을 대신 넣어도 됨

⇒ React 프로젝트 구조

|-- public
|-- src
|-- package-lock.json
|-- package.json

⇒ React 프로젝트 폴더 및 파일 설명

• public: create-react-app으로 개발할 React 프로젝트의 Static 파일들(index.html 등)이 저장된 폴더입니다.
  • public/index.html: 개발한 React 프로젝트가 표시될 파일
• src: 실제 React를 사용하여 개발을 할 때 사용하는 폴더입니다.
  • src/index.js: 우리가 개발한 React 프로젝트를 index.html 파일에 표시하기 위한 파일
  • src/App.js: 기본적으로 제공되는 React 컴포넌트 예제
  • src/App.css: App 컴포넌트에서 사용하는 CSS 파일
  • src/App.test.js: App 컴포넌트를 테스트하기 위한 파일
  • src/reportWebVitals.js: React의 성능을 측정하기 위한 파일
  • src/setupTests.js: React에서 테스트를 실행하기 위한 설정 파일
• package.json: 개발에 필요한 라이브러리를 관리하는 파일입니다.

불필요한 폴더 및 파일 삭제

React 설치 후, 불필요한 폴더 및 파일 삭제를 하고 나서, 나는 최종적으로 아래 이미지와 같이 프로젝트 폴더 및 파일 구조를 Setting 하였다.

• MY-APP
  • node_modules
    • npm으로 다운받은 모든 package들이 저장되어 있는 폴더
    • 하위 파일들은 너무나 많아서 생략
  • public
    • index.html
      • React는 웹 애플리케이션이므로 화면에 표시되기 위해서는 HTML 파일이 필요하다. public/index.html 파일이 이 역할을 하며, 우리가 개발한 React가 이 index.html 파일에 표시된다.
  • src
    • App.js
    • index.js
      • 이 파일에서 React는 ReactDOM을 사용하여 id값이 root인 HTML element에 <App /> 컴포넌트를 표시하는 것을 확인할 수 있다. 여기서 표시되는 App 컴포넌트는 src/App.js이며 import를 사용하여 컴포넌트를 불러와 화면에 표시하는 것을 알 수 있다.
  • .gitignore
    • git으로 관리하지 않을 파일이나 폴더 등을 기입하는 파일
  • package-lock.json
  • package.json
    • 프로젝트의 상세 정보들을 명시한 명세서와 같은 역할
  • README.md
    • 필요 없기는 한데, 그냥 나중에 보려구 나둠

Fast refresh

npm start

• npm start 명령어를 통해 create-react-app을 사용하여 생성한 React 프로젝트를 실행하였다.
• 이는 create-react-app이 제공한 로컬 개발 서버를 사용하여 React 프로젝트를 실행한 것이다.
• create-react-app이 제공한 개발 서버는 기본적으로 Fast refresh라는 기능을 제공하고 있다.
• 이 Fast refresh는 우리가 React 프로젝트를 개발하기 위해 파일을 수정하고 저장하면, 변경된 파일을 인식하고 자동으로 브라우저를 갱신하는 아주 편리한 기능을 제공한다.
• 따라서 React 프로젝트를 개발하기 위해 파일을 수정하고 저장하면, 개발한 내용을 확인하기 위해 브라우저를 매번 갱신할 필요가 없다.

결과 화면

느낀점

혼자서, React 환경 셋팅을 큰 에러 없이 무사히 설치한 것에 기뻤다.

참고

• create-react-app
  • https://deku.posstree.com/ko/react/create-react-app/start/
• [React] node_modules, package.json, gitignore
  • https://velog.io/@joahkim/React-nodemodules-package.json-gitignore