리액트 개발환경 구축(CRA)

리액트 환경을 만들어보자!

🔷 CRA(Create-React-App)

• 리액트 프로젝트를 시작하는데 필요한 개발 환경을 해주는 도구이다.
  (https://reactjs.org/docs/create-a-new-react-app.html)
  webpack, babel 등 React에서 주로 많이 사용하는 도구 및 설정을 포함하고 있다.

🔹 CRA 설치하기

1. 원하는 폴더로 이동

2. react-app 설치
   npx create-react-app cra-test(폴더명)

3. 폴더 진입
   cd cra-test(폴더명)

4. 로컬 서버 띄우기
   npm start

🔹 CRA 파일 구성

• node.modules

  • CRA를 구성하는 패키지 소스 코드가 존재하는 폴더

• public(index.html)

  • 완성된 js파일이 출력될 곳
  • <div id="root"></div>

• src

  • index.js
    • ReactDOM.render(, document.getElementById('root'))
      • ReactDom.render 함수의 인자는 두개이다.
      • 첫 인자는 화면에 보여주고 싶은 컴포넌트이다.
      • 두번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치이다.
  • App.js
    • 현재 화면에 보여지고 있는 초기 컴포넌트
    • React Roouter를 적용 후에는 컴포넌트가 최상위 컴포넌트로 그 자리에 위치하게 된다.

• gitignore

  • git 업로드시 ignore할 파일들

• package-lock.json

  • npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일이다.  의존성 트리에 대한 정확한 정보를 가지고 있다.

• package.json

  • npm install을 통해 설치한 package에 대한 정보를 저장 (npm => Node Package Manager)
  • 개발자가 배포한 패키지에 대해, 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서.
  • package.json 구성(https://programmingsummaries.tistory.com/385)