[Node.js] 8/24 Node 수업 Flow (노드설치, 기본 셋팅)

1. KeyPoint
2. 수업 Flow

1.  수업 KeyPoint 🔑

• 프레임워크 
• 컴파일 / 빌드
• 동기 / 비동기

 

2.  수업 FLOW ⌛️

노드 설치

 

- node.js는 chrome V8 js 엔진

 

1 )   npm install  -g  n 

 

jangsaeyeong@jangseyeong-ui-MacBook-Pro ~ % n lts
 
 . . .

  Error: sudo required (or change ownership, or define N_PREFIX)

• Error: sudo(관리자모드로써 접근해주라)로 접근해볼래?

jangsaeyeong@jangseyeong-ui-MacBook-Pro ~ % sudo n lts

Password:
  installing : node-v16.17.0
       mkdir : /usr/local/n/versions/node/16.17.0
       fetch : https://nodejs.org/dist/v16.17.0/node-v16.17.0-darwin-x64.tar.xz
     copying : node/16.17.0
   installed : v16.17.0 (with npm 8.15.0)

jangsaeyeong@jangseyeong-ui-MacBook-Pro ~ % node -v

v16.17.0

• n latest 최신버전설치
• n lts 안정 버전 설치
• n 16.16.0 원하는 버전 설치
• n 내가 설치 한 것 중에 버전 선택할 수 있음 (You can also use j and k to select next or previous version instead of using arrows, or ctrl+n and ctrl+p.)

 

2 )   npm   /   package.json 

jangsaeyeong@jangseyeong-ui-MacBook-Pro node-set % npm init -y

• npm init 을 하면 package.json 파일이 생긴다. 

* package.json 파일 내용

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

 

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

--------------------------------------------------

jangsaeyeong@jangseyeong-ui-MacBook-Pro node-set % npm run test

> test
> echo "Error: no test specified" && exit 1

Error: no test specified

--------------------------------------------------

{
  "scripts": {
    "test": "echo \"Hello, node.js\""
  }
}

----------

jangsaeyeong@jangseyeong-ui-MacBook-Pro node-set % npm run test

> test
> echo "Hello, node.js"

// Hello, node.js 출력

⚠️ 만약 없는 것을 입력하게 된다면?

jangsaeyeong@jangseyeong-ui-MacBook-Pro node-set % npm run study
npm ERR! Missing script: "study"
=> ERR! 에러라고 알려준다.

 

 

3 )   자바스크립트 연결 

main.js 파일 생성 후 콘솔 작성(Hello,node.js라고 작성) 
그리고 터미널에 질문 

jangsaeyeong@jangseyeong-ui-MacBook-Pro node-set % node main.js
Hello,node.js

=> 작성한 Hello,node.js가 터미널에서 출력 되는 걸 볼 수 있다.

• 만약 파일이 폴더 안에 있다면?  => node 폴더이름/main.js

 

4 )   Formatting 

• 코드 스타일을 통일하여 가독성을 높이고 버그를 예방하며 협업 시 효율적임.
• Prettier 설정

jangsaeyeong@jangseyeong-ui-MacBook-Pro node-set % npm install --save-dev prettier
=> npm install --save-dev prettier
=> npm으로 설치할래 패키지모듈츄가-개발할때만 사용하게 prettier를 
=> --save 패키지 모듈에 추가할게
=> --svae-dev 패키지 모듈에 추가할껀데 개발할 때만 사용할게.

--------------------------------------------------------

* 저절로 package.json에 추가된다. 

{
  "scripts": {
    "test": "echo \"Hello, node.js\""
  },
  "devDependencies": {
    "prettier": "^2.7.1"
  }
}


--------------------------------------------------------

.prettierrc 파일 생성 후 이 프로젝트에서 사용할 규칙을 작성한다. 

{
  "semi": false,
  "singleQuote": true
}

* settings.json 규칙 작성

- Vscode에게도 prettier 사용할라고 알려주는 것. 
- .vscode 폴더 생성 후 settings.json 파일 만들어서 작성. 

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

 

폴더구조 확인

 

5 )   Linting 

• formatting 보다 더 강력하게 규율 검사를 해주는 방법

* .eslintrc 파일 생성

* elint 설치
jangsaeyeong@jangseyeong-ui-MacBook-Pro node-set % npm install --save-dev eslint-config-airbnb-base eslint-plugin-import

* .eslintrc 파일 내부 작성 

module.exports = {
  extends: ['airbnb-base'],
  rules: {
    'no-console': 'off',
     => airbnb-base 쓸건데! console쓰는거는 난 할래!
  },
};

 

+ eslint 끄기

// eslint-disable-next-line
=> 한 줄만 eslint 무시할래 근데 바로 다음줄만!

// eslint-disable
=> 여기 파일 전체에서는 eslint 사용하지 않을래!

lintOnsave:false
=> .eslintrc.js에서 파일에서 전체적으로 eslint끄고 싶을 때 추가하기.

 

6 )   Typescript  

예시) 타입스크립트가 필요한 이유

const str = 'hello';
const num = Math.log(str);
console.log(num);

=> ESlint로는 문제없음
--------------------------------------------------------
jangsaeyeong@jangseyeong-ui-MacBook-Pro node-set % node main.js
NaN
=> 근데 실행하면 NaN 이 뜸

 

* 설치

jangsaeyeong@jangseyeong-ui-MacBook-Pro node-set % npm install --save-dev typescript


* 적용 

//@ts-check

const str = 'hello';
const num = Math.log(str);
=> 에러를 알려줌 (아래 이미지 참고)
console.log(num);

• Node.js 에서 사용되는 수 많은 객체들에 대한 Type정보 체크는 Typescript만으로는 불가능함. 그래서 더 많이 잘 알고 있는 Package를 설치한다!

 

jangsaeyeong@jangseyeong-ui-MacBook-Pro node-set % npm install --save-dev @types/node


// @ts-check

const http = require('http');
// http라는 통신 모듈을 불러옴.

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.end('hello');
});

const PORT = 4000;
server.listen(PORT, () => {
  console.log(`서버는 ${PORT}번 포트에서 실행중 입니다.`);
});

------------------------------------------------------

jangsaeyeong@jangseyeong-ui-MacBook-Pro node-set % node main.js
서버는 4000번 포트에서 실행중 입니다.

=> 서버 접속 시 나오는 화면 아래 이미지 참고