1. 작업 환경 설정 ✔

1.1 Node.js

• Node.js는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 뜻한다.
• React 애플리케이션은 웹 브라우저에서 실행되는 코드라서 Node.js가 필요 없지만, 프로젝트를 개발하는데 필요한 도구(Webpack, Babel)가 Node.js 기반이기 때문에 설치했다.
• Node.js를 설치하면 npm(node package manager)이 자동으로 설치 되는데 yarn을 사용하기 위해 yarn을 설치했다.

1.2 yarn

• npm과 yarn 비교를 살펴보았을 때 yarn을 사용하는게 맞다고 판단이 되어 package manager로 yarn을 선택했다.

// node.js command prompt
$ npm install --global yarn

• 위의 명령어를 통해 yarn을 설치 했고 yarn --version을 통해 yarn이 제대로 설치됐는지 확인할 수 있다.

1.3 에디터 설치

• React 애플리케이션을 만들면서 코드를 수정할 때 사용할 코드 에디터로 기존에 사용했 VScode를 선택했다.
• 그리고 추가로 설치한 확장 프로그램은 아래와 같다.

1. ESLint: 자바스크립트 문법 및 코드 스타일을 검사해주는 도구
2. Reactjs code Snippets: React 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 코드를 생성할 수 있는 코드 스니펫 모음 도구
3. Prettier code formatter: 코드 스타일을 자동으로 정리해 주는 도구

2. CRA(Create-React-App)

• CRA는 리액트 프로젝트를 생성할 때 필요한 Webpack, Babel의 설치 및 설정 과정을 생략하고 작업 환경을 구축해 주는 도구이다.
• 터미널을 열고 다음과 같은 명령어를 사용한다.

$ yarn create react-app <프로젝트 이름>

• CRA의 장점 중 하나는 개발 환경 셋팅을 해주기 때문에 기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 된다.

2.1 CRA 설정

• 생성된 프로젝트에 진입 // 👉 $ cd <프로젝트 이름>

• 로컬 서버 구동 // 👉 $ yarn start

• 로컬 서버를 구동하면 아래 그림과 같이 http://localhost:3000 주소를 확인할 수 있다.
  

• http://localhost:3000 접속 시 보여지는 첫 화면이다.
  아래의 화면이 나타나면 본격적으로 React 프로젝트를 시작할 수 있다.

2.2 CRA 기본 폴더 및 구성

• CRA를 설치하면 아래와 같이 폴더가 구성되어 있다.

• 폴더를 보면 크게 node_modules, public, src가 존재하는 것을 확인했다.
• 이렇게 생성된 프로젝트는 src/index.js를 시작으로 필요한 파일을 불러와서 번들링한다.

end