01 웹과 Express.js
웹의 이해
웹이란?
웹 서비스 동작 방식
웹 서비스 동작 방식
- 웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어짐
- HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할
- HTTP 응답은 HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할
HTTP 요청 예시
HTTP 응답 예시
정적 웹과 동적 웹
정적 웹
- Web 1.0
- 상호작용 하지 않는 페이지 - 단방향 통신
- Link를 통한 페이지 이동 정도만 가능
- 일반적으로 변하지 않는 html 파일로 제공
동적 웹
- Web 2.0
- 구글 맵, 웹 채팅 등 사용자가 다양한 기능을 수행할 수 있음
- 프론트엔드와 백엔드가 유기적으로 통신하며 동작
- 현대적인 웹은 대부분 동적 웹
동적 웹의 두 가지 구현방법
CSR
CSR의 특징
- 사이트가 변하는 부분들을 프론트엔드에서 처리
- 프론트엔드 코드에 페이지 리소스들이 미리 정의되어 있음
- 서버와의 통신은 API 통신을 이용
- 빠른 반응이지만 페이지의 내용은 API 호출이 완료된 후에 보여짐
- 복잡한 프로젝트 구성, 큰 개발 사이즈
SSR
SSR의 특징
- 사이트가 변하는 부분들을 백엔드 처리
- 백엔드에서 HTML 파일을 작성해서 프론트엔드로 전달
- CSR에 비해 쉬운 구성, 작은 개발사이즈
- 로딩이 완료되면 페이지와 데이터가 한 번에 표시됨
- 상대적으로 사용자가 보기엔 로딩이 느려 보임
- 페이지 이동할 때마다 다시 로딩하기 때문에 페이지 깜빡임
웹 서비스 동작 방식 정리
웹 프레임워크
웹 프레임워크란?
웹 프레임워크를 사용하는 이유
- 웹 서비스를 구성하기 위해서는 매우 많은 기능이 필요함
- 이러한 기능들을 하나씩 직접 만드는 것에는 너무나 큰 비용이 발생
- 웹 서비스는 많은 부분이 정형화되어 있음
- 프레임워크를 사용하여 정형화된 부분을 간단하게 구현, 필요한 부분만 집중해서 개발할 수 있음
웹 프레임워크의 기본 구성요소
- 웹 서비스의 정형화 된 구성을 많은 웹 프레임워크가 기본적으로 제공함
- HTTP 요청 처리
- HTTP 응답 처리
- 라우팅
- HTML Templating
웹 프레임워크 - HTTP 요청 처리
- 웹 프레임워크는 HTTP 요청을 처리할 수 있음
- 어떤 데이터를 필요로 하는지, 어떤 사용자로부터 요청이 수신되었는지 등
웹 프레임워크 - HTTP 응답 처리
- 웹 프레임워크는 HTTP 응답을 처리할 수 있음
- 응답 데이터가 어떤 형식인지, 응답 상태가 정상적인지 등
웹 프레임워크 - 라우팅
- 웹 프레임워크는 HTTP 요청을 분기하는 방법을 제공
- HTTP 요청 URL에 해당하는 알맞은 응답의 경로를 미리 설정
웹 프레임워크 - HTML Templating
- 웹 프레임워크는 SSR을 구현하기 위한 방법을 제공함
- SSR에서 응답으로 보낼 HTML을 서버에서 작성하기 위해,
HTML Template를 통해 미리 페이지의 뼈대를 작성 가능
Node.js의 웹 프레임워크
- Express.js : Node.js의 가장 유명한 웹 프레임워크
- Koa.js : 현대적인 JavaScript를 적극적으로 사용하는 웹 프레임워크
- Nest.js : TypeScript를 사용하며, 고정된 구조를 제공하는 웹 프레임워크
- 기타 : Hapi, Sails.js 등
웹 프레임워크 정리
Express.js 시작하기
Express.js를 사용하는 이유
npm init으로 시작하기
express-generator 사용하기
npx + express-generator 사용하기
Express.js의 구조
기본구조 알아보기
Express.js 동작 방식
Express.js 동작 시켜 보기
- express-generator로 만들어진 프로젝트 디렉터리에 접근하여,
npm start로 Express.js 프로젝트를 실행할 수 있음 - localhost:3000에 접속하여 Welcome to Express 페이지를 확인할 수 있음
Express.js 동작 따라가기
app.js
- Express는 app 객체로부터 시작해 모든 요청을 처리
app 객체 - 주요기능
라우팅
- Express.js의 라우팅 방식은 크게 app 라우팅과 Express.Router를 통한 라우팅으로 나누어짐
app 라우팅
Express.Router
- app 라우팅을 통해서는 라우팅의 핵심인 그룹화를 지원하지 않음
- Express.Router를 통해 라우팅을 모듈화 할 수 있음
Express.Router 모듈
Express.Router 사용
라우팅 - path parameter 사용
Request Handler
- 라우팅에 적용되는 함수를 Request Handler라고 부름
- HTTP 요청과 응담을 다룰 수 있는 함수로 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행됨
Request Handler - Request 객체
- HTTP 요청 정보를 가진 객체
- HTTP 요청의 path parameter, query parameter, body, header 등을 확인 가능
Request Handler - Request 객체의 주요 값 및 함수
Request Handler - Resonpse 객체
- HTTP 응답을 처리하는 객체
- HTTP 응답의 데이터를 전송하거나, 응답 상태 및 헤더를 설정할 수 있음
Request Handler - Resonpse 객체의 주요 값 및 함수
02 Express.js와 REST API
Express.js의 Middleware
Middleware란?
- 미들웨어는 Express.js 동작의 핵심
- HTTP 요청과 응답 사이에서 단계별 동작을 수행해주는 함수
Middleware 동작 원리
- Express.js의 미들웨어는 HTTP 요청이 들어온 순간부터 시작됨
- 미들웨어는 HTTP 요청과 응답 객체를 처리하거나, 다음 미들웨어를 실행할 수 있음
- HTTP 응답이 마무리될 때 까지 미들웨어 동작 사이클이 실행됨
- 미들웨어는 한 번에 실행되는 것이 아니라 순차적으로 동작이 이루어짐
Middleware의 작성과 사용
middleware 작성법
- req, res, next를 가진 함수를 작성하면 해당 함수는 미들웨어로 동작할 수 있음
- req는 HTTP 요청을 처리하는 객체
- res는 HTTP 응답을 처리하는 객체
- next는 다음 미들웨어를 실행하는 함수
RouteHandler와 middleware
- Route Handler도 미들웨어의 한 종류
- Route Handler는 라우팅 함수(get, post, put, delete 등)에 적용된 미들웨어
- 일반적인 미들웨어와는 다르게 path parameter를 사용할 수 있음
middleware 작성법
midleware 사용법
- middleware는 적용되는 위치에 따라서 어플리케이션 미들웨어, 라우터 미들웨어, 오류처리 미들웨어로 분류 가능
- 필요한 동작 방식에 따라 미들웨어를 적용할 위치를 결정
middleware 사용법 - 어플리케이션 미들웨어
middleware 사용법 - 라우터 미들웨어
middleware 사용법 - 미들웨어 서브스택
오류처리 미들웨어
- 오류처리 미들웨어는 일반적으로 가장 마지막에 위치하는 미들웨어
- 다른 미들웨어들과는 달리 err, req, res next 네가지 인자를 가지며,
앞선 미들웨어에서 next 함수에 인자가 전달되면 실행됨
- 첫 번째 순서의 미들웨어에서 next에 err를 인자로 넘겼으므로 바로 오류처리 미들웨어가 실행
함수형 middleware
- 하나의 미들웨어를 작성하고, 작동 모드를 선택하면서 사용하고 싶을 경우 미들웨어를 함수형으로 작성하여 사용할 수 있음
Ex) API별로 사용자의 권한을 다르게 제한하고 싶은 경우
Middleware Libraries
Middleware 요약
- 미들웨어는 HTTP 요청과 응답 사이에서 동작하는 함수
- req, res, next를 인자로 갖는 함수는 미들웨어로 동작할 수 있음
- app 혹운 router 객체에 연결해서 사용 가능
- next에 인자를 넘기는 경우 오류처리 미들웨어가 실행됨
- 미들웨어에 값을 설정하고 싶은 경우는 함수형 미들웨어로 작성 가능
REST API
REST API란?
- REST + API
- REST 아키텍쳐를 준수하는 웹 API**
RESTful API라고 부르기도 함
API란?
REST란?
REST API 기본 가이드 - HTTP Method의 사용
REST API 기본 가이드 - URL 표현법
REST API 기본 가이드 - 계층적 자원
REST API 정리
- REST API는 REST 아키텍쳐를 준수하는 웹 API를 의미하며,
URL을 통한 자원의 표현 방법과, HTTP method를 통한 API 동작의 정의정도만
사용해도 훌륭한 REST API를 구현할 수 있음
JSON
JSON이란?
- JavaScript Object Notation
- 자바스크립트에서 객체를 표현하는 표현식으로 시작
- 데이터를 표현하는 방법이 단순하고 이해하기 쉬워서
웹 API에서 데이터를 전송할 때 표현식으로 주로 사용됨
JSON을 사용하는 이유
- 웹 API는 기본적으로 데이터를 문자열로 전송하게 됨
- 어떤 객체를 웹 API를 통해서 문자열로 전달하기 위해 JSON을 사용
JSON vs XML
JSON 가이드 - Object
- JSON에서 Object는 {"key":value}로 표현
value에는 어떤 값이라도 사용될 수 있음(문자열, 숫자, JSON객체 등) - Ex) {name:'elice', age:5, nationality:'korea'}
JSON 가이드 - Array
- JSON에서 Array는 [item1, item2]로 표현
item에는 어떤 값이라도 사용될 수 있음(문자열, 숫자, JSON 객체 등) - Ex) ['first', 10, {name:'bob'}]
Express.js로 REST API 구현하기
목표
- DB없이 Node.js 모듈 활용
- 간단한 메모의 작성, 수정, 삭제, 확인기능 API 구현
- express-generator를 사용하지 않고 MVC 패턴 구현
MVC 패턴
MVC 패턴 - Model
- Model은 데이터에 접근하는 기능 또는 데이터 그 자체를 의미
- 데이터의 읽기, 쓰기는 Model을 통해서만 이루어지도록 구성해야 함
MVC 패턴 - View
- View는 데이터를 표현하는 기능을 의미
- 주로 Controller에 의해 데이터를 전달받고
전달받은 데이터를 화면에 표시해주는 기능을 담당
MVC 패턴 - Controller
- Controller는 Model을 통해 데이터에 접근하여,
처리 결과를 View로 전달하는 기능을 의미 - 웹 서비스에선 주로 라우팅 함수가 해당 기능을 수행함
프로젝트 구현 사항
메모 목록 구현하기
- list함수를 통해 메모 목록 안에서 id와 title만 목록으로 만들어 보냄
메모 상세 구현하기
메모 작성 구현하기
메모 수정 구현하기
메모 삭제 구현하기
JSON 데이터 처리 미들웨어 사용하기
- 위에서 작성된 API들은 바로 작동되지 않음
- express.js가 HTTP body에 전달되는 JSON 데이터를 처리하지 못하기 때문
