리액트 환경설정하기

3.1 기본 Tool 설치

yarn 설치

m1 mac에서는 corepack enable 로 yarn 설치가 불가하니, npm i -g corepack 으로 설치하면 된다.

3.2 기본 Tool 설명

node

JavaScript runtime environment(framework) that executes Javascript code outside a web browser

• Browser 밖에서 JS를 실행할 수 있도록 해주는 자바스크립트 실행 환경
• SSR, Command line tools를 만들 수 있다

npm

Package Manager

Publish and share course code of Node.js packages simplify installation, updating, and uninstallation of packages

• 외부 라이브러리를 쉽게 설치하고 버전을 관리할 수 있도록 함
• 외부 라이브러리를 manual로 관리하거나 설치할 필요가 없음.
• package.json에 모든 설치된 라이브러리를 버전 관리 설치 할 수 있음

npx

tools for executing packages

• 설치된 라이브러리를 개별적으로 실행할 수 있도록 함

yarn

Package Manager

built on top of npm to resolve some of npm’s shortcomings(단점)

• npm은 사용하는 라이브러리가 많을수록 프로그램 실행속도가 느려진다.
• 즉, faster, consistent, and secure

3.3 Create Project 프로젝트 생성

CRA (Create React App)

• Yarn을 이용해 프로젝트 생성 yarn create react-app [project-name]

yarn start : 개발용으로 프로젝트 시작

yarn build : 배포(빌드)할때 시작

yarn test : 작성한 유닛테스트나, 테스트 코드들이 실행

yarn eject : babel이나 webpack과 같은 것을 입맛대로 바꾸기 위해, 숨겨진 설정값들을 빼오는 작업을 함. dependency나 script 파일들을 다 가져옴

정말 필요한 경우에만 eject를 해야 한다.

[Error 1] yarn으로 CRA시 발생한 Issue 해결

에러내용

→ yarn create react-app basic으로 app 생성시 yarn folder가 생성되지 않고 node_modules가 보이는 Issue

→ 정확하게 Issue까지는 아니지만 강의의 yarn폴더처럼 생성하고 싶음

해결

1. yarn의 version이 낮기 때문이다 (1.22.xx) → yarn —version
2. yarn set version stable 으로 최신 버전으로 업데이트
3. corepack prepare yarn@stable --activate 으로 버전 고정해준다.

[Error 2] yarn version 업데이트 이후 CRA 안되는 Issue

에러내용

The nearest package directory (/Users/ninni/Developer/react-prac/basic) doesn't seem to be part of the project declared in /Users/ninni.

https://github.com/yarnpkg/berry/issues/2212

요약 : 상위 root에 yarn.lock이나 package.json이 있어서 그러하다

해결

cmd + shift + . 을 하면 숨김 파일을 볼 수 있다.

react-prac 폴더가 존재하는 상위 폴더인 Developer에 가서 숨김파일 보기 한 다음 package.json 을 지워주고 해결했다.

• 에러가 발생한 이유 yarn 이 업데이트 되면서 workspaces가 추가 되었기 때문 Yarn

에러추가 )

yarn start로 프로젝트 시작시, memory가 leak되는 상황 발생.

node_modules를 지워주고 yarn start를 다시하니 해결 되었다.

(아마도 이전 npm node_modules에서 영향을 받은게 아닌가 추측)

window 에서 yarn으로 CRA 시작하기 (with yarn berry)

1. mkdir 로 원하는 곳에 폴더 생성
2. npx create-react-app@latest [project 이름]으로 CRA를 시작해준다.
3. 설치가 완료되면 cd [proejct 이름] 으로 프로젝트 폴더로 이동한다.
4. 기존의 npm 기반으로 되어있는 의존성 관리들을 지운다.
   • rm -rf node_modules
   • rm -rf package.lock.json
5. yarn set version berry 를 통해 yarn berry 버전으로 변경한다.
   • 이상 없이 적용 되었다면 repo에 yarnrc.yml과 .yarn/releases 폴더에yarn-berrry.js 또는 yarn-(버전명).cjs 가 생성된다.
   • yarn —version을 통해 버전이 3이상으로 시작하는지 확인한다.
6. yarn install을 해준다. 아래는 최종 폴더구조 모습
7. yarn dlx eslint --init

참고

yarn berry로 React.js 프로젝트 시작하기 | Kasterra's Archive

3.4 Project Structure

.yarn

• yarn을 실행하는데 필요한 것들이 들어있다.

.pnp

• 필요한 라이브러리들을 매번 node_modules에서 가져와서 설치하는 것은 너무나 번거롭다.
• 때문에 .pnp 를 이용한다.

public

• static한 resource 들이 저장되어 있다.

index.html : react 안에서 쓰는 유일한 html 파일, root 요소가 들어있다.

robots.txt : App 배포시 크롤링 정보를 알려줌

src

• 작성하는 코드들은 대부분 src 안에서 작성된다.

3.5 Important Tools

Babel

Javascript transcompiler

구 버전 브라우저를 사용하거나, 최신 자바스크립트 문법을 사용하지 않는 User를 위해 older version으로 convert 해주는 일을 한다.

TS, JSX → JS 도 가능하다.

Webpack

Bundling the code, JavaScript module bundler

프로젝트를 그룹지어서 user를 위해 bundling을 해준다.

쓰이지 않는 코드를 삭제하고, 압축하고, 코멘트를 빼서 user에게 전달한다.

ESLint

코드를 잘 작성하고 있나, 잘못된 것 없나 체킹해준다.

Jest

delightful JavaScript testing framework

TDD를 위해, test를 위한 framework이다.

PostCSS

expandable CSS libraries