[SW 코딩] Node.js와 Express.js - 04. 웹과 Express.js
01 웹 서비스 동작 방식
- 웹이란?
- 웹 서비스 동작 방식
- 웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어진다.
- HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할이고,
- HTTP 응답은 HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할을 한다.
- HTTP 요청 예시
- 어떤 사용자가 : User-Agent : 부분이 어떤 사용자인지 나타내는 구문이다.
- 어떤 데이터를 필요로 하는지 : Host : 부분이 어떤 데이터를 담고 있는지에 대한 구문이다.
- HTTP 응답 예시
- 200 OK : 주어진 정보를 성공적으로 반환했을 때
- 백엔드와 프론트엔드
- 정적 웹과 동적 웹
- WEB 1.0 : 사용자와 상호작용하지 않는 페이지 - 단방향 통신, Link를 통한 페이지 이동 정도만 가능하다. 일반적으로 변하지 않는 html 파일로 제공된다.
- WEB 2.0 : 사용자와 상호작용을 하는 페이지 - 양방향 통신, ex) 구글 맵, 웹 채팅 등 사용자가 다양한 기능을 수행할 수 있게 되었다. 프론트엔드와 백엔드가 유기적으로 통신하며 동작한다. 현대적인 웹은 대부분 동적 웹이 사용된다.
02 웹 프레임워크
- 웹 프레임워크란?
- 웹 프레임워크를 사용하는 이유는?
- 웹 프레임워크의 기본 구성요소
- HTTP 요청 처리 : 어떤 사용자로부터 어떤 데이터를 필요로하는지, 수신되었는지 요청을 처리할 수 있다.
- HTTP 응답 처리 : 응답 데이터가 어떤 형식인지, 상태가 정상인지 등에 대한 응답을 처리할 수 있다.
- 라우팅 : HTTP 요청 URL에 해당하는 알맞은 응답 경로를 미리 설정해주는 분기 방법을 제공한다.
- HTML Templating : 응답으로 보낼 서버에서 작성하기 위한 HTML을 Template을 통해 미리 페이지의 뼈대를 만들 수 있게 해준다.
- Node.js의 웹 프레임워크
03 Express.js 시작하기
- Express.js를 사용하는 이유
- npm init으로 시작하기 : 프로젝트 폴더를 생성하고 초기화를 시켜준다.
- 처음 접하는 사용자에게는 쉽지 않은 방법이라 아래 빠르게 시작할 수 있는 Generator 버전으로 실습을 진행한다.
- express-generator 사용하기
- npx + express-generator : npx를 이용하면 express-generator를 설치하지 않고 사용할 수 있다.
- 위 3가지 방법 중 자신에게 맞는 방법으로 설치를 진행한다.
04 Express.js의 구조
- 기본구조 알아보기 : express.js를 사용하면 자주 나오는 파일/디렉토리
05 Express.js 동작 방식
- Express.js 동작 시켜 보기
- Express.js 동작 따라가기
1. localhost:3000은 Express.js가 동작하고 있는 프로그램에 접속하게 된다.
- app.js
- app 객체의 주요기능
- 라우팅 : Express.js는 다양한 라우팅 방식을 제공한다. 크게 app 라우팅과 Express.Router를 통한 라우팅으로 나뉜다.
- app 라우팅
- Express.Router : app 라우팅을 통해서는 라우팅의 핵심인 그룹화를 지원하지 않고, Express.Router를 통해 라우팅을 모듈화 할 수 있다.
- Express.Router 모듈
- Express.Router 사용
- path parameter 사용
- Request Handler
- Request Handler - Request 객체
- Request 객체의 주요 값 및 함수
- Request Handler - Response 객체
- Response 객체의 주요 값 및 함수
- Express.js 동작 방식 정리
