Express.js

Express.js

1) 웹서버와 Express의 정의

2) 일반적인 웹 서버와 Node.js로 만든 웹 서버 비교

- 일반적인 웹서버와 Node.js로 만든 웹 서버는 다르지 않다.

• 그저 어떤 도구를 사용해 만들었냐의 차이일 뿐 동일한 기능을 수행하는 웹 서버를 만들수 있고
• 다른 언어나 도구를 이용해 만든 웹서버도 마찬가지 이다.
• 기능이 다른 웹 서버는 존재할 수 있지만 기반이 되는 개념 자체가 다른 웹서버는 존재x

3) Express.js ?

• Node.js로 서버를 빠르고 간편하게 만들 수 있게 도와주는 웹 프레임워크
• 이외에 다양한 웹 프레임워크가 존재하지만 가장 많은 Node.js 웹서버가 Express.js 프레임 워크를 통해 개발되었다.
• Express.js는 Node.js를 위한 웹 프레임워크이고, 웹 서버를 구현하기 위해 사용되는 것이다.

 

Express.js로 웹 서버 구현

 

1) 새 프로젝트 설정

1. VS Code를 실행한다
2. 상단 메뉴의 File -> Open을 한다
3. 새로운 폴더 버튼을 누르고 새폴더를 생성한다
4. 새로 만들어진 폴더를 클릭하고 '열기'
5. 새 파일을 'app.js'로 생성한다
6. 위에 메뉴에서 '새 터미널'을 클릭
7. 터미널이 열리면 명령어를 실행하여 package.json을 생성해준다.

$ npm init -y

(뒤의 -y는 npm init 명령 실행시 원래 프로젝트명이나 버전등을 물어보는데 묻지않고 기본값으로 설정해주는 옵션.)

 

2) Express.js 설치

• 터미널에서 해당 프레임워크 설치

npm i express

 

3) 기본적인 웹 서버 코드 작성

• 폴더 안에 app.js 파일을생성
• package.json파일을 다시 열어봤을때 express 관련된 내용이 들어있으면 정상적으로 설치가 완료된것
• package-look.json은 어떤 버전으로 설치되었는지 기록해놓은 파일
• 다른동료들과 협업할때 같은 환경으로 개발할 수 있게 도와준다
• node_modules 폴더는 npm을 통해 설치된 패키지들에 대한 파일이 있는폴더
• 다양한 라이브러리를 사용한다면 이에 대한 파일들은 여기에 설치된다

 

- app.js 예시

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

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(port, '포트로 서버가 열렸어요!');
});

4) 내가 만든 웹 서버 실행

• app.js를 실행하기 위해서는 폴더의 경로에서 실행해줘야 한다.

node app.js

• '3000 포트로 서버가 열렸어요!' 라는 메세지가 출력되면 정상적으로 실행된 것이다

 

실행에 문제가 있다면 ?

Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (net.js:1318:16)
    at listenInCluster (net.js:1366:12)
    at Server.listen (net.js:1452:7)
// 이미 다른 프로그램이 해당 포트를 사용중일 수 있다
// app.js 파일에서 3000 이라고 써져있는 port를 4000이나 다른 숫자로 변경해서 다시 해보자

사용중인 포트를 찾아 종료하고 싶을 때는 ?

- MAC

lsof - list open files

lsof 명령어를 이용하여 간편히 특정 포트를 찾을수 있다.

현재 시스템에 열린 파일 목록에 대한 정보들을 알려줌.

1. 터미널을 열고 명령어를 통해 원하는 포트를 찾는다.

ex) 3000포트를 점유하고 있는 프로세스에 대한 정보를 원한다면

lsof -i :3000 이라고 입력하면 된다.

lsof -i :원하는포트

2. 해당 포트를 점유하고 있는 PID를 찾아서 종료시킨다.

kill -9 포트를 점유하고 있는 PID

WINDOW

 netstat 명령어를 이용해 컴퓨터와 연결된 네트워크 정보를 확인할 수 있다.

( 추가 설명 - https://mainia.tistory.com/5378 )

1. cmd 창을 열고 명령어를 통해 원하는 포트 정보를 찾는다

netstat -ano | find "원하는포트"

2. 해당 포트를 점유하고 있는 PID를 찾아 종료시킨다.

taskkill /f /pid 12952

5) 브라우저에서 웹 서버의 응답 확인

• 브라우저로 http://localhost:3000/ 경로를 들어가면
• 코드에서 GET Method로 작성된 코드를 통해 Hello World! 라는 문구를 확인 할 수 있다.

 

API Client 

1) API Client란 ?

• 개발단계에서 작성한 API의 요청을 확인하거나 테스팅 할 때 도움을 주는 툴
• 개발 속도를 높이거나 치명적인 에러를 예방하는데 도음을 받을 수 있다.
• Postman, Insomnia 등 여러 API Client가 있지만 여기선 Thunder Client를 사용할 예정

- Thunder Client는 VS Code 안에서 사용할 수 있고 기능이 부족하지 않아 비교적 쉬운 가용이 가능

 

2) 필요한 상황?

POST, PATCH, PUT, DELETE, HEAD 등의 다양한 Method에 대한 API를 개발하고 테스트하기 위해

반드시 필요한 도구이다.

 

3) VS Code - Thunder Client 설치

1. 프로그램 좌측 탭 맨아래 Extnsions 클릭
2. 검색창이 나오면 Thunder Client 검색 후 제일 위에 보라색 번개모양 아이콘을 설치
3. 좌측 바에 번개모양 아이콘이 생기면 설치완료

 

4) Thunder Client로 웹 서버 응답 확인하기

1. node app.js를 입력하여 서버를 켜준다
2. Thunder Client 아이콘을 클릭하고 창이 나오면 New Request 버튼을 눌러준다
3. URL을 입력하는 곳에 웹 서버 API의 HTTP Method인 GET으로 설정한뒤
4. http://localhost:3000/ 을 입력하고 Send 버튼을 눌러준다
5. 저장한 문장이 나오게 되면 성공

 

5) Thunder Client 활용하기

Collections

• 특별한 프로젝트마다 API 목록을 정리해서 사용할 수 있다
• 여러가지의 API를 그룹화 시킬 수 있다

Env

• 여러번 사용되는 값들을 환경변수로 설정할 때 사용
• Token, URL, 개인 키 등 다양한 자격증명을 저장 및 사용할 수 있다

 

Routing 과 Router

1) Routing ?

• 클라이언트의 요청 조건(메서드, 주소 등)에 대응해 응답하는 방식

 

2) Router ?

• 클라이언트의 요청을 쉽게 처리 할 수 있게 도와주는 Express.js 기본 기능 중 하나

 

Router의 구조

router.METHOD(PATH, HANDLER);

• router : express의 라우터를 정의하기 위해 사용
• METHOD : HTTP Method를 나타낸다. (ex. get, post, put, delete ...)
• PATH : 실제 서버에서 API를 사용하기 위한 경로
• HANDLER : 라우트가 일치할 때 실행되는 함수

 

3) Router 사용해보기

• routes 폴더를 생성해 goods.js 파일을 생성한다
• express 에서 제공되는 Router 함수를 사용해 Router를 생성한다

// routes/goods.js
const express = require('express');
const router = express.Router();

• 엔드포인트 예시

// routes/goods.js
router.get('/', (req, res) => {
	res.send('this is home page');
});

router.get('/about', (req, res) => {
	res.send('this is about page');
});

• 작성한 Router를 app.js에서 사용하기 위해 하단에 내보내주는 코드를 추가

// routes/goods.js
module.exports = router;

Router 미들웨어 사용 선언

// app.js
const goodsRouter = require("./routes/goods");
app.use("/api", [goodsRouter]);

• http://localhost:3000/ 뒤에 /api 로 시작되는 주소는 routes/goods.js 에 있는 Router 미들웨어를 통해 처리

 

미들웨어 (Middle ware) ?

• 웹 서버에서 요청을 받을 때 가끔 모든 요청에 대해 공통적인 처리가 필요하다
• 그때마다 미들웨어를 이용해 웹 서버의 요청/응답에 대해 공통적인 관리가 가능.

 

Module

1) Module ?

• 분리된 JS 파일이고 각 파일은 특정한 기능을 가진 여러개의 함수와 변수들의 집합이다.
• 다른 프로그램에서 해당 모듈을 재사용 가능
• 그 자체로도 하나의 프로그램 이면서 다른 프로그램의 부품으로도 사용이 가능
• 보통 1개의 파일이 1개의 모듈

 

2) 사용 방법

• export 명령어를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근이 가능
• import, require 명령어를 사용하면 외부 모듈의 기능을 가져올 수 있다
• JS는 대표적으로 CommonJS, ES6(ES2015) 방식으로 모듈 시스템을 관리
• require는 현재 학습하고 있는 CommonJS로 모듈 시스템을 관리할 때 사용
• import는 ES6로 모듈 시스템을 관리할 때 사용.
• https://nodejs.org/api/packages.html#determining-module-system

Modules: Packages | Node.js v18.10.0 Documentation

 

3) 사용해보기

• modules 폴더를 생성하고 math.js , run.js 라는 파일을 생성
• 2가지 인자를 입력받았을 때 값을 더해주는 함수를 생성한다

// modules/math.js
function add(a, b) {
 return a + b;
}

• 작성한 함수를 다른 모듈로 내보내주기 위한 코드를 추가

// modules/math.js
module.exports = add;

• run.js에서 불러들인 add함수를 사용하도록 작성

// modules/run.js
const add = require("./math");
console.log(add(3, 4));
// Print: 7

// math.js
// function add(a, b) {
//   return a + b;
// }

/**
 * 모듈을 호출했을 때, add 키 값에는 add 변수 함수가 가지고 있는 값이 할당된다.
 */
// const add = (a, b) => {
//   return a + b;
// };

// exports.add = add;

/**
 * 모듈 그 자체를 바로 add 함수로 할당한다.
 */
// module.exports = add;

/**
 *
 * 모듈을 호출했을 때, add 키 값에는 {a,b}{return a + b} 익명함수가 할당되는 방법이다.
 */
// exports.add = (a, b) => {
//   return a + b;
// };

/**
 * 모듈을 호출할 때, add 키 값에는 add 함수가 들어가는 방법이다.
 */
// module.exports = { add: add };

// run.js
// const add = require("./math");
/**
 * exports.add 사용시 쓸 방법
 */
const {add} = require("./math");


/**
 * module.exports 사용법
 */
// console.log(add(3, 2));

/**
 * exports.add 사용법
 * 불러 들일때 객체 구조 분해 할당 방식으로 
 * 하면 간편하다. 
 */
console.log(add(10,20))

 

Request와 Response

1) Request ? Response ?

• Request란 클라이언트가 서버에게 전달하려는 정보나 메세지를 담는 객체
• Response란 서버에서 클라이언트로 응답 메시지를 전송시켜주는 객체

 

2) 서버 모듈

• Node.js의 서버 모듈에는 대표적으로 http 모듈과 Express 모듈이 존재
• Express 모듈은 http 모듈을 확장하여 제공
• Express 모듈은 기존 http 모듈의 메서드도 사용하지만
• 추가 제공하는 메서드나 속성들을 사용할 수 있다
• 최근에는 Express의 메서드가 더욱 편리하기에 기존 http 모듈 메서드는
• 잘 사용되지 않는다.
• (http 모듈 - https://leejabba.gitbooks.io/node-js/content/http-baa8-b4c8.html)

 

3) Express 모듈의 req, res 객체

req 객체

• req.app : req 객체를 통해 app 객체에 접근할 수 있습니다.
• req.ip: 요청한 Client의 ip 주소가 담겨 있습니다.
• req.body: Request를 호출할 때 body로 전달된 정보가 담긴 객체입니다.
  • body-parser Middleware를 이용하여야 해당 객체를 사용할 수 있습니다.
• req.params: 라우터 매개 변수에 대한 정보가 담긴 객체입니다.
• req.query: Request를 호출할 때 쿼리 스트링으로 전달된 정보가 담긴 객체입니다.
• req.cookies: Request를 호출할 때 Cookie 정보가 담긴 객체입니다.
  • cookie-parser Middleware를 이용하여야 해당 객체를 사용할 수 있습니다.
• req.get(Header): 헤더에 저장된 값을 가져오고 싶을 때 사용합니다.

res 객체

• res.app : res 객체를 통해 app 객체에 접근할 수 있습니다.
• res.status(코드) : Response에 HTTP 상태 코드를 지정합니다.
• res.send(데이터) : 데이터를 포함하여 Response를 전달합니다.
• res.json(JSON) : JSON 형식으로 Response를 전달합니다.
• res.end() : 데이터 없이 Response를 전달합니다.
• res.direct(주소) : 리다이렉트할 주소와 함께 Response를 전달합니다.
• res.cookie(Key, Value, Option) : 쿠키를 설정할 때 사용합니다.
• res.clearCookie(Key, Value, Option) : 쿠키를 제거할 때 사용합니다.

 

API와 REST API

1) API (Application Programming Interface) ?

• 애플리케이션끼리 연결해주는 매개체이자 약속

 

2) 어떤것을 API로 비유할 수 있을까?

• 키보드로 글자를 입력하면 키보드는 우리가 작성한글자를 컴퓨터에 전달하는데
• 우리가 키보드의 키를 누르는것이 API를 호출하는 것으로 볼 수 있다.

 

3) API를 작성한다는 의미 ?

• 웹 어플리케이션(프론트엔드)에서 원하는 기능을 수행하는 URL과 인터페이스를 제공한다는 의미
• 원하는 데이터를 받아 데이터베이스에 데이터를 저장하고 저장되어 있는 데이터를 읽어서 웹 어플리케이션 (프론트엔드)에 데이터를 제공하는 행위를 통해 사용자가 원하는 목적을 이룰수 있게 해야한다.

 

4) REST API ?

• REST API, RESTful API 등등 있다.
• Representational State Transfer의 줄임말로 위키에 따르면

월드 와이드웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다.

 

• 최대한 간단하게 설명하자면 URL, Headers, Method 등 네트워크 표현수단을 사람이 봐도 이해하기 쉬운 표현으로 정의한다고 이해하면 된다
• 또, 'REST 아키텍쳐'는 사람이 봐도 쉽게 이해할 수 있도록 "자원"을 정의하고 이 "자원"을 중심으로 표현을 구성하는 원칙을 제시한다.

• REST API는 "REST 아키텍쳐"라는 규칙을 따르는 API라고 생각하면된다

 

• 구성은 크게 세 가지로 이루어 지는데

https://velog.io/@meekukin/RESTful-API-4uk5rtheqv

1. 자원(Resource) - URL

• 만들 소프트웨어가 관리하는 모든 것을 자원으로 표현할 수 있는데 
• 쇼핑몰이라면 상품(Goods)에 대해서 정보를 관리할것이고
• 또는 장바구니(Carts)에 담긴 상품들도 관리 할것이다

 

2. 행위 - HTTP method

• GET, POST 등이 있는데 이것으로 해당 자원에 대한 행위를 표현할 수 있다
• 예를 들면 GET 메소드는 해당 자원의 조회,
• POST 메소드는 해당 자원의 생성하는 식

 

• 이렇게 나누어 진것을 CRUD 라고 하는데 자원의 대한
• 생성/조회/수정/삭제를 각각의 method로 나누어 놓은 것.

Create : 생성(POST)
Read : 조회(GET)
Update : 수정(PUT),(PATCH)
Delete : 삭제(DELETE)

• 일반적인 method 사용방식이며 필수적이지도, 모든 곳에서 이렇게 지켜서 사용하지는 않는다.
• 상황에 따라 완벽하게 지키기 어려운 부분도 있으니 참고

 

3. 표현

• 자원을 어떻게 표현할지는 보통 JSON, XML 같은 형식을 이용한다
• HTTP에서는 Content-Type 이라는 헤더를 통해 표현 방법을 서술한다.

 

REST API 예시

router.get('/books', (req, res) => {
	res.json({ success: true, data: getAllBooks() });
});

• 예시코드는 /books 라는 URL을 통해 전체 책 목록을 불러와 응답해주는 역할인 API
• REST API 관점에서 URL로 리소스를 구분할 수 있고 다른 표현이 없으므로 전체 리스트를
• 불러오는 것을 짐작 할 수 있다.
• 또, CRUD 중 Read를 담당하는 HTTP 메소드로 표현하여 REST한 API라고 보인다.

 

REST API 개발

1) 상품 목록 조회 API 구현하기

구현하려면 어떻게 해야 할까?

상품 목록 조회 API에서는 모든 상품이 한번에 다 나올수 있어야 한다.

예를들면 get메소드를 이용해서 /goods 라는 주소로 들어갔을때 

모든 상품목록이 reponse로 응답해서 json 포맷으로 상품 목록이 보야야 한다

데이터베이스를 사용하지 않기 때문에 routes 폴더에

goods.js 파일을 열어 json데이터를 저장하자

// /routes/good.js
const goods = [
  {
    goodsId: 4,
    name: "상품 4",
    thumbnailUrl:
      "https://cdn.pixabay.com/photo/2016/09/07/02/11/frogs-1650657_1280.jpg",
    category: "drink",
    price: 0.1,
  },
  {
    goodsId: 3,
    name: "상품 3",
    thumbnailUrl:
      "https://cdn.pixabay.com/photo/2016/09/07/02/12/frogs-1650658_1280.jpg",
    category: "drink",
    price: 2.2,
  },
  {
    goodsId: 2,
    name: "상품 2",
    thumbnailUrl:
      "https://cdn.pixabay.com/photo/2014/08/26/19/19/wine-428316_1280.jpg",
    category: "drink",
    price: 0.11,
  },
  {
    goodsId: 1,
    name: "상품 1",
    thumbnailUrl:
      "https://cdn.pixabay.com/photo/2016/09/07/19/54/wines-1652455_1280.jpg",
    category: "drink",
    price: 6.2,
  },
];

 

2) 상품 상세 조회 API 구현하기

구현방법 ?

특정 상품의 상세 조회를 위해 기존 상품 목록 주소 이후 URL Parameters로 상품 id로 

특정 상품 상세 조회를 해야한다

 

URL Prameters ?

router 주소에 쓰이는 특수한 패턴중 하나

상품 목록 조회 API 주소가 /goods 였다면 그뒤에 /:goodsId 라는 값을 추가해

요청시 id값을 받아올 수 있다

이 값은 aPI 내에서 req.params 객체 안에 들어있는것을 확인할 수 있다.

 

 

되짚어 보자 !

1. Express.js의 사용의도

 

2. 대표적인 REST API의 HTTP Method 5가지

 

3. 미들웨어 동작방식 이해, 그려보기 (Request, Response, Node.js server)

 

4. 프레임 워크와 라이브러리의 차이점

 

5. 웹 서버와 Express.js의 차이점

 

참고할만한 자료

https://ko.wikipedia.org/wiki/Express.js

Express.js - 위키백과, 우리 모두의 백과사전

https://expressjs.com/ko/api.html#req

Express 4.x - API 참조

https://expressjs.com/ko/api.html#res

Express 4.x - API 참조