이전 포스팅에서는 React가 어떤 특징을 가지는 프레임워크인지 알아보았습니다. 이번 포스팅에서는 React를 실제로 다루기 위해서 개발환경을 구성하도록 해보겠습니다.

사용 목적에 따른 개발환경

개발 환경	주요 사용처
CDN	기존 웹 사이트에 리액트 코드를 추가할때 사용
Create-React-App(CRA)	Single Page App 개발
Next.js	Server Side Rending 개발
Gatsby	Static Site 개발

React App을 개발하기 위해 사용할 수 있는 선택처는 위의 표에서 보듯이 CDN, CRA, Next.js, Gatsby가 있습니다. CDN은 script 태그를 통해 React를 추가하여 React를 사용하는 방법으로, 주로 기존에 만든 웹 페이지가 있는데 부분적으로 React로 옮겨가기 위해서 사용합니다. 관심 있으신 분은 공식홈페이지에 관련 가이드가 있습니다.

새롭게 React Application을 만드는 경우 어플리케이션에 따라 CRA이나 Next.js, Gatsby를 많이 사용합니다.

• Single Page App Single Page App은 페이지마다 서버에서 새로운 HTML을 다운 받아서 랜더링하는 것이 아니라, 처음 로딩시 모든 UI파일을 다운 받고 UI가 변경 될때마다 웹에서 다시 랜더링 하는 방식을 사용하는 웹 어플리케이션을 이야기합니다. 첫 사이트 로딩 속도가 느린 대신 사용 중에는 반응속도가 매우 좋으며, 모든 구성요소가 Frontend에 있기 때문에 Frontend 구성요소의 모듈화와 재사용성이 용이합니다. Backend에서는 View를 아예 신경을 안쓰고 순수한 API서버로 만들 수 있다는 장점이 있습니다. 대신에 SEO(검색엔진 최적화)가 제대로 안되는 단점이 있습니다.

• Server Side Rendering Server Side Rendering은 SPA와 반대되는 개념으로 페이지를 변경할 때마다 서버에서 HTML구성요소를 생성해 뿌려주는 랜더링 방식을 이야기합니다. 초기 로딩 속도가 빠르고 SEO가 쉽다는 장점이 있습니다. 그러나 서버에서 VIEW에 대한 정보를 알고 있어야 하는 단점과 페이지 이동시 반응속도가 SPA에 비해 느리다는 단점이 있습니다. 최근에 많이 쓰는 next.js가 대표적이고 SPA이전에 많이쓰던 JSP나, Thyemleaf, Jinja와 같은 Backend Template Engine이 여기에 해당됩니다.

• Static Site Static Site는 저장된 HTML을 그대로 사용자에게 전달해주는 사이트를 의미하며 주로 Blog와 같이 별도에 동작 없이 컨텐츠를 배포하는 서비스가 여기에 해당됩니다. 웹서버(파일 서버)에서 HTML을 바로 보내기 떄문에 매우 속도가 빠르나 복잡한 동잡을 할 수 없는 단점이 있습니다.

강의에서는 가장 많이 사용하는 React 개발 방법인 CRA를 이용해서 App을 만드는 것을 알려드리도록 하겠습니다.

Create-React-App 설치하기

Create-React-App

1. node.js 설치하기 node.js 공식 홈페이지에 들어가서 node.js를 설치합시다. (17버전은 설치하면 동작하지 않을 수 있습니다!) node.js와 npm(Node Package Manger)가 설치 됩니다.

   • node.js 는 왜 설치 할까? node.js는 js를 실행할 수 있는 환경을 재공해줍니다. 최신 js 개발환경 구성시 필수로 설치하고 있습니다. 또한 React를 포함한 js라이브러리를 npm을 통해서 설치하고 관리하기 때문에 npm을 설치해야합니다.

2. create-react-app 설치하기 터미널에서 다음 커맨드를 통해서 create-react-app을 설치합니다.

npm install -g create-react-app

• npm을 통해서 내 컴퓨터에 create-react-app을 설치하는 명령어입니다. -g(global) 옵션이 없으면 지금 폴더의 프로젝트에 설치하게 됩니다.

3. react app 만들기

npx create-react-app my-app

npx(npm으로 설치한 패키지를 실행하는 명령어)로 create-react-app을 실행합니다. my-app이라는 폴더에 react-project가 설치됩니다.

4. 실행해보기

npm start

localhost:3000에 화면과 같은 창이 뜨면 성공입니다.

package.json

이제 프로젝트에서 pacakge.json이라는 파일을 봅시다.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

package.json에는 프로젝트의 기본 정보와, 프로젝트에서 사용하는 라이브러리, 그리고 프로젝트 에서 사용하는 스크립트등의 정보가 있습니다.

• dependencies 프로젝트에서 사용하는 라이브러리에 대한 정보입니다. 모든 팀원들이 같은 package.json을 공유함으로써 같은 라이브러리를 사용할 수 있습니다. npm install --save {라이브러리명}을 통해 라이브러리를 설치하면 package.json에 라이브러리가 추가됩니다. 설치된 라이브러리는 node_modules 폴더에 라이브러리들이 설치됩니다.

• scripts 프로젝트에서 사용하는 명령어입니다. npm run {script명}을 통해 실행할 수 있습니다. 예를들어 npm run build를 실행하면 build 폴더에 프로젝트가 하나의 html로 빌드된 것을 확인 할 수 있습니다. 필요에 따라 이 부분을 수정하여 줍니다.