[조코딩 웹 개발 5주 완성] 4주차 정리 - node.js, npm, Express

<node.js>

 

Module이란?

별도의 코드를 작성하지 않아도 모듈을 다운로드하여서 쓸 수 있는 기능 단위

 

node.js에서 사용하는 모듈: npm

 

 

node.js 설치하기

https://nodejs.org/ko/

Node.js

 

 

 

왼쪽 버전으로 다운로드를 해준다.

 

 

 

 

 

 

 

 

 

정상적으로 설치된 모습이다.

 

 

 

 

 

 

이제 vscode를 켜서 새로운 파일 index.js를 만들어준다.

 

 

 

 

 

코드를 입력해준뒤

 

 

 

 

 

터미널 창을 켜서 node index.js(파일명)을 적어주면 코드가 node로 실행된다.

 

 

 

 

이까지 완료되면 node.js가 컴퓨터에 깔려서 컴퓨터에서 JavaScript를 실행할 수 있는 환경이 생기게 된 것이다.

 

 

 

---

<npm>

 

npm

node package manager

 

프레임워크나 자바스크립트로 구현된 다양한 모듈들을 다운로드하여 사용할 수 있는 곳

 

https://www.npmjs.com/

npm

 

 

node.js에 모듈 설치하는 방법

 

npm install OOO

 

 

예시) figlet 모듈 설치하기

 

 

 

npm 사이트에 figlet을 검색하여 들어간다.

 

 

 

 

 

아래로 내려보면 figlet 모듈을 설치하고 사용하는 방법이 나와 있으므로 따라서 진행하면 된다.

 

 

 

 

 

다시 vscode로 돌아와서

 

 

 

npm init을 작성해준다. npm을 시작하겠다는 명령어로, 필수는 아니지만 npm 관리를 깔끔하게 하기 위해 해주는 것이다.

 

 

 

 

 

계속 엔터를 눌러주면 package.json 파일이 만들어진다. 이 파일은 npm을 이용해서 여러 모듈들을 다운로드하고 적용할 때 어떤 것을 다운로드하였는지, 이 프로젝트의 이름은 무엇인지, 버전은 무엇인지 등을 기록해주는 파일이다.

 

 

 

 

 

npm install figlet을 하면 figlet이 설치된다.

 

 

 

 

 

package.json 파일에 들어가 보면 figlet이라는 npm 모듈이 쓰였다는 것을 확인할 수 있다.

 

 

 

 

 

그리고 package-lock.json 파일이 만들어지게 되는데 구체적으로 figlet의 버전 정보와 같은 상세한 정보들이 적혀있는 파일이다.

 

즉 package.json은 대략적으로 어떤 모듈이 설치되었는지 확인할 수 있는 파일이고 package-lock.json 파일은 모듈의 상세한 정보를 확인할 수 있는 파일이라고 할 수 있다.

 

 

 

 

위에 보면 node_module이라는 폴더가 있고 그 안에 figlet이 있는데 이 폴더는 설치한 모듈들이 다운로드하여졌다는 것을 보여준다.

 

 

모듈 사용해보기

 

 

 

npm 사이트에 있는 예시 코드를 가져와 실행을 해본다.

 

 

 

실행을 해보면 다음과 같이 잘 출력이 된 것을 확인할 수 있다.

 

 

 

※ 안 쓰는 모듈 제거하는 법

 

npm uninstall OOO

 

 

 

node_module 폴더에 figlet 모듈이 사라졌음을 확인할 수 있다.

 

 

 

---

 

<Express>

 

Express

node.js를 이용해서 웹 프레임워크를 만드는 모듈

 

https://www.npmjs.com/package/express

express

 

 

 

Express라는 프레임워크를 이용하여 백엔드 서버를 만드는 과정

 

 

 

방금 figlet 모듈을 설치하는 방법과 같은 방법으로 express도 설치해준다.

 

 

 

 

package.json 파일에서 express가 잘 설치되었는지 확인해준다.

 

 

 

 

 

index.js 파일에 예시 코드를 복사 븥여넣기하고 이 코드를 실행해준다.

 

 

 

 

이렇게 뜨면 실행이 되고 있다는 것이다.

 

 

 

 

새 창에 localhost:3000로 들어가 보면 브라우저에서 코드가 잘 실행되었음을 확인할 수 있다.

 

 

 

 

서버 끄는 명령어는 ctrl + C로, 서버를 끄면 

 

 

사이트에 연결할 수 없다고 뜬다.

 

 

 

코드 설명

 

전체 코드

 

const express = require("express");
const app = express();
const port = 3000;

app.get("/", function (req, res) {
  res.send("Hello World");
});

app.listen(port, () => {
  console.log("Example app listening on port ${port}");
});

 

---

 

 

 

 

포트 번호(3000)에 대해서 listen하고 있다는 의미인데,

 

포트란 네트워크 서비스나 특정 프로세스를 식별하는 논리 단위이고, 각 포트는 번호로 구별된다. 이 포트 번호는 IP 주소와 함께 쓰인다.(내부적으로 포트라는 개념이 있다고 생각)

 

* 쉽게 설명하면 IP는 대표 전화번호, 포트는 ARS 내선 번호라고 생각하면 된다.

 

https://ko.wikipedia.org/wiki/TCP/UDP%EC%9D%98_%ED%8F%AC%ED%8A%B8_%EB%AA%A9%EB%A1%9D

 

이 사이트를 참고하면 알려진 포트 번호를 볼 수 있다.

 

 

▶ 포트가 듣고 있어야 서버로 접속했을 때 프로그램이 실행되어서 응답을 할 수 있게 되는 것이다. 한 서버 내에서 여러 포트를 켜 놓을 수도 있다.

 

 

localhost 3000으로 들어오면 console.log(콜백함수)를 실행하겠다는 의미

 

 

 

 

 

 

app.get ➡ HTTP 메서드

'/' ➡ 라우팅

() => {} ➡ 콜백 함수

 

 

HTTP 메서드

요청의 목적, 종류를 알리는 수단

 

Get - 주소창에서 데이터를 담아서 보내는 방식

Post - 주소창이 아니라 내부적으로 데이터를 담아서 보내는 방식

 

 

 

HTTP 메서드 중에 get 방식으로 들어온 것을 받겠다는 의미

 

 

 

라우팅

포트 안에서도 여러 파일이 있는데 그 파일로 들어가는 경로

 

/ : 기본 주소

/about

/board

/board/write

 

 

 

 

콜백(callback) 함수

함수(끝나고 실행할 함수)

 

setTimeout(() => {}, 1000)

1000ms 후에 () => {} 함수를 실행하라는 의미

 

함수의 실행 순서를 지정해줄 때 사용하는 함수

 

 

 

 

 

function(req, res)

req : 요청에 대한 정보

res : 응답에 대한 정보

 

 

 

 

res.send("Hello World")

응답에 Hello World라는 문자를 담아 보내겠다.

 

 

 

app(express)에서 주소창을 이용한 정보 전달은 get 방식으로 이루어지고 '/' 경로에 들어와서 콜백 함수를 실행된다는 의미

 

 

프론트엔드에서 HTTP 요청을 보내주고 백엔드에서는 해당 포트로 듣고 있으므로 들어오고 app.get 방식의 루트로 들어왔으니까 res.send를 통해서 응답을 프론트엔드로 돌려준다.

 

 

listen은 서버가 켜져 있으면 항상 듣고 있다는 것이고 get은 라우팅에 따라서 함수가 실행됨

 

 

 

get 방식으로 어떤 url로 요청했을 때 json 데이터 응답받기

 

const express = require("express");
const app = express();
const port = 3000;

app.get("/", function (req, res) {
  res.send("Hello World");
});

app.get("/dog", function (req, res) {
  res.json({ sound: "멍멍" });
});

app.get("/cat", function (req, res) {
  res.send("cat");
});

app.listen(port, () => {
  console.log("Example app listening on port ${port}");
});

 

 

GET 방식의 정보를 전달할 때의 변수를 받는 2가지 방법

1. params를 이용하는 방법
2. query를 이용하는 방법

 

1. params를 이용하는 방법

 

app.get("/user/:id", (req, res) => {
  const q = req.params;
  console.log(q);

  res.json({ userid: q.id });
});

 

 

http://localhost:3000/user/hj

 

 

 

주소에 '/user/:변수명'을 써주면 id에 적힌 값이 req.params로 넘어오게 된다.

 

 

 

2. query를 이용하는 방법

 

key-value

 

app.get("/user/:id", (req, res) => {
  const q = req.query;
  const q = req.query;
  console.log(q.q);
  console.log(q.name);

  res.json({ userid: q.name });
});

 

 

 

http://localhost:3000/user/asdf?q=hjcoding&name=hj&age=20

 

 

 

 

 

POST방식의 정보를 전달할 때의 변수를 받는 방법

 

app.use(express.json());
app.post('/user/:id', (req, res) => {
	const p = req.params;
    console.log(p);
    const b = req.body;
    console.log(b);
    
    res.send({'message': 'Hello World!'});
})