웹과 Express.js

웹이란?

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

웹 서비스 동작 방식

• 웹서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어짐
• HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할
• HTTP 응답은 HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할

1. 브라우저가 인터넷을 통해 HTTP 요청을 서버에 전달
2. 서버는 사용자의 HTTP 응답을 부라우저로 전송
3. 브라우저는 HTTP 응답을 사용자에게 적절한 화면으로 노출

• HTTP 요청은 사용자가 어떤사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다.
• HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있다.

백엔드와 프론트엔드

• 프론트엔드는 사용자가 직접 사용하게 되는 웹페이즈를 주로 담당 = 클라이언트
• 백엔드는 사용자에게 보이지 않는 데이터 가공 등의 기능을 주로 담당 = 서버

정적 웹

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

동적 웹

• Web 2.0
• 사용자와 상호작용을 함 - 양방향 통신
• 구글맵, 웹 채팅 등 사용자가 다양한 기능을 수행할 수 있음
• 프론트엔드와 백엔드가 유기적으로 통신하며 동작
• 현대적인 웹은 대부분 동적 웹

동적 웹의 두 가지 구현방법

• CSR

• Client-Side Rendering

• 프론트엔드에서 사용자가 페이지에서 보는 동적인 부분을 대부분 처리하는 방식

• SSR

• Server-Side Rendering

• 백엔드에서 페이지 대부분의 영역을 처리해서 프론트엔드로 전달하는 방식

CSR의 특징

• 사이트가 변하는 부분들을 프론트엔드에서 처리
• 프론트 엔드 코드에 페이지 리소스들이 미리 정의되어 있음
• 서버와의 통신은 API 통신을 이용
• 빠른 반응이지만 페이지의 내용은 API호출이 완료된 후에 보여짐
• 복잡한 프로젝트 구성, 큰 개발 사이즈

SSR의 특징

• 사이트가 변하는 부분들을 백엔드에서 처리
• 백엔드에서 HTML 파일을 작성해서 프론트엔드로 전달
• CSR에 비해 쉬운 구성, 작은 개발사이즈
• 로딩이 완료되면 페이지와 데이터가 한 번에 표시됨
• 상대적으로 사용자가 보기엔 로딩이 느려 보임
• 페이지 이동할 때마다 다시 로딩하기 때문에 페이지 깜빡임

웹 프레임워크란?

• 웹 서비스에 필요한 기능들을 제공해주는(웹) 다양한 도구들의 모음(프레임워크)

웹 프레임워크를 사용하는 이유

• 웹 서비스는 많은 부분이 정형화 되어 있다.
• 프레임워크를 사용하여 정형화된 부분을 간단하게 구현,
• 필요한 부분만 집중해서 개발 할 수 있다.

웹 프레임워크의 기본 구성요소

• 웹 서비스의 정형화 된 구성을 많은 웹 프레임워크가 기본적으로 제공 함
• HTTP 요청처리
• HTTP 응답처리
• 라우팅
• HTML Templating

웹 프레임워크 - HTTP 요청 처리

• 웹 프레임워크는 HTTP 요청을 처리할 수 있다.
• 어떤 데이터를 필요로 하는지,
• 어떤 사용자로부터 요청이 수신되었는지 등

웹 프레임워크 - HTTP 응답 처리

• 웹 프레임워크는 HTTP 응답을 처리할 수 있다.
• 응답 데이터가 어떤 형식인지,
• 응답 상태가 정상적인지 등

웹 프레임워크 - 라우팅

• 웹 프레임워크는 HTTP 요청을 분기하는 방법을 제공함
• HTTP 요청 URL에 해당하는 알맞은 응답의 경로를 미리 설정
• HTTP 요청에 따라 알맞은 응답을 보내주는 경로를 설정해주는 일

웹 프레임워크 - HTML Templating

• 웹 프레임워크는 SSR을 구현하기 위한 방법을 제공함
• SSR에서 응답으로 보낼 HTML을 서버에서 작성하기 위해,
• HTML Template를 통해 미리 페이지의 뼈대를 작성 가능

Node.js의 웹 프레임워크

• Express.js - Node.js의 가장 유명한 웹 프레임워크
• Koa.js - 현대적인 JavaScript를 적극적으로 사용하는 웹 프레임워크
• Nest.js - TypeScript를 사용하며, 고정된 구조를 제공하는 웹 프레임워크

Express.js를 사용하는 이유

• 필요에 따라 유연하게 구조 설정가능
• 다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 가능
• 모든 동작이 명시적으로 구성되기 때문에,
• 웹 프레임워크의 동작 방식을 이해하기 가장 좋은 프레임워크

npm init으로 시작하기

$mkdir my-web
$cd my-web
$npm init
$npm i express

const express = require("express");
const app = express()

app.get('/', (req, res) = > {
    res.send('Hello World!');
});

app.listen(3000);

• Express.js를 처음부터 작성할 수 있는 방법
• 직접 모든 구조를 작성해야 하기 때문에, Express.js를 처음 접하는 사용자에겐 쉽지 않다.

express-generator 사용하기

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

• Express.js는 express-generator 라고 하는 프로젝트 생성기를 제공함
• express-generator를 사용하면 프로젝트의 기본구조를 자동으로 생성해줌
• 빠르게 프로젝트를 시작하기 좋은 방법
• 생성된 프로젝트는 npm start로 실행가능

npx + express-generator 사용하기

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

• npx를 사용하여 express-generator를 설치하지 않고, 바로 사용 가능.
• express-generator는 프로젝트 생성 이후엔 사용되지 않기 때문에, npx를 사용하는 것도 좋은 방법이다.

Express.js의 기본구조

Express.js 동작 시켜보기

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

Express.js 동작 따라가기

1. 브라우저에서 localhost:3000 접속
2. app.js -> app.use('/', indexRouter);
3. routes/index.js -> router.get('/', ...
4. routes/index.js -> res.render('index', ...
5. views/index.jade

app.js

var express = require("express");
// ...
var app = express();

• app.js에서는 express()로 생성되는 app 객체를 확인할 수 있다.
• app 객체는 Express.js의 기능을 담은 객체
• Express.js의 모든 동작은 app 객체에 정의됨

app 객체 - 주요기능

라우팅

• Express.js는 다양한 라우팅 방식을 제공함
• 크게 app 라우팅과 Express.Router를 통한 라우팅으로 나누어짐

app 라우팅

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

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

Express.Router

• app 라우팅을 통해서는 라우팅의 핵심인 그룹화를 지원하지 않는다
• Express.Router 를 통해 라우팅을 모듈화 할 수 있다.

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 객체에도 app 객체처럼 get,put,post,delete 함수 사용가능
• 라우터는 일반적으로 모듈로 만들어서 사용함

Express.Router 사용

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

app.use('/users', user Router);

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

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

module.exports = router;

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

라우팅 - path parameter 사용

• Express.js라우팅은 path parameter를 제공

• path parameter를 사용하면, 주소의 일부를 변수처럼 사용할 수 있다.

• Ex)

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

Request Handler

• 라우팅에 적용되는 함수를 Request Handler라고 부른다
• 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행된다.

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

• router나 app의 HTTP method함수의 가장 마지막 인자로 전달되는 함수
• 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행됨
• 요청을 확인하고, 응답을 보내는 역할

Request Handler - Request 객체

• HTTP 요청 정보를 가진 객체
• HTTP 요청의 path parameter, query parameter, body, header 등을 확인가능

Request Handler - Request 객체의 주요 값 및 함수

Request Handler - Response 객체

• HTTP 응답을 처리하는 객체
• HTTP 응답의 데이터를 전송하거나, 응답 상태 및 헤더를 설정할 수 있다.

Request Handler - Response 객체의 주요 값 및 함수