Node.js 공부기록 (2)
5강 노드의 버전관리
nodejs.org 에서 node.js 다운로드 가능
LTS : Long Term Service 의 약자 (안정적)
nvm 도구 : 노드 버전 매니저의 약자
노드의 버전 매니지먼트 방법.
nvm은 복잡하므로, 대신 tj/n [티제이 의 엔 이라고 읽으면 됨]을 추천. (github.com/tj/n)
티제이의 엔은 노드 버전 매니지먼트 툴. 아주 괜찮은 바이너리 cli.
n[엔] 설치 방법
npm install -g n
n이 깔려있는 상태라면.
1. 터미널에 which n 입력 (깔려있는지 확인)
2. n 이라고 입력하면 설치한 노드 버전들이 쭉 나옴
3. 원하는 버전을 선택 (ex : v.12.18.3)
4. node –version 입력하면 버전이 바뀌어 있음
5. 항목 2~4를 반복하며 버전을 계속 바꿔보자
6. n latest 를 입력하면 가장 최신의 노드 설치함
단, 환경변수 설정을 잘 해줘야 함
echo $N_PREFIX 입력해보기
$N_PREFIX 에 해당하는 경로에 노드 버전들이 설치가 되므로 주의.
만약 $N_PREFIX 가 /Users/myname/n 일 경우,
/Users/myname/n/versions/node 폴더 안에 노드들이 설치되어 있다.
ex) /Users/myname/n/versions/node/12.18.3
/Users/myname/n/versions/node/14.15.4
/Users/myname/n/versions/node/15.14.0
—–
6강
개발환경에 필요한 여러가지 패키지들이 있는데,
이것들은 노드의 패키지 매니저인 NPM을 통해 설치할 것이다.
NPM 외에도 여러가지 패키지 매니저가 있다.
ex) yarn[얀], pnpm [피엔피엠]
npm 은 노드만 설치해도 같이 깔리기 때문에 편함.
성능적 문제가 아니라면 npm을 쓰자. (모든 기능 지원)
작업하는 프로젝트가 npm 이 관리하는 패키지임을 알려줘야 한다.
그러려면 package.json 이라는 파일이 필요함.
간단하게 만들려면 터미널에서 npm init -y 입력하면 package.json 만들어짐
기본내용
{
“name”: “test2”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}
package.json 은 패키지의 메타데이터를 포함하는 파일임.
즉, 우리가 작업할 모든 내용은 노드 패키지를 위한 내용일거라고 생각한다.
우리의 개인 프로젝트라도 일단 패키지로 본다.
package.json 필드
name : 패키지의 이름. 패키지로서 밖에 배포할게 아니면 의미가 별로 없다.
name, version, description, main, keywords, author, license 등도 마찬가지다.
패키지로서 배포할게 아니므로 필요없는 것을 다 지워보자.
{
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
}
}
사실상 스크립츠 하나만 남게 된다.
스크립츠는 npm을 사용하면서 자주 사용하게 되는, 혹은 프로젝트를 관리하면서 자주 사용하게 되는 스크립트를 간단하게 호출할 수 있도록 만들어준 필드이다.
호출 방법은
터미널에 다음 내용 입력하기
npm run test (스크립트에 있는 키의 이름)
에러를 내면서 exit하게 되어있으므로 내용을 고쳐보자.
{
“scripts”: {
“test”: “echo \”Hello, world!\””
}
}
다시 입력
npm run test
main.js 파일 생성
내용은
console.log(‘Hello, world!’)
터미널 입력
node main.js
실행이 될것이다.
* 포매팅, 린팅
Formatting 은 스페이스가 몇개인지 스페이스가 몇개 붙었는지 : 미적인것에 가까움
Linting 은 베스트 프랙티스, 잘지키면 좋은 것들, 혹여나 에러가 날 수 있는 것들을 잡아줌.
Formatting : Prettier [프리티어]
프리티어를 설치해보자.
npm install –save-dev prettier
package.json 내용이 바뀌었다.
{
“scripts”: {
“test”: “echo \”Hello, world!\””
},
“devDependencies”: {
“prettier”: “^2.5.1”
}
}
package.json 중요한 역할은 메타데이터를 표현하는 것도 있지만, 이 패키지/프로젝트의 의존성을 나열하는 것에도 큰 목적이 있다.
처음으로 의존성이 추가되었다.
package-lock.json 이란 파일도 생겼다.
락 제이슨 파일은 실제로 설치된 패키지들이 어떤 것인지 알려주는 파일이라고 생각하면 된다.
버전 컨트롤을 한다면(git으로 형상관리한다면) package-lock.json [패키지 락 제이슨] 파일도 같이 넣어주는 게 좋다.
package.json 에 쓰여있는 ^2.5.1 , 여기의 ^기호는 버전값이 정확하게 일치하지 않더라도 설치하게 만든다.
실제 로컬환경에 설치되는 버전이 2.5.1이 아닐 수 있다.
정확한 설치 버전을 알려면 package-lock.json 을 봐야 한다.
여러 사람과 같이 작업을 한다면 package-lock.json 을 꼭 커밋해줘야 한다.
node_modules 폴더가 생겼고, node_modules 밑에 .bin, prettier 폴더가 생겼다.
(1) node_modules 아래의 디렉토리들은 우리 프로젝트가 의존하고 있는 패키지들이라고 보면 된다.
(2) .bin 밑의 파일은 우리가 실행할 수 있는 바이너리 파일들이라고 보면 된다.
즉 프리티어라는 바이너리 파일이 하나 생겼다.
이제 프리티어로 포매팅을 해보자.
프리티어에게 필요한 설정파일 만들어야 함.
(1) .prettierrc [프리티어 알씨]라는 파일이 필요하다.
.prettierrc 파일을 새로 생성한다.
세미콜론 쓰는가, 홑따옴표 쓰는가 여부를 기입
{
“semi”: false,
“singleQuote”: true
}
(2) .vscode 라는 폴더 만들기.
(3) .vscode 라는 폴더 하위에 settings.json 파일 만들기.
[세팅스 닷 제이슨] 파일은 비주얼 스튜디오 코드가 바라보는 로컬 세팅을 모아두는 것.
이 프로젝트에만 적용되는 세팅.
내용은
{
“[javascript]” : {
“editor.formatOnSave”: true,
“editor.defaultFormatter”: “esbenp.prettier-vscode”
}
}
(4) 익스텐션 탭 (Ctrl + Shift + X)에서 Prettier – Code formatter 꼭 설치
(5) 이제 프리티어가 동작하기 시작.
(동작하지 않는다면 위 항목을 제대로 수행했는지, 파일명 등이 틀렸는지 확인)
main.js 파일에서 console.log(“Hello, world!”); 를 입력하고 파일 저장하면
console.log(‘Hello, world!’) 로 바뀜
—–
7강 : 든든한 개발환경 ESLint
프리티어는 포매터 역할이고, 린팅 역할의 플러그인을 깔자.
린팅의 역할에 해당되는, ESLint [이에스 린트]를 깔자.
ESLint는 패키지이자 플러그인임. vscode에서는 플러그인인 것이고.
ESLint 설치
npm install –save-dev eslint
(1) 익스텐션 탭 (Ctrl + Shift + X)에서 ESLint 꼭 설치
(2) ESLint 설정 파일을 만들어야 함.
.eslintrc.js [이에스 린트 알씨 닷 제이에스]
아래 내용 입력
module.exports = {}
이에스 린트가 사용할 룰들을 기재해줘야 하는데, 싱클 쿼트를 써라, var를 쓰지 말고 const와 let만 써라 등이 있는데
굳이 그렇게 하지 않아도 베스트 프랙티스에 맞게 나온 플러그인들이 있어서 그걸 쓰면 된다.
에어비엔비에서 ESLint 플러그인을 내놓은 것이 있다.
https://github.com/airbnb/javascript
아래 명령어로 설치
npm install –save-dev eslint-config-airbnb-base eslint-plugin-import
eslint-plugin-import 는 eslint-config-airbnb-base 가 필요로 하는 의존성 패키지이므로 같이 설치.
설치하고,
.eslintrc.js 파일 내용 수정하기
module.exports = {
extends: [‘airbnb-base’],
}
문제가 있다면 ESLint가 세미콜론이 없다고 오류를 냄.
그런데 세미콜론을 붙이고 저장을 하면 프리티어가 세미콜론을 없애버려서 답이 없음.
이때 ESLint와 프리티어가 충돌하지 않고 공존하도록 eslint-config-prettier 라는 패키지 설치하면 됨.
npm install –save-dev eslint-config-prettier
이제 또 .eslintrc.js 파일 내용을 바꾸자.
module.exports = {
extends: [‘airbnb-base’, ‘prettier’],
}
참고로 prettier 가 가장 마지막에 와야 eslint-config-prettier 가 잘 동작한다고 함.
이제 main.js 파일을 고쳐보자.
console.log(‘Hello, world!’) 노란줄이 떴다. ESLint 가 작동하고 있는 것이다.
마우스를 갖다 대보면 “Unexpected console statement.eslint(no-console)” 라고 나온다.
하지만 콘솔 출력이 필요하므로 잠깐 ESLint 룰을 꺼보자.
/* eslint-disable-next-line */
console.log(‘Hello, world!’)
하지만 이렇게 모든 룰을 다 꺼버리면 다른 규칙을 어겼을 때도 ESLint 오류가 나지 않는다.
아래와 같이 입력해야 특정 룰만 끌 수 있다.
/* eslint-disable-next-line no-console */
console.log(‘Hello, world!’)
모든 룰을 껐을 때 문제 : 아래 코드는 노란줄이 안뜨는 문제가 있다.
/* eslint-disable-next-line */
console.log(eval())
var x = 1 은 airbnb-base 에서 금지하고 있다.
let(값 변경가능) 이나 const(값 불변) 사용하자.
마지막으로 추가할 플러그인은 노드 전용 플러그인임.
npm install –save-dev eslint-plugin-node
eslintrc.js 파일 수정
module.exports = {
extends: [‘airbnb-base’, ‘plugin:node/recommended’, ‘prettier’],
}
이제 아래와 같은 코드는 쓸 수 없다.
exports = 3
마우스를 대보면,
exports = 3
Unexpected assignment to ‘exports’ variable. Use ‘module.exports’ instead.eslint(node/no-exports-assign)
린터와 포매터의 필요성
(1) 코딩중 즉각적 피드백 : 올바른 코딩 습관 형성
(2) 여러 사람 코드 관리할 때 코드를 청결하게 관리. 시맨틱/신택스로 싸울 일도 줄어듬.
(3) 여기 나와있는 룰들을 살펴보기만 해도 베스트 프랙티스 학습이 됨
airbnb-base 의 룰을 살펴보자. https://github.com/airbnb/javascript
(4) 버그방지
—–
8강 타입스크립트 설치
자바스크립트는 다이나미컬리 타입드 랭귀지 (동적으로 타입이 정의되는 언어임)
실행시간에 가서야만 어떤 변수의 타입을 알 수 있음.
자바스크립트는 자바스크립트 자체만 놓고 봐서는 컴파일이라는 과정을 거치지 않기 때문에
변수가 어떤 타입으로 활용될지를 미리 알 수 없음.
미리 에러가 나지도 않음.
그래서 타입 에러가 있는 코드를 써놓아도, 그것이 실제로 실행되는 순간에서야 알게되는 불상사가 벌어짐.
강력하게 타입체크를 하는 다른 언어들에서 보기 힘든 점임 (컴파일 언어들. 타입 불일치로 인한 에러는 거의 없음.)
타입을 체크하기 위해 페이스북에서 만든 Flow라는 도구도 있지만, 타입스크립트를 추천.
타입스크립트는 자바스크립트로 컴파일(정확히 말하면 트랜스파일)되는 언어인 것이다.
타입스크립트는 자바스크립트 위에 타입정의만 얹어놓은 것이다.
문제가 되는 코드를 짜보자.
main.js 내용 수정
const someString = ‘Hello’
const result = Math.log(someString) // 문자열을 로그 연산. 애초에 말이 안되지만 에디터는 오류를 알아차리지 못한다.
console.log(result)
node main.js 실행
NaN 이 출력된다. 낫 어 넘버, 낫 에이 넘버라는 뜻.
타입스크립트를 설치해보자.
npm install –save-dev typescript
설치 후 main.js 내용 수정
// @ts-check
const someString = ‘Hello’
const result = Math.log(someString) // 문자열을 로그 연산
console.log(result)
이제 빨간줄이 그어진다.
—–
9강 노드에서 타입스크립트 활용
타입스크립트가 노드 프로그래밍 환경에서 동작하게 하려면 타입스-노드 패키지를 설치해야 함
npm install –save-dev @types/node
이 패키지에 들어있는 정보는, 노드에서 주로 사용되는 객체들에 대한 타입정보들이 들어있다.
아직 이해하기 어렵겠지만 중요한 점은, vscode가 타입스크립트 바이너리를 이용해서 타입체킹을 도와준다는 점이다.
main.js 파일 수정
const http = require(‘http’)
const server = http.createServer((req, res) => {
res.statusCode = 200
res.end(‘Hello!’)
})
const PORT = 4000
server.listen(PORT, () => {
console.log(`The server is listening at port : ${PORT}`)
})
node main.js로 실행.
The server is listening at port : 4000 라고 뜰것임.
http://localhost:4000/ 접속해보기.
여기서 만약 res.statusCode = 200 을 res.statuscode = 200 로 대소문자 오타를 냈다면?
마우스를 갖다대면 타입스크립트가 에러를 잘 캐치해주는 것을 볼 수 있다.
‘statuscode’ 속성이 ‘ServerResponse’ 형식에 없습니다. ‘statusCode’을(를) 사용하시겠습니까? ts(2551)
http.d.ts(478, 9): 여기서는 ‘statusCode’이(가) 선언됩니다.
아래 코드의 문제도 타입스크립트가 잘 감지한다.
res.statusCode = “200”
마우스를 갖다대면 아래처럼 나온다.
‘string’ 형식은 ‘number’ 형식에 할당할 수 없습니다. ts(2322)
에러를 미연에 방지 가능하다.
—–
10강 타입스크립트 설정파일
타입스크립트를 사용해서 프로젝트를 진행한다면, 타입스크립트 프로젝트 설정파일인 tsconfig.json 에 설정 내용을 넣게 되는데
우리는 자바스크립트 프로젝트를 진행하면서, 타입스크립트 타입 체킹의 도움만 받을 것이기 때문에 조금 다른 설정 파일을 쓸거다.
(1) jsconfig.json 파일 생성
{
“compilerOptions”: {
“strict”: true
},
“include”: [
“src/**/*”
]
}
(2) src 폴더 생성
(3) src 폴더 안에 main.js 옮겨넣기
(4) src 폴더 안에 ts.js 새 파일 생성
src 폴더 안의 모든 파일에 대해서 strict를 적용하게 된다고 한다.
ts.js 내용 작성 (두줄)
// @ts-check
const x = null
아래 두 개 에러가 나와야 한다고 하는데 첫번째 에러만 나타난다.
strict 값이 true이면 아래 두 개 에러가 나고, false이면 첫번째 에러만 나타난다는데 이상하다.
분명 strict값은 true로 해두었고, vscode도 여러번 재기동 해보았다.
첫번째 : ‘x’ is assigned a value but never used. eslint(no-unused-vars)
두번째 : Variable ‘x’ implicitly has an ‘any’ type. ts(7005)
아무리 해도 적용이 안되어서 일단 넘어간다.
—–
11강 환경설정 종합
VSCode JavaScript Development Setup
| Formatting | Linting | Type Checking
————–+————-+—————————+————–
Package | prettier | eslint | typescript
————–+————-+—————————+————–
| | eslint-config-airbnb-base | @types/node
Additional | | eslint-config-prettier |
dependencies | | eslint-plugin-import |
| | eslint-plugin-node |
————–+————-+—————————+————–
Config file | .prettierrc | .eslintrc.js | jsconfig.json
————–+————-+—————————+————–
VSCode | O | O | X
extensions | | |
————–+————-+—————————+————–