리액트로 개발하기 - create-react-app으로 프로젝트 시작

React로 개발을 시작하기에 앞서 설치해야 하는 것들은 다음과 같다.

• nodejs
• npm
• yarn

설치가 끝나면, 아래의 코드를 쳐서 react 프로젝트를 생성할 수 있다.

공식홈페이지

yarn create react-app my-app

yarn을 사용해서 react-app을 생성하는 것이고 my-app이 위치한 곳에는 프로젝트 이름을 적어주면 된다.

 

실질적으로 아래의 패키지, 파일들은 수정할 일이 거의 없다고 보면 되고, yarn 에서 외부 라이브러리 설치 및 실행 시에 필요한 것들이어서 크게 신경쓰지 않아도 된다. 

• .yarn
• node_modules
• yarn.lock
• .pnp-

신경써서 봐야하는 부분은 바로 아래 패키지다.

• public
• src

public은 정적 리소스들이 위치한 패키지다.

그리고 작성하는 대부분의 코드들은 src에 포함될 것이다.

 

외부 라이브러리에 대한 정보는 package.json 파일 안에 dependencies 를 보면 된다. scripts 는 create-react-app 으로 리액트 프로젝트 생성 시 기본적으로 제공하는 스크립트들이다.

"dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

dependency의 수가 적지만, yarn eject 명령어로 풀면, create-react-app 툴을 써서 설치되어 있는 라이브러리가 어떤 것들이 있는지 더 상세히 볼 수 있다. Webpack, Babel, ESLint 등. CRA를 사용하지 않고서, 이런 것들을 직접 npm에서 하나씩 설치할 수도 있지만, 이걸 사용하게 되면 훨씬 빨리 리액트 프로젝트를 빌드할 수 있는 장점이 있다.

 

아래는 create-react-app 툴을 써서 리액트 프로젝트를 만들면 자동으로 내장되어 있는 것들이다. 나도 아직은 잘 모르지만, 조금씩 찾아보니까 이렇다고 한다.

 

Babel

ES6+ 버전 이상의 JavaScript, JSX, TypeScript 코드를 하위 버전의 JavaScript 문법으로 변환시켜주는 역할을 한다.

이로써 최대한 모든 브라우저에서 원활한 동작을 할 수 있도록 도와준다.

 

Webpack

웹에서 사용되는 모든 자원(assets)을 번들링 해주는 도구이다. 여러 개의 파일 중 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정을 해준다. 필요한 이유는 번들링을 통해 하나의 파일로 합쳐지면, 네트워크 요청 횟수가 줄어들기 때문이다.

 

ESLint

자바스크립트 문법에서 에러를 표시해주는 도구이다.

ES + Lint, 이렇게 나눠서 보면 되는데, ES는 Ecma Script의 준말이고, Ecma라는 기구에서 만든 Script, 표준 Javascript를 의미한다.
그리고 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.

 

Jest

테스트 코드 작성을 위해 사용되는 프레임워크다.

 

PostCSS

JS 플러그인을 사용해서 새로운 CSS들이 호환 가능하도록 변환해준다고 한다...?