TIL : CRA와 Next,js의 장단점, npm, npx, yarn 차이점.package.json을 사용할 때 알아둬야 할 것들

te-ing·2021년 11월 19일

firebase와 next.js를 이용하여 가벼운 게시판을 만들어 보던 중, 그 과정에서 강의에서 알려주지 않았던 next.js와 개발환경설정에 대한 정보를 좀 더 알게 되어 CRA와 Next.js의 장단점, npm npx yarn 차이점, package.json을 사용할 때 알아둬야 할 것들을 정리했습니다.

CRA(create react app)와 Next.js의 장단점

먼저 CRA는 해당 프로젝트에 숨겨져 있는 모든 설정을 추출하는 eject명령어를 사용한 것과 사용하지 않은 것으로 나눌 수 있다.

CRA without eject

eject를 사용하지 않은 CRA는 React를 이용하는 가장 기본적인 방법으로, 신경써야 하는 코드량이 적다는 것이 장점이다.
단점은 당연하게도 높은 추상화로 인해 설정 flow를 이해하기 힘들다는 것이 있고, SSR이나 CSR을 위해 별도의 작업이 필요하며, webpack등 코어한 부분을 건드려야 할 경우 결국 eject를 해야 한다는 것 등이 있다.

CRA with eject

eject를 사용하게 되면 webpack을 커스터마이징할 수 있지만, 복잡성과 유지보수의 어려움이 생긴다는 것과, 다른 패키지들과의 의존성을 신경써야 하기 때문에 One Build Dependency의 장점을 잃게된다는 단점이 있다.

Next.js

가장 큰 장점으로는 SSR을 통한 SEO와 렌더링 성능 향상이 있다. 그 외에도 코드베이스가 TypeScript이며, 자체적으로 타입스크립트를 지원한다는 것과 특별한 설정을 하지 않아도 지원해주는 개발 편의기능 등이 있다(내가 반했던 파일 기반 라우팅도 여기에 속한다!).
넥스트 JS 9버전부터는 src 절대경로를 지원해주기 때문에 craco를 설치하지 않아도 된다.

그러나 react-router와 호환이 되지 않는다는 치명적인 단점이 있으며, 프레임워크에 대한 지식이 필요하다. ESlint 세팅을 자동으로 해주는 CRA와 달리 Next.js에서는 직접 설치해야 한다. 참고

기본적으로는 CRA를 사용하되, SEO가 중요한 서비스의 경우 Next.js를 이용하는 것이 좋다.

npm npx yarn 차이점

NPM

Node Packaged Manager의 약자로, Node.js에서 사용하는 패키지매니저로써, Node.js를 설치하면 자동으로 설치된다.

NPX

create-react-app을 설치할 때 보았을 npx는 npm의 도구로써 약간의 귀찮은 과정들이 필요했던 사항들을 단순화 시켜준다. 쉽게 말해 npm, yarn과 같은 패키지매니저가 아니라 npm에 속해있는 파일실행도구이다. 별도로 설치할 필요없이 npm@5.2.0 이상의 버전이라면 사용할 수 있다. 자세한 npx의 용도를 알고싶다면, 빠리의 택시 운전사

YARN

Yarn은 페이스북에서 개발한 패키지매니저로써, 일관성있는 의존성 관리를 강조한다. 어디에서나 같은 버전을 통해 버그를 줄여 보안성을 높였다. 하지만 상대적으로 낮은 점유율로 npm에 비해 자료와 문서가 적다는 단점이 있다.

참고사이트 DONGCOLMI, 류시명 티스토리, 빠리의 택시 운전사

package.json을 사용할 때 알아둬야 할 것들

프로젝트를 구현할 때 package.json을 사용하면서 알아둬야 할 것들이 있다. 아직은 크게 와닿지 않지만, 점점 복잡한 프로젝트를 진행하면서 중요하게 생각될만한 내용들이라 정리해보았다.

dependencies

먼저 프로젝트의 의존성이다. 이런저런 pacakge를 설치하거나 업데이트 하다보면 dependencies가 변경되면서 충돌을 일으킬 수 있다. 때문에 설치하거나 major 버전업을 할 때에는 dependencies를 눈여겨보며 진행해야 한다.

peerDependencies

처음 peerDependencies 에러를 보았을 때, peerDependencies가 무엇인지조차 몰랐다. peerDependencies는 실제로 패키지에서 require나 import하지는 않지만, 특정 라이브러리나 툴에 호환성을 필요로 할 경우 명시하는 dependencies이다.

{
  "name": "playground",
  "dependencies": {
    "react": "16.8.6"
  },
  "devDependencies": {
    "@testing-library/react-hooks": "^7.0.2"
  }
}

예를들어 위처럼 16.8.6버전으로 고정된 react의 npm@7환경에서는 @testing-library/react-hooks"를 설치하려 할 때, @testing-library/react-hooks의 peerDependencies는 react@>=16.9를 요구하기 때문에 아래와 같은 에러를 내뱉고 설치되지 않는다.

참고로 peerDependencies는 npm@7부터는 기본으로 설치되며 버전이 맞지 않으면 에러가 발생하지만,
npm@3~6 까지는 peerDependencies가 자동으로 설치되지 않으며 버전이 맞지 않더라도 경고문구만 내뱉으며 설치되는 경우가 있는데, 추후 문제를 일으킬 수 있기 때문에 반드시 조심해야 한다.

➜  playground npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @testing-library/react-hooks@7.0.2
npm ERR! Found: react@16.8.6
npm ERR! node_modules/react
npm ERR!   react@"16.8.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">=16.9.0" from @testing-library/react-hooks@7.0.2
npm ERR! node_modules/@testing-library/react-hooks
npm ERR!   dev @testing-library/react-hooks@"^7.0.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@">=16.9.0" from @testing-library/react-hooks@7.0.2
npm ERR!   node_modules/@testing-library/react-hooks
npm ERR!     dev @testing-library/react-hooks@"^7.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/yceffort/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yceffort/.npm/_logs/2021-10-06T14_57_04_722Z-debug.log

package가 꾸준히 관리되는지

당장 패키지를 설치해서 사용할 때에는 문제가 일어나지 않지만, 이후 서비스를 지속하면서 사용하는 package가 더이상 관리되지 않는다면 직접 해당 package를 fork하여 관리하여야 할 수도 있다. 때문에 star가 높고 활발히 업데이트나 피드백이 오가는 패키지를 설치하는 것이 좋으며, 핵심 라이브러리는 직접 구현하는 것이 좋다.

참고사이트 yceffort.kr, 감성프로그래밍

prettier 자동포맷팅 오류 해결

프리티어 자동 포맷팅이 안되고 있었는데, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, 에서 vscode.typescript-language-features 를 esbenp.prettier-vscode 으로 변경하니 되었다.

[filetype]형태로 감싸는 것은 특정값만 설정해주고 싶은 파일을 설정하는 방식인데, 타입스크립트로 되어있어 문제가 생겼던 것 같다.

참고사이트 https://eodevelop.tistory.com/35)