Express.js

Express.js는 Node.js로 서버를 빠르고 간편하게 만들 수 있게 도와주는 웹 프레임워크 입니다.

• Express.js 이외에 다양한 웹 프레임워크가 존재하지만 오늘날 가장 많은 Node.js 웹서버가 Express.js 프레임워크를 통해 개발되었습니다.
• 최근 각광받고 있는 Node.js의 웹 프레임워크로 Nest.js도 있습니다.

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

• 그저 어떤 도구를 사용해서 만들었나의 차이일 뿐, 동일한 기능을 수행하는 웹 서버를 만들수 있으며, 이것은 다른 언어나 도구를 이용해 만든 웹 서버도 마찬가지 입니다.

• 기능이 다른 웹 서버는 존재할 수 있지만 기반이 되는 개념 자체가 다른 웹 서버는 존재하지 않습니다!

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

  • 다시 한번 복습! Express.js와 웹서버는 동일하지 않습니다!
  • Express.js는 웹서버 자체가 아닌 Node.js를 위한 웹 프레임워크로 웹 서버를 구현하기 위해 사용 되는 것이 Express.js 프레임워크 입니다.

Express.js로 웹 서버 구현

명령어

npm init -y

-y는 npm init 명령 실행시 원래는 프로젝트명이나 버전등을 물어보는데 그런 것들을 물어보지 않고 기본값으로 알아서 설정해주는 옵션

npm install express

express.js 프레임워크 설치

=> 웹서버를 작성할 준비가 완료

API Client

API Client란 개발단계에서 우리가 작성한 API의 요청을 확인하거나 테스팅 할 때 도움을 주는 툴입니다. API Client를 사용함으로 개발 속도를 높이거나 치명적인 에러를 예방하는데 도움을 받을 수 있습니다.

• Postman, Insomnia 등 여러 API Client가 있지만 이번에는 Thunder Client를 사용할 예정.

  • Thunder Client는 VS Code 안에서 사용할 수 있으면서, 기능이 부족하지 않기 때문에 비교적 쉽게 사용 할 수 있음!

• 지금까지 우리는 HTTP Method 중 GET Method에 대응하는 API만 만들고 브라우저로 확인했습니다!

• 아직까진 API Client가 필요 없어보였지만 POST, PATCH, PUT, DELETE, HEAD 등의 다양한 Method에 대한 API를 개발하고 테스트하기 위해서는 반드시 필요한 도구이다.

Thunder Client

순서

0. 터미널 node app.js입력해서 서버를 켜줍니다.

1. 먼저 Thunder Client 아이콘을 클릭하시고 아래와 같이 창이 나오면 New Request 버튼을 눌러줍니다.

2. 맨위의 URI를 입력하는곳에 웹 서버 API의 HTTP Method인 GET으로 설정해 준뒤 http://localhost:3000/ 를 입력하고 Send 버튼을 눌러줍니다.

3. 브라우저에서 보았던 “Hello World!”가 나오게 되면 성공입니다!

4. Query탬에서 key와 value를 넣어주면 url이 'localhost:3000/?key=value'로 변함.

5. body정보의 json content에 추가적인 사용자에게 정보를 줄 수 있음.

{
"user":"Hello user"
}

Thunder Client 활용하기

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

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

Routing & Router

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

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

• 일반적으로 Router는 아래와 같은 구조를 가집니다.

router.**METHOD**(**PATH**, **HANDLER**);

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

 미들웨어(Middleware)

웹 서버에서 요청을 받을때 가끔 모든 요청에 대해 공통적인 처리를 하고싶은 경우가 생길 수 있습니다. 그럴때 미들웨어를 이용하여 웹 서버의 요청/응답에 대해 공통적으로 관리가 가능합니다.

app.use("/api", goodsRouter);

=> 전역미들웨어로 router등록

app.use("/api", [goodsRouter, userRouter]);

=> 여러 개의 router를 가져올떄는 배열로 가져온다.

Module

💡 모듈(Module)은 Javascript 파일 단위로 분리된 코드

여기서 Javascript 파일은 특정한 기능을 가진 여러 개의 함수와 변수들의 집합.

1. 모듈(Module)은 하나의 모듈에서 다른 모듈을 호출하여 사용할 수 있습니다.
2. 모듈(Module)은 그 자체로도 하나의 프로그램이면서 다른 프로그램의 부품으로도 사용할 수 있습니다.
3. 보통 1개의 파일이 1개의 모듈이 됩니다.

모듈의 필요성

1. 코드 베이스를 분리할 수 있으며, 이를 통해 코드를 구조적으로 관리할 수 있습니다.
2. 코드를 재사용 가능하게 만들어줍니다. 즉, 모듈화(modularize) 됩니다.
3. 모듈의 인터페이스(Interface)만 노출 시킬 수 있습니다.
   즉, 인터페이스 이외에는 모든 정보를 은닉하는 정보은닉(information hiding)을 구현 할 수 있게 됩니다.
4. 종속성을 관리할 수 있게 됩니다.

모듈의 사용법

• export 명령어를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다.
• import, require 명령어를 사용하면 외부 모듈의 기능을 가져올 수 있습니다.
  - 자바스크립트는 대표적으로 CommonJS, ES6(ES2015) 방식으로 모듈 시스템을 관리할 수 있습니다.
  - require는 현재 학습하고 있는 CommonJS로 모듈 시스템을 관리할 때 사용합니다.
  - import는 ES6(ES2015)로 모듈 시스템을 관리할 때 사용합니다.

"type": "commonjs" //안써도 디폴트
  // "type":"module" es6로 모듈관리

사용해보기

• math.js

// 기본형
// function add(a, b) {
//     return a + b;
// }
// module.exports = add; // 모듈 그 자체를 바로 add함수 할당.

// add가 객체로 됨. 따라서 run.js도 고쳐줘야함 { add : [function ()]}
// exports.add = function add(a, b) {
//   return a + b;  // 모듈을 호출했을때, add키값에는 (a,b){return a+b;} 익명함수가 할당됨.
// };

// 내보낼떄 객체형식으로 내보낼수도 있다.
// function add(a, b) {
//     return a + b;
// }
// module.exports = {add: add}; // 모듈을 호출했을때, add키값에는 add함수가 할당됨.

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

• run.js

// 기본형
// const add = require("./math.js");
// console.log(add(10, 30));

// 객체형식으로 내보내진것을 받을떄
// const add = require("./math.js");
// console.log(add.add(10, 30));

// 간단히(객체형식으로 내보내진것을 받을떄)
const {add} = require("./math.js");
console.log(add(10, 30));

터미널 명령어

• cd 폴더명 => 폴더로 이동
• ls => 폴더안의 파일들 보여줌
• node 파일명 => 실행
• node app => 서버열기

request & response

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

서버 모듈

• Node.js의 서버 모듈에는 대표적으로 http 모듈과 Express 모듈이 존재합니다.
• Express 모듈은 http 모듈을 확장하여 제공합니다.
• Express 모듈은 기존 http 모듈의 메서드도 사용할 수 있지만, Express가 추가 제공하는 메서드나 속성들을 사용할 수 있습니다.
• 최근에는 Express의 메서드가 더욱 편리하기에 기존 http 모듈의 메서드는 잘 사용되고 있지 않습니다.

Express 모듈의 req, res 객체

일단 적혀있는거 다 들고 왔지만 bold체 중심으로 확인하기

req 객체

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

res 객체

• res.app : res 객체를 통해 app 객체에 접근할 수 있습니다.
• res.status(코드) : Response에 HTTP 상태 코드(정상적으로 작동하면 200출력/에러면 400출력)를 지정합니다. → 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) : 쿠키를 제거할 때 사용합니다.
  

//전역미들웨어(app.use) - express.json()를 써야 request 객체 안에있는 req.body를 사용할 수 있음.(모든 코드에서 body-parser등록해서)
app.use(express.json());

//req.body
app.post("/", (req, res) => {
  console.log(req.body);

  res.send("기본 URI에 POST 메서드가 정상적으로 반환되었습니다.");
});

//API확인 -req.query
app.get("/", (req, res) => {
  console.log(req.query);

  //   res.send("정상적으로 반환되었습니다.");

  const obj = {
    "keykey": "value입니다.",
    "이름입니다." : "이름일까요?"
  }
  res.json(obj); // 바로 객체넣어줘도 무관
  // res.status(400).json(obj); // 400에러가 난 것처럼 코드가 전달됨
});

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

  res.send(":id URI정상적으로 반환되었습니다.");
});

API

API(Application Programming Interface)란?

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

API를 작성한다는 의미?

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

REST API

URL, Headers, Method 등 네트워크 표현 수단을 사람이 봐도 이해하기 쉬운 표현으로 정의한다

REST API의 구성

1. 자원(Resource) - URL

2. 행위 - HTTP method

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

3. 표현
   : 보통 JSON, XML 같은 형식을 이용해서 자원을 표현

REST API 예시

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