스파르타 Node.js 입문 4 (Express.js)

01. 준비하기

1. Express.js의 이해

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

• 다양한 웹 프레임워크가 존재하지만 오늘날 가장 많은 Node.js 웹서버가 Express.js 프레임워크를 통해 개발되었다.

• 최근 각광받고 있는 Node.js의 웹 프레임워크로 Nest.js도 존재.

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

2. Express.js로 웹 서버 구현

사전작업 해주자

기본적인 웹 서버 코드 작성해주고 실행~

3. API Client 학습

1. API Client란 뭘까?

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

• Postman, Insomnia 등 여러 API Client가 있지만 이번에는 Thunder Client를 사용해보자.

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

2. Thunder Client로 웹 서버 응답 확인

설치는 사이드 바 네모 4개있는거 누르고 Thunder Client 검색해서 설치하면 된다.

일단 서버를 연결해주고

API의 HTTP Method인 GET으로 연결해 준 뒤 주소입력 후 Send 누르자

Hello World 찍히면 성공!

(이건 그냥 알아두라고 올림)

02. 시작하기

1. Routing 이해 및 Router 학습

1. Routing이란?

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

2. Router란?

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

일반적인 Router의 구조는 아래와 같다

router.METHOD(PATH, HANDLER);

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

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

여기서 잠깐!! 미들웨어(Middleware)란?

웹 서버에서 요청을 받을 때 가끔 모든 요청에 대해 공통적인 처리를 하고 싶은 경우에
미들웨어를 이용하여 웹 서버의 요청/응답에 대해 공통적으로 관리 가능
다음에 더 자세히 알아보자!

2. Module의 이해

1. Module이란?

모듈(Module)은 Javascript 파일 단위로 분리된 코드
여기서 Javascript 파일은 특정한 기능을 가진 여러 개의 함수와 변수들의 집합

1. 모듈(Module)은 하나의 모듈에서 다른 모듈을 호출하여 사용.

2. 모듈(Module)은 그 자체로도 하나의 프로그램이면서 다른 프로그램의 부품으로도 사용 가능.

3. 보통 1개의 파일이 1개의 모듈이 된다.

음... 그렇군.. 그럼 모듈은 왜 필요한걸까?

그 이유는
1. 코드베이스를 분리가능하고 구조적으로 관리가능하다.
2. 코드를 재사용가능하게 만들어준다. 모듈화(modularize)라고도 한다.
3. 모듈의 인터페이스만 노출시킬 수 있다. 그 외의 다른 모든정보를 은닉가능
4. 종속성을 관리

모듈은 두가지가 있다.

• CommonJS(CJS)

  브라우저 이외의 환경에서 모듈을 사용할 수 있도록 고안된 명세.
  Node.js에서는 CommonJS를 기본으로 사용.
  CommonJS는 전역 스코프에 정의 되어있는 require 함수로 대표된다. `

• ECMA Script Module(ESM)

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

  

2. Module 사용해보기

math.js에서 작성한 함수를 run.js으로 보내줘서 사용

그 외 다양한 방법을 올려보겠다.

종합본?

3. Request와 Response

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

• Express 모듈의 req, res 객체

  • req.body: Request를 호출할 때 body로 전달된 정보가 담긴 객체
    express.json() Middleware를 이용하여야 해당 객체를 사용할 수 있다.
  • req.params: 라우터 매개 변수에 대한 정보가 담긴 객체
  • req.query: Request를 호출할 때 쿼리 스트링으로 전달된 정보가 담긴 객체

  ---

  • res.status(코드) : Response에 HTTP 상태 코드를 지정.
  • res.send(데이터) : 데이터를 포함하여 Response를 전달.
  • res.json(JSON) : JSON 형식으로 Response를 전달.

이 외에 많은 객체가 있으나 일단은 이것만 잘 알아두자.

추가설명

req.query (Query String)

• 클라이언트가 요청(Request)을 보냈을 때, URL에 원하는 Key-Value를 삽입하여 데이터를 전달.
• URL의 마지막에 ?기호를 이용해 Query String을 사용할 수 있다.
• 특정 콘텐츠의 위치를 표시하거나 웹 페이지에 특정한 옵션을 설정할 때 사용.
  ex) 게시글의 정렬, 특정 날짜의 게시글만 출력하는 옵션 설정 등
• GET과 같은 Http Method에서 사용.
  

req.params (Path Variable)

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

++++ 추가

req.body (Body)

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