Node.js
리액트와 노드는 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기에 개발에 있어 꼭 필수적인 요소가 되었다.
주로 사용하는 개발 도구에는
1) 구 브라우저에서 지원하지 않는 자바스크립트 문법을 호환시켜주는 바벨
2) 모듈화된 코드를 한 파일로 합치고(Bundler)하고 코드를 수정할때마다 웹 브라우저에서 리로딩(Hot-reload) 시켜주는 기능을 가진 웹팩 등이 있다.
노드를 설치하면 노드의 패키지 매니저인 npm이 같이 설치된다. npm은 똑똑한 개발자들이 미리 만들어놓은 라이브러리를 설치하고 버전을 관리하여 프로젝트의 질을 높여준다.
(npm 저장소에 등록된 패키지는 약 82만개로 엄청난 선물같은 패키지들이 있다...)
너무 많은 패키지들 중 뭘 써야하지? 고민된다면 NPM Trends를 참고하자 ㅋㅋ
https://npmtrends.com/
NVM
macOS에서는 Node.js를 여러 버전으로 설치하여 관리해주는 nvm 도구를 주로 사용한다. 추후에 노드 버전을 업데이트 하거나, 프로젝트 별로 버전이 다른 노드를 사용해야 할 경우 유용하기 때문이다.
여러가지 노드 패키지 매니저들
여러가지 개발 환경에서 적절한 패키지 매니저를 골라 사용하면 된다.
npm : 가장 보편적이고 작은 프로젝트에서 적합
- Node.js의 공식 패키지 매니저로, node 설치시 함께 설치된다.
- package.json 파일을 사용하여 프로젝트 의존성을 관리한다.
- package-lock.json 을 도입하여 의존성 버전을 고정하고, 설치된 패키지의 정확한 버전을 추적한다.
- 단일 레지스트리에서 패키지를 다운로드하고 관리한다.
yarn : 속도와 안정성 면에서 우수하고 큰 프로젝트에서 모노레포 환경에 유리함
- npm의 속도를 개선하고, 더 나은 의존성 관리를 제공한다
- npm와 호환되어 package.json을 그대로 사용한다.
- yarn.lock 파일을 사용하여 의존성의 버전을 고정하고, 팀 간의 일관된 환경을 보장한다.
- npm 은 패키지를 병렬로 설치하여 npm보다 더 빠른 설치 속도를 제공한다. 특히 캐싱을 사용하여 이미 설치된 패키지를 재사용하여 속도 향상을 이끈다.
- yarn은 여러 패키지를 하나의 레포에서 관리할 수 있는 워크스페이스 기능을 제공한다. 이를 통해 모노레포(Monorepo)에서 여러 패키지를 쉽게 관리할 수 있다.
pnpm : 디스크 공간과 성능에 효율적이며, 많은 프로젝트에서 의존성을 공유하고 빠른설치를 원한다면
- pnpm는 패키지 설치의 성능을 극대화 시키기 위해 설계된 패키지 매니저이다.
- 심볼릭 링크를 사용하여 여러 프로젝트에서 공통된 의존성을 공유한다. 즉 하나의 의존성 패키지가 여러 프로젝트에서 재사용될 수있다.
- pnpm는 병렬설치와 패키지를 중복없이 설치하므로 패키지 설치 속도가 매우 빠르다.
- 엄격한 의존성 관리로 패키지간의 충돌을 줄이고 패키지가 정확히 선언된 의존성만을 사용하도록 한다.
- npm와 완벽하게 호환되어, package.json, package-lock.json 파일을 그대로 사용한다.
package.json 구성요소
1. 기본 구성 요소
npm init -y위의 명령어를 실행하면 기본 설정값의 package.json을 생성할 수 있다.
{
"name": "PROJECT_DIRECTORY",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}각각 기본 구성요소들을 알아보자
- name: 패키지의 이름을 나타내는 것으로 필수항목
- version: 패키지의 버전을 나타내는 것으로 필수항목
- descrition: 패키지에 대한 설명으로 npm에 검색되었을때 리스트에 표시되어 사람들이 쉽게찾는데 도움을 준다.
- main: 패키지의 진입점(entry point)가 되는 모듈 ID이다.
- scripts: 패키지의 생명주기에서 자주 사용할 command를 alias를 통해 지정한 명령어들
- keywords: descrition와 마찬가지로 npm에서 검색되기 위한 키워드들
- author: 배포자 이름
- license: 배포한 패키지에 대한 권한과 제한사항이 있는지 알기위한 용도
2. 의존성 관련 요소들
"dependencies" : {
"react": "^18.2.0",
"react-dom": "^18.2.0",
},
"devDependencies" : {
"eslint": "^8.31.0",
"prettier": "^2.8.1",
"typescript": "^4.9.4"
},
"files": [
"dist/",
"js/{src,dist}/",
"scss"
]- dependencies: 프로덕션 환경 및 런타임에 사용되는 일반적인 종속성을 가진 라이브러리가 위치한다. 서비스 로직과 관련된 라이브러리, React, 상태관리 라이브러리 등이 있다.
- devDependencies: 로컬 개발 환경 또는 프로젝트 빌드에만 필요하거나 서비스 로직과 관련없이 개발시에만 필요한 라이브러리를 설치한다. 예시로는 webpack, testing lib, typescript 관련 (@types/*), eslint, prettier, storybook 등이 있다.
- files: 패키지가 의존성으로 설치될 때 같이 포함될 파일들의 배열이다. 생략하면 자동 제외로 설정된 파일을 제외한 모든 파일이 포함된다.
- 설정과 관계없이 무조건 포함되는 파일들: package.json, README, CHANGELOG, LICENSE 또는 LICENCE
- 항상 무시되는 파일들: .git, CVS, .sv 등
그 밖에 협업에서 작업 환경 설정시 필요한 플러그인
ESlint : 코드 정적 분석기
- ESLint는 코드의 스타일뿐만 아니라 코드의 구조, 문법, 베스트 프랙티스 등을 관리하는 규칙을 제공한다.
- 코드의 잠재적 오류, 구문 오류, 실수, 안티패턴 등을 찾아내고 경고 또는 오류를 발생시킨다.
- 사용자가 설정한 규칙에 맞는지 검사하고, 위반된 부분에 대해 경고 또는 오류를 반환한다.
- 자동수정 기능을 제공하여 코드의 오류를 검사하여 자동수정한다.
- .eslintrc.json 에 사용자 규칙을 설정한다.
{
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}Prettier : 코드 포멧터
- 코드 형식을 일관되게 수정하여 협업시 일관된 코드를 보장하여 관리가 쉽다.
- .prettierrc 에 규칙을 설정한다.
{
"singleQuote": true,
"trailingComma": "all"
}
🙋🏻♀️