mac에서 node.js 개발 환경 세팅

n 설치

n lts 버전 설치

sudo로 권한 주어 설치

 

📌 NPM 이란?

Node Package Manager

페키지 관리를 위해 하나의 json 파일로 관리해 줌

 

✅ 패키지 관리 시작하기 

npm init -y

 

package.js 파일이 생성되고, 이 파일안에 node.js 관련 package 정보가 다 들어감

{
  "name": "day27",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

위의 파일이 처음 생성 당시의 package.js이다.

 

npm run test

 

> day27@1.0.0 test
> echo "Error: no test specified" && exit 1

Error: no test specified

빌드 해준 문구가 실행되는 것을 확인할 수 있다. 

 

📌 Formatting 

• Code의 스타일을 통일 시켜 줌
• ex) 함수의 소괄호와 중괄호는 띄울 것인지? 세미 콜론은 찍을 것인지? 탭을 누르면 몇 칸을 띄울 것인지? 등등등
• 문법이 아닌 코드의 스타일을 통일 시켜줘서 가독성을 높이고 버그를 예방함
• Prettier 를 사용

✅ 프로젝트에 prettier 설정하기 

npm install --save-dev prettier

--save 는 패키지 모듈에 추가한다는 의미

--save-dev 는 개발할 때에만 사용하겠다는 의미 (실제로 프로젝트를 빌드 & 배포하면 해당 패키지는 포함 X)

 

package.js 파일을 확인하여 prettier가 잘 설치 되었는지 확인할 수 있다.

 

.prettierrc 파일 생성 후 아래 코드 삽입하여 설정완료하기 

{
    "semi": true, //세미클론
    "singleQuote": true //작은 따옴표 사용
}

 

vscode 에게 prettier 사용하라고 알려주기!

-> vscode 폴더 만들고 settings.json 파일 생성 후 아래 코드 추가 

{
    "[javascript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

 

📌 Linting 

Formatting 에 가깝지만 더 많은 규약과 규율을 검사해주는 방법

웹 개발에서는 Airbnb 에서 사용하는 Linting 규율이 유명함

 

✅ ESLint 설치하기

npm install --save-dev eslint

package-lock.json 파일을 보면 prettier에 비해 훨씬 많은 package 가 설치 되었음을 확인이 가능

-> 그만큼 많은 규약을 가지고 있다는 것!

✅ ESLint 설정하기

.eslintrc.js 파일 생성 후 

Airbnb의 Linting Rule를 가져 오기(아래 코드)

npm install --save-dev eslint-config-airbnb-base eslint-plugin-import

.eslintrc.js 파일에 가서 airbnb 모듈 추가 

module.exports = {
  extends: ['airbnb-base'],
  rules: {
    'linebreak-style': 0,
    'no-console': 'off',
  },
};

 

개발자가 간과할 수 있는 Rule 들을 바로바로 알려주기 때문에 나중에 발생할 예상외의 버그 또는 문제를 많이 해결해 준다

 

📌 Typescript 

javascript의 문맥상 에러를 잡아주는 typescript

 

✅ typescript 설치

npm install --save-dev typescript

✅ typescript 설정

Main.js 파일에 // @ts-check 주석 추가

 

Node.js 에도 다양한 Type 이 존재 하므로 관련 package 설치

npm install –-save-dev @types/node