[week_06] 웹과 Express.js | 웹의 이해, 프레임워크, Express.js의 구조, 동작방식

1. 웹

• 사전적 의미: World Wide Web, 인터넷상에서 동작하는 모든 서비스
• 일반적 의미: 웹 브라우저로 접속해서 이용하는 서비스, 웹 사이트

1-1. 웹 서비스 동작 방식

• HTTP 요청과 응답의 반복
• HTTP 요청
  • 사용자가 어떤 데이터가 필요한지 서버에게 알리는 역할
  • 어떤 사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있음
• HTTP 응답
  • HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할
  • 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있음

1-2. 백엔드와 프론트엔드

프론트엔드

• 사용자가 직접 사용하게 되는 웹 페이지를 주로 담당
• = 클라이언트

백엔드

• 사용자에게 보이지 않는 데이터 가공 등의 기능을 주로 담당
• = 서버

1-3. 정적 웹과 동적 웹

정적 웹

• 사용자와 상호작용하지 않는 페이지 ➡ 단방향 통신
• Link를 통한 페이지 이동 정도만 가능
• 일반적으로 변하지 않는 html 파일로 제공

동적 웹

• 사용자와 상호작용을 함 ➡ 양방향 통신
• 프론트엔드와 백엔드가 유기적으로 통신하며 동작

1-4. 동적 웹의 두 가지 구현 방법

• CSR과 SSR

 

2. 웹 프레임워크

• 웹 서비스에 필요한 기능들을 제공해주는(Web) 다양한 도구들의 모음(Framework)
• 정형화된 부분을 간단하게 구현하고, 필요한 부분만 집중해서 개발할 수 있다.

2-1. 웹 프레임워크의 기본 구성요소

웹 서비스의 정형화 된 구성을 많은 웹 프레임워크가 기본적으로 제공

1) HTTP 요청/응답 처리

• 어떤 데이터를 필요로 하는지, 어떤 사용자로부터 요청이 수신되었는지 등
• 응답 데이터가 어떤 형식인지, 응답 상태가 정상적인지 등

2) 라우팅

• HTTP 요청을 분기하는 방법
• HTTP 요청 URL에 해당하는 알맞은 응답의 경로를 미리 설정

3) HTML Templating

• SSR을 구현하기 위한 방법
• SSR에서 응답으로 보낼 HTML을 서버에서 작성하기 위해 HTML의 뼈대를 미리 작성

 

3. Express.js

3-1. Express.js를 사용하는 이유

• Node.js의 웹 프레임워크 중 가장 유명한 웹 프레임워크
• 필요에 따라 유연한 구조 설정 가능
• 다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 가능

3-2. Express.js 시작하기

• express-generator: 프로젝트 생성기, 프로젝트의 기본 구조 자동 생성

$npm i -g express-generator
$express my-web
$cd my-web
$npm i
$npm start

• npx + express-generator로 express-generator를 설치하지 않고 바로 사용하는 방법

$npx express-generator my-web
$cd my-web
$npm i
$npm start

3-3. Express.js의 구조

app.js	Express.js의 가장 기본이 되는 파일, 웹 어플리케이션의 기능을 정의
bin/www	Express.js의 실행 부분을 담당, 포트와 실행 오류 등을 정의
package.json	프로젝트 의존성 및 스크립트 정의
public	코드를 통하지 않고, 직접 제공되는 파일 디렉터리
routes	라우팅 파일 디렉터리
views	HTML Template 디렉터리

 

4. Express.js의 동작 방식

express-generator 로 만들어진 프로젝트 디렉터리에 접근
npm start 로 Express.js 프로젝트를 실행
localhost:3000 에 접속하여 Welcome to Express 페이지 확인

4-1. app.js

var express = require('express');
...
var app = express();

• require 모듈로 로드가 된 express를 함수형 모듈로 사용해서 app 객체 생성
• app 객체: Express.js의 기능을 담은 객체
• Express.js의 모든 동작은 app 객체에 정의 ➡ express는 app 객체로부터 시작해서 모든 요청을 처리

✨ app 객체의 주요 기능
app.use( )
    - middleware를 사용하기 위한 함수
app.listen( )
    - http 서버를 생성해주는 함수
    - express-generator를 사용하면 http.createServer를 사용하는데, app.listen 함수로 대체 가능
app.locals
    - app에서 사용할 공통 상수
    - Express.js에선 global 변수를 선언하지 않고 이 값 사용 가능

4-2. 라우팅

1) app 라우팅

app.get('/', (req, res) => {
	res.send('GET /');
});
app.post('/', (req, res) => {
	res.send('POST /');
});
app.all('/all', (req, res) => {
	res.send('ANY /');
});

• app 객체에 직접 get, post, put, delete 함수를 사용하여 HTTP method로 라우팅 가능
• HTTP method의 첫 번째 인자 = 이 라우팅을 실행할 URL
• HTTP method의 마지막 인자 = 이 라우팅이 실행될 때 작동하는 함수
• all 함수 사용 시, HTTP method에 상관없이 라우팅 가능

2) Express.Router

const express = require('express');
const router = express.router();

router.get('/', (req, res, next) => {
	res.send('respond with a resource');
});

module.exports = router;

• router 객체에도 get, post, put, delete 함수 사용 가능
• 첫 번째 인자 = 라우팅 될 URL
• 마지막 인자 = 라우팅 시 실행될 함수
• 라우터는 일반적으로 모듈로 만들어서 사용

// .app.js
const userRouter = require('./routes/users');
const app = express();

app.use('/users', userRouter);

// .routes/users.js
const petRouter = require('./pets');
const router = express.Router();

router.use('/pets', petRouter);

module.exports = router;

• 작성된 라우터 모듈을 app 에 use 함수로 연결하여 사용 가능
• router 객체에도 하위 라우터를 use 함수로 연결하여 사용 가능

3) path parameter 사용

• 주소의 일부를 변수처럼 사용 가능

/users/:id ➡ /users/123, /users/456 등으로 접속했을 때 라우팅 적용
/messages/:from-:to ➡ /message/123-456 등으로 접속했을 때 라우팅 적용

4) Request Handler

• 라우팅에 적용되는 함수
• HTTP 요청과 응답을 다룰 수 있는 함수
• 설정된 라우팅 경로에 해당하는 요청이 들어오면 실행

router.get('/:id', (req, res) => {
	const id = req.params.id;
    res.send(`hello ${id}`);
});

• router나 app의 HTTP method 함수의 가장 마지막 인자로 전달되는 함수
• Request 객체와 Response 객체 존재
• Request 객체의 주요 값 및 함수

req.params	URL 표현 중 /path/:id 에서 :id 를 req.params.id로 사용 가능
req.queries	URL 표현 중 /path?page=2 에서 page 부분을 req.queries.page로 사용 가능
req.body	일반적으로 POST 요청의 요청 데이터를 담고 있고, req.body에 요청 데이터가 저장되어 들어옴
req.get('')	HTTP Request의 헤더 값을 가져올 수 있음, req.get('헤더명')

• Response 객체의 주요 값 및 함수

res.send()	text 형식의 HTTP 응답 전송
res.json()	json 형식의 HTTP 응답 전송
res.render()	HTML Template을 사용하여 화면 전송
res.set()	HTTP 응답의 헤더 설정
res.status()	HTTP 응답의 상태 값 설정

✨ Express.js 동작방식 정리
Express.js 는 app 객체를 시작으로 모든 동작이 이루어짐
app 객체나 Express.Router 를 사용하여 라우팅을 구현할 수 있음
Request Handler를 통해 HTTP 요청과 응답을 처리할 수 있음