node.js, Visual Studio Code 설치 및 따라하기

<참조> https://www.youtube.com/watch?v=n-Ae22bpNWU&list=PLfLgtT94nNq1qmsvIii_CAxFlD7tvB5NE&index=5

node.js, Visual Studio Code 설치 및 따라하기 

 

글. 수알치 오상문 

 

1. nodel.js 다운로드 후 설치 

   (다운로드 링크: https://nodejs.org/ko/download/ )

   설치 중간에 자동 설치 옵션을 선택하고 진행하세요.

 

2. 파워쉘 창을 열고 다음 명령으로 node.js 버전을 확인한다.

node -v <엔터>

v16.15.1

 

3. 파워쉘에서 node.js를 실행한다.

node <엔터>

 

4. 다음처럼 자바스크립트가 동작하는지 확인한다.

console.log("Hello")

Hello

 

5. Visual Studio Code (vsc) 다운로드 후 설치 

다운로드 링크 : https://code.visualstudio.com/download 

 

6. Visual Studio Code를 실행한다.

 

7.  '파일' > '폴더 열기'를 선택한다. 

원하는 위치에 프로젝트 폴더를 만들고 폴더를 선택한다.

 

8. '터미널' 메뉴 이용하여 '새 터미널'을 선택한다. (화면 아래에 터미널 창이 추가됨)

 

9. 터미널 창에서 다음처럼 입력한다.

(npm은 패키지 설치 프로그램인데 설치 패키지 목록 관리를 위한 설정이다)

 

C:\nodeweb> npm init <엔터>
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nodeweb) <엔터>
version: (1.0.0)  <엔터>  
description:  <엔터> 
entry point: (index.js) <엔터>    server.js처럼 원하는 대문(엔트리 포인트)  파일을 지정해도 된다.

test command:  <엔터>
git repository:  <엔터>   
keywords:  <엔터> 
author:   <엔터> 
license: (ISC)   <엔터> 
About to write to C:\nodeweb\package.json:   <엔터>     프로젝트 폴더에 package.json 파일 생김

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

Is this OK? (yes)   <엔터> 

npm notice
npm notice New minor version of npm available! 8.11.0 -> 8.12.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.12.1
npm notice Run npm install -g npm@8.12.1 to update!
npm notice

 

[참고] 이 단계에서 npm을 찾지 못하는 오류가 발생하면 아래 글을 참조한다.

https://blog.daum.net/sualchi/13721740

 

10. 다음처럼 터미널 창에 입력한다. (express 라이브러리 패키지 설치)

 

npm install express <엔터>

 

설치가 되면 package.json 파일에 다음 항목이 추가된 것을 볼 수 있다. 

  "dependencies": {

    "express": "^4.18.1"

  }

 

그리고 node.modules 폴더에 express 말고도 많은 패키지 파일이 생성된 것을 볼 수 있다.

 

[참고] npm을 쓸 수 없는 경우에는 yarn 다운로드 사이트에서 yarn 다운로드하여 설치하여 npm 대신에 사용할 수 있다.

단, 'yarn add 패키지명' 형태로 실행해야 한다(설치 후 재시작 필요). npm에 비해 yarn이 에러도 적고 빠르다고 한다.

'npm install -g 패키지' 명령은옵션 'yarn add global 패키지'로 실행하면 된다.

 

[참고] 코드 수정 시 서버 재실행 

지금은 서버 코드를 수정하면 Ctrl-C를 눌러 서버를 종료하고 다시 실행해야한다. 

코드를 수정하여 저장하면 서버를 자동 재실행하고 싶으면 다음처럼 따라한다.

npm install -g nodemon <엔터>

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
added 116 packages, and audited 117 packages in 12s
16 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

 

설치가 되면 서버를 실행할 때 다음처럼 명령한다,

nodemon index.js <엔터>   물론 server.js로 작성한 경우에는 'nodemon server.js'로 실행한다.

C:\nodeweb>nodemon index.js
[nodemon] 2.0.16
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
listening on 80 port...

 

아직 index.js를 작성하지 않았으니 웹 브라우저에서 'localhost'에 접속해도 제대로 동작하지 않을 것이다.

 

[참고] nodemon 실행 에러시 (권한 에러 때문)

 

index.js를 다음처럼 작성하고, 웹브라우저에서 'localhost/ping'이나 'localhos'로 접속해보자.

const { response } = require("express");
const express = require("express");
const app = express();
app.listen(80, function() {
    console.log("listening on 80 port...");
} );
app.get("/", function(req, res) {
    res.send("Hello");
});
app.get("/ping", function(req, res) {
    res.send("<h1>pong!</h1>");
});

 

이후 웹서버 작성 과정은 다음 동영상을 참고합니다.

https://www.youtube.com/watch?v=HeOh-go-fYY&list=PLfLgtT94nNq1qmsvIii_CAxFlD7tvB5NE&index=6 

 

https://www.youtube.com/watch?v=Yn4fUo1i1-s&list=PLfLgtT94nNq1qmsvIii_CAxFlD7tvB5NE&index=7 

 

https://www.youtube.com/watch?v=rVNsEXZPEF8&list=PLfLgtT94nNq1qmsvIii_CAxFlD7tvB5NE&index=8