내일배움캠프 Node.js 본캠프 21일차

김선우·2024년 9월 6일
Node.js_6기 5주차(2024.09.02~2024.09.06)내일배움캠프 TIL

내일배움캠프 Node_6기

목록 보기
22/96
post-thumbnail

Express.js

웹 프레임워크(Web Framework)

웹 서비스를 빠르게 구현할 수 있게 도와주는 도구
프로그래밍의 특정 부분을 추상화해서 개발자가 더 높은 수준에서 프로그램을 작성할 수 있게 도와주는 도구.

일반 웹 서버와 Node.js로 만들어진 웹 서버 비교

공통점 : 핵심적인 기능인 클라이언트 요청에 대한 응답을 제공하는 것.
차이점 : 성능, 확장성, 사용성 등의 면에서는 웹 서버들이 각각의 특징과 차이점이 있음.
=> 이를 파악해 현재 상황에 가장 적합한 도구를 선택해야 함.

Express.js

Node.js로 서버를 빠르고 간편하게 만들 수 있게 도와주는 가장 대표적인 웹 프레임워크.

미들웨어(Middleware)지원.

  • 미들웨어 : 사용자의 요청과 응답 사이에 위치, 특정 기능을 수행하는 함수.
    Node.js환경에서 가장 오래 사용되고 사랑받은 웹 프레임워크 => 개발자 커뮤니티 매우 활발함.
    웹 서버를 구현할 때 도움을 주는 도구.

Module

JS를 파일 단위로 분리된 코드 덩어리

  • 필요한 이유

    코드 베이스를 분리해 코드를 구조적으로 관리할 수 있음.
    코드를 재사용 가능하게 만들어줌 => 모듈화(modularize)
    코드의 함수와 변수 중 일부만 외부에서 사용하도록 노출시킬 수 있음.
    => 모듈 내부의 코드 세부사항을 외부로부터 은닉하는 정보은닉을 구현할 수 있음.
    해당 모듈이 참조하고 있는 다른 모듈에 대한 종속정(Dependency)를 관리하는 역할.

CJS(CommonJS)

Node.js에서 기본으로 사용하게 되는 모듈 시스템.
require 함수를 사용해 다른 모듈을 불러올 수 있음. => 경로 혹은 문자열을 가지고 내부 알고리즘을 통해 모듈을 가져오고 종속성을 처리.

ESM(ECMA script Module)

최신 JS에서 지원하는 모듈 시스템.
모든 JS환경에서 통합적인 인터페이스를 제공하기 위해 시작된 체계.
CJS와는 다르게 정적으로 모듈을 가져오고 비동기적 모듈 로딩과 순환 종속을 처리.

사용법

  • export 명령어를 변수나 함수 앞에 붙여서 외부 모듈에서 해당 변수나 함수에 접근할 수 있음.
    => 하나의 큰 프로그램들을 작게 나눠 다른 파일에서도 재사용 가능.

  • import, require 명령어를 사용해 외부 모듈의 기능을 가져올 수 있음.

    • import는 ES6로 모듈 시스템을 관리할 때 사용.
      정적 로딩을 지원.
      코드의 최상위에 위치해야함.
    • require는 CJS로 모듈을 관리할 때 사용.
      동적 로딩을 지원.
      코드의 어디에서든 사용 가능.

  • import { add } from "./math.js";

    ./ 로 시작하는 경로는 '상대 경로'라는 것을 나타냄.
    상대 경로 : 현재 파일의 위치에 따라 다르게 해석되는 파일 또는 디렉토리의 위치를 나타내는 방식.
    ../는 상위 디렉토리를 나타냄.

정리

모듈 = JS코드를 논리적인 단위로 나누는 방법.
모듈을 도입하면 코드의 재사용성을 높이고 코드를 분리해 관리할 수 있음. => 유지 보수 수월.
모듈은 코드의 네임스페이스를 분리해 같은 이름의 함수나 변수가 충돌하는 것을 방지.
코드를 모듈로 나누는 것 = 큰 프로젝트에서 코드의 복잡성을 관리하는데 중요한 요소.

API와 REST API

API

API(Application Programming Interface)는 서로 다른 소프트웨어나 어플리케이션간 연결해주는 매개체이자 약속.
=> 정해진 규칙에 따라 서버에 정보를 요청하는 역할을 담당.
서로 다른 시스템간의 통신을 하게해주는 중개자의 역할.

  • API를 작성한다.

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

REST API

REST(Representational State Transfrer)는 URL, Headers, Method 등 네트워크 표현 수단을 사람이 봐도 이해하기 쉬운 표현으로 정의 하는 것.
=>REST API는 HTTP를 통해 웹 서비스의 자원에 접근하는 방식을 REST아키텍쳐의 규칙에 따라 구현된 API

구성 요소

  1. 자원 - URL

    소프트웨어가 관리하는 모든 것을 자원으로 표현 가능.
    특정 사이트에서 어떤 자원을 요청할 것인지에 대한 내용이 URL

  2. 행위 - HTTP method

    GET, POST등으로 해당 자원에 대한 행위를 표현 가능.

  • CRUD - 생성 조회 수정 삭제를 각각의 method에 나누어 놓은 것.

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

  1. 표현

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

Routing 과 Router

Routing

클라이언트의 요청 조건에 대응해 응답하는 방식

Router

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

구조

router.METHOD(PATH, HANDLER);

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

API Client

개발단계에서 우리가 작성한 API의 요청을 확인하거나 테스팅할때 도움을 주는 툴.

  • 대표적으로 Postman, Insomnia 가 있음.
    => API요청을 손쉽게 구성할 수 있고, 응답을 직관적으로 확인하게 도와줌.

필요한 상황

서버의 데이터를 조회하기 위해선 생성, 수정, 삭제등의 작업이 필요. -> 해당작업들을 수행하기 위해선 Http Method를 사용하는 API를 개발하고 테스트해야함.
편리하게 서버에 보낼 데이터와 주소를 한번에 관리할 수 있는 API Client를 사용.

Request와 Response

Request

클라이언트가 서버에게 전달하려는 정보나 메세지를 담는 객체

세부사항

URL, Http method, 헤더(header), 쿼리 파라미터(query parameter), 바디 데이터 (body data)등

Response

서버에서 클라이언트로 응답 메세지를 전송시켜주는 객체.

세부사항

상태 코드(status code), 응답 데이터(response data), 응답 해더(response header)

Express.js의 req, res 객체

req 객체

클라이언트들이 전달한 데이터를 바탕으로 사용.

  • req.app : req 객체를 통해 Express.js의 app 객체에 접근할 수 있습니다.
  • req.ip: 요청한 Client의 ip 주소가 담겨 있습니다.
  • req.body: Request를 호출할 때 body로 전달된 정보가 담긴 객체입니다.
    - express.json() Middleware를 이용하여야 해당 객체를 사용할 수 있습니다.
    =>회원가입 API에는 사용자의 ID, PW, 닉네임등 데이터가 포함되는데 이 데이터들이 body에 담기기 때문에 많이 사용.(사용자의 정보를 조회할때는 사용할 수 없지만, 사용자를 생성, 수정, 삭제를 할 때는 body에 전달된 데이터를 바탕으로 사용할 것이기 때문에)
  • req.params: 라우터 매개 변수(Path Params)에 대한 정보가 담긴 객체입니다.
    - 특정 데이터를 조회한다고 했었을 때 해당 데이터의 정보에 대해 간단하게 요약해서 사용할 때 사용.
    =>조회를 할때 많이 사용, 댓글을 단다면 해당 댓글을 특정 게시글 안에 담아야 하므로 이때도 경로 변수를 사용하기때문에 많이 사용.
  • req.query: Request를 호출할 때 쿼리 스트링으로 전달된 정보가 담긴 객체입니다.
    - 클라이언트가 서버에게 전달할 때 물음표 방식으로 전달하는 쿼리 스트링을 통해 사용하는 방식.
    => 어떤 데이터를 조회할 때 오름차순, 내림차순으로 정렬한다거나 특정 페이지부터 조회 할 때 많이 쓰이는 방식.
  • req.cookies: Request를 호출할 때 Cookie 정보가 담긴 객체입니다.
    • cookie-parser Middleware를 이용하여야 해당 객체를 사용할 수 있습니다.
  • req.get(Header): 헤더에 저장된 값을 가져오고 싶을 때 사용합니다.

res 객체

서버가 클라이언트에게 데이터를 전달하기 위해서 사용.

  • res.app : res 객체를 통해 Express.js의 app 객체에 접근할 수 있습니다.
  • res.status(코드) : Response에 HTTP 상태 코드를 지정합니다.
    - status는 정말 많고 특정상황에 맞는 상태 코드를 어떻게 전달할지에 대한 상황을 서버가 어떤 방식으로 이 결과를 처리했는지를 상태 코드로 표현해 클라이언트에게 전달하기 위해 사용.
  • res.send(데이터) : 데이터를 포함하여 Response를 전달합니다.
    • ex) res.send('Hello, World');
  • res.json(JSON) : JSON 형식으로 Response를 전달합니다.
    • ex) res.json({ message: 'Hello, World' });
  • res.end() : 데이터 없이 Response를 전달합니다.
  • res.redirect(주소) : 리다이렉트할 주소와 함께 Response를 전달합니다.
    • ex) res.redirect('https://naver.com');
  • res.cookie(Key, Value, Option) : 쿠키를 설정할 때 사용합니다.
  • res.clearCookie(Key, Value, Option) : 쿠키를 제거할 때 사용합니다.

Express.js의 Response

서버가 클라이언트에게 보내는 메세지를 응답(Response)라고 부름.
status는 서버가 클라이언트에게 응답을 보낼 때 Http 상태 코드를 전송하는 것.
send, json은 서버가 클라이언트에게 응답데이터를 전송하는 방법을 나열한 것.

res.status(상태코드)

app.post('/', (req, res) => {
  return res.status(201).json({key: 'Value'});
});
  • 서버가 클라이언트에게 응답(Response)을 보냈을 때, 상태 코드를 전달할 때 사용됩니다.
  • Http 상태 코드는 HTTP 요청이 어떠한 상태로 처리 되었고, 완료되었는지를 나타냅니다.
    - ex) 200은 요청이 성공적, 404는 요청한 리소스가 서버에 존재하지 않음
  • Express에서 상태 코드를 명시하지 않으면, 상태 코드는 200으로 자동 전달됩니다.

res.json(데이터), res.send(데이터)

  • 서버가 클라이언트에게 응답(Response)을 보냈을 때, 데이터를 전달할 때 사용됩니다.
  • res.json() 메서드는 JSON 형식의 데이터만 보낼 수 있습니다. Response Header의 Content-Type이 ‘application/json’으로 설정됩니다.
  • res.send() 메서드는 다양한 유형의 데이터를 보낼 수 있습니다.Response Header의 Content-Type을 데이터 유형에 따라 다르게 설정할 수 있습니다.
    → Content-Type은 서버가 클라이언트에게 전달하는 데이터의 타입을 지정할 때 사용됩니다.
  • response가 서버의 비즈니스 로직을 수행하면 조건처리가 잘못 되어 한번이 아니라 두번 처리되는 문제가 발생할 수 있음.
    -> 클라이언트와 연결이 최종적으로 끝났는데 한번더 response를 보내게 되면 정상적으로 클라이언트에게 전달되지 않고 유실되는 문제가 발생하면서 에러가 발생하게 됨(서버 종료).
    => 분기처리 확실하게 할 것.

Express.js에서 Request

클라이언트에서 서버로 보내는 메시지를 요청(Request)라고 부름.
body, params, query는 클라이언트가 서버에 요청을 보낼 때 어떤 방식으로 전송하는지에 대한 여러가지 방법들을 나열한 것.

req.body:(body)

app.post('/', (req, res) => {
  // Request에서 body 데이터를 ReqBody 변수에 할당한다.
  const ReqBody = req.body;

  return res.status(201).json({});
});
  • 클라이언트가 요청(Request)을 보냈을 때, Body에 데이터를 삽입하였을 때 사용됩니다.
  • req.body를 사용하기 위해서는 express.json() 미들웨어를 사용해야 합니다.
  • Key-Value의 데이터 형식을 가지고 있으며, 대표적으로 JSON 형태를 띄고 있습니다.
  • Body는 Query String, Path Variable(params)과 다르게, URL만을 가지고 어떤 데이터를 전달하였는지 확인할 수 없는 특징을 가지고 있습니다.
  • 데이터를 생성하거나 수정이 필요한 데이터의 전달을 위해 사용됩니다.
    ex) 사용자의 ID, 사용자의 Password, 게시글 제목 등
  • POST, PUT과 같은 Http method에서 사용됩니다.

req.query:(Query String)

app.get('/', (req, res) => {
  // Request에서 Query String 데이터를 ReqQuery 변수에 할당한다.
  const ReqQuery = req.query;

  return res.status(200).json({});
});
  • 클라이언트가 요청(Request)을 보냈을 때, URL에 원하는 Key-Value를 삽입하여 데이터를 전달합니다.
  • URL의 마지막에 ?기호를 이용해 Query String을 사용할 수 있습니다.
    ex) https://sparta.com**?name=이용우&age=29**
  • 특정 콘텐츠의 위치를 표시하거나 웹 페이지에 특정한 옵션을 설정할 때 사용합니다.
    ex) 게시글의 정렬, 특정 날짜의 게시글만 출력하는 옵션 설정 등
  • 주로 서버의 리소스를 필터링하거나 정렬하는 데 사용됩니다.
    ex) `https://sparta.com/posts?sort=desc&page=3&limit=20`
- `limit=20`: 1 페이지당 **20개의 게시글**을 조회한다.
- `page=3`: **3 페이지**를 조회한다.
- `sort=desc`: 게시글을 **내림차순**으로 정렬한다.
  • GET과 같은 Http method에서 사용됩니다.

req.params: (Path Variable)

app.get('/:name', (req, res) => {
  // Request에서 Path Params 데이터의 name Key를 가진 Value를 name 변수에 할당한다.
  const { name } = req.params;

  return res.status(200).json({});
});
  • 클라이언트가 요청(Request)을 보냈을 때, URL에 원하는 데이터를 삽입하여 전달합니다.
  • URL 특정 경로를 매개 변수로써 사용합니다.
  • 특정 게시글을 선택하거나 명확한 리소스를 지정해야할 때 사용합니다.
    ex) 게시글의 상세 정보 조회, 사용자의 상세 정보 조회
profile
김선우
이전 포스트

내일배움캠프 Node.js 본캠프 20일차

다음 포스트

내일배움캠프 Node.js 본캠프 22일차

0개의 댓글