※ Windows 10 기준으로 작성
Node.js 설치
먼저 node.js 설치를 위해서 패키지 매니저인 초코렛티(Chocolatey)를 설치한다.
설치 페이지 : 링크
powershell을 실행하여 설치 페이지 내 2. Install with powershell.exe - Now run the following command: 에 있는 명령어 라인을 복사하여 실행한다.
choco -v 를 입력하여 버전 출력이 되는지 확인해본다.
그리고 choco install -y nodejs.install을 입력하여 node.js를 설치한다.
node와 npm 각각 버전이 출력되는지 확인해본다.
React 시작하는 방법
1. 스크립트 태그 추가
React는 JS 라이브러리라서 jQuery처럼 동일하게 스크립트 태그를 추가하여 사용할 수 있다.
<body>
...
<div id="app"></div>
...
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="./app.js"></script>
</body>기준의 웹 서비스에서 쉽고 빠르게 React를 시작할 수 있다.
2. Webpack과 Babel을 설정
하지만 순수 JS로만 React를 작성해야하며, 이런 불편함을 줄이기 위해 여러개로 나눠진 자바스크립트 파일을 html이 실행할 수 있는 하나의 자바스크립트 파일로 합쳐주는 모듈 번들러인 Webpack과 최신 사양의 자바스크립트 코드(ES6+)를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환해주는 트랜스파일러인 Babel을 설정하여 개발하는 방법도 있다.
3. create-react-app
하지만 Webpack과 Babel을 이용하면 React를 이용함에 있어서 또다른 장벽일 수 있기 때문에 Facebook에서 만든 create-react-app이라는 CLI 툴을 이용하여 개발할 것이다.
4. Next.js Framework
React는 웹 UI만 담당하는 JS 라이브러리이다. 그래서 페이지 전환 같은 기능은 제공하지 않으며, react-router와 같은 외부 라이브러리를 함께 사용해야 한다. 또는 Next.js라는 React 프레임워크를 통해 외부 라이브러리가 필요없이 페이지 전환 기능과 서버 사이드 렌더링(SSR) 같은 기능도 제공하고 있다. 하지만 이 방법도 어디까지가 React이고 어디까지가 프레임워크 기능인지 잘 알 수가 없다.
create-react-app을 통한 React 프로젝트 생성
먼저 powershell에 다음을 입력하여 create-react-app을 설치한다.
npm install -g create-react-app
설치가 완료되었으면 버전을 확인해본다.
npx create-react-app --version
그리고 원하는 경로로 들어가 npx create-react-app <프로젝트 명> 을 입력하여 React 프로젝트를 생성한다.
my-app이라는 프로젝트 명으로 react 프로젝트를 생성하였다.
해당 프로젝트 폴더로 들어가 npm start를 입력하여 브라우저에 react 앱이 실행되는지 확인한다.
브라우저에서 새로운 탭으로 http://localhost:3000에 자동으로 접속된다.
프로젝트 폴더 구조
vscode를 열어서 확인해보면 html과 이미지 등의 정적 파일을 저장하는 public 폴더와 실제 React를 사용해 프로그래밍할 js 파일들을 보관하는 src 폴더가 있다.
기본적으로 public/index.html에서
<div id="root"></div>
부분이 React 애플리케이션이 들어가게 된다. 이는 아까 브라우저에 보이는 React 로고 페이지를 표시하기 위해 src/index.js에서
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);부분이 public/index.html의 div 태그에 React 애플리케이션을 삽입하고 실질적인 내용은 App.js를 불러와 표시하고 있다.
src/reportWebVitals.js
React의 성능을 측정하기 위해 제공되는 파일
src/setupTests.js
React 프로젝트를 테스트하는 데 필요한 설정 파일
package.json
React 애플리케이션 개발에 필요한 라이브러리들을 관리하거나 프로젝트에서 사용하는 명령 스크립트 등을 관리하는 파일이다.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}프로젝트를 실행할 때 npm start를 쓰는데 여기에서 script 필드에 설정된 start 스크립트를 실행한 것이다.
- build : React 프로젝트를 배포하기 위해 배포 파일을 생성
- test : 테스트용
- eject : create-react-app에서 관리하는 React 프로젝트를 일반 React 프로젝트로 변경
※ start 스크립트가 아닌 다른 스크립트들은 npm 다음에 run을 붙이고 실행해야 한다.
ex) build -> npm start build, test -> npm start test
package-lock.json
npm 버전이 다르거나 package.json에 있는 dependecies에 있는 dependency의 version range을 명시하지 않거나 벗어나서 새로운 버전으로 배포했을 경우, node_modules의 구조가 변경되어 실행했을 때 에러가 나올 수도 있다. 그래서 최종적으로 실행에 성공했을 때 당시의 의존성에 대한 정확하고 구체적인 정보를 가지고 자동 생성이 된다. 즉, 최종적으로 실행 성공했을 때의 동일한 node_modules를 생성하게 해줘서 같은 dependency를 설치할 수 있게 보장하는 파일이다.
create-react-app으로 생성한 React 프로젝트는 파일이 수정되면 자동으로 웹페이지에 적용해주는 Fast Refresh 기능이 기본적으로 제공하고 있으므로 프론트엔드 개발하기 위해 별도의 서버를 설정하지 않아 편리하다. 이 책에서는 create-react-app을 통해 React 프로젝트를 만들어서 React로 개발하는 부분에 집중할 것이다.
