[SW 코딩 훈련] Node.js와 Express.js 04. 웹과 Express.js

웹

사전적 의미 : World Wide Web, 인터넷상에서 동작하는 모든 서비스

일반적 의미 : 웹 브라우저로 접속해서 이용하는 서비스, 웹 사이트

웹사이트 동작방식

웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어진다. HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할이다. 예를 들어 www.naver.com 이 필요하단 정보를 전달하는 것이다. HTTP 응답은 HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할이다.

웹 브라우저는 HTTP 통신의 관점에서는 클라이언트 역할이다.

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

HTTP 요청과 응답

HTTP 요청 예시

HTTP 요청은 어떤 사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다.

HTTP 응답 예시

HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지를 담고 있다. 궁극적으로 우리에게는 HTML 파일이 오게 된다. 요청과 응답 과정을 통해 HTML 파일을 받아오는 것이다. 받아온 파일을 웹 브라우저가 우리 눈에 보기 쉽게 렌더링(표현)해준다.

백엔드와 프론트엔드

웹 서비스 개발에서 백엔드와 프론트엔드 라는 단어를 많이 접하게 된다. 각각의 두 컴퓨터(서버, 클라이언트)가 있을 때 이 두 역할을 각각 다른 개발 직군이 담당한다고 보면 된다.

프론트엔드는 사용자가 직접 사용하게 되는 웹 페이지를 주로 담당한다. = 클라이언트

백엔드는 사용자에게 보이지 않는 데이터 가공 등의 기능을 주로 담당한다. = 서버

프론트엔드는 웹 브라우저와 관련된, 백엔드는 서버가 어떤 행위를 해야하는가 정의함.

 

정적 웹과 동적 웹

왜 세부 직군까지 생기면서까지 웹이 복잡해졌을까?

정적 웹과 동적 웹은 WEB 1.0, WEB 2.0으로 표현할 수 있다. WEB 1.0은 정보가 일방적으로 수용되고 있고 WEB 2.0은 정보가 교환되고 있다.

 

• 정적 웹

WEB 1.0은 사용자와 상호작용하지 않는 페이지를 제공한다. 단방향 통신이라고도 표현한다. Link를 통한 페이지 이동 정도만 가능하다. 일반적으로 변하지 않는 html 파일로 제공한다.

 

• 동적 웹

WEB 2.0은 사용자와 상호작용을 하는 양방향 통신이 벌어진다. 구글 맵, 웹 채팅, elice.io 등 사용자가 다양한 기능을 수행할 수 있다. 프론트엔드와 백엔드가 유기적으로 통신하며 동작한다. 현대적인 웹은 대부분 동적 웹이다.

 

웹 프레임워크

웹(웹 서비스에 필요한 기능들을 제공해주는)과 프레임워크(다양한 도구들의 모음)라는 단어의 조합이다.

웹 서비스를 구성하기 위해서는 매우 많은 기능이 필요하다. 이러한 기능들을 하나씩 직접 만드는 것에는 너무나 큰 비용(시간, 돈)이 발생한다. 웹 서비스는 많은 부분이 정형화되어 있다. 프레임워크를 사용하여 정형화된 부분을 간단하게 구현한다면, 필요한 부분만 집중해서 개발 할 수 있다. 즉 웹 서비스를 빠르게 구성하기 위해 웹 프레임워크를 사용한다.

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

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

 

• HTTP 요청 처리

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

 

• HTTP 응답 처리

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

 

• 라우팅

웹 프레임워크는 HTTP 요청을 분기하는 방법을 제공한다. 이 말은 요청이 들어올 때 같은 목표 지점인데도 요청하고자 하는 정보가 다를 때가 있다. HTTP 요청 URL에 해당하는 알맞은 응답의 경로를 미리 설정한다.

HTTP 요청에 따라 알맞은 응답을 보내주는 경로를 설정해주는 일이라고 볼 수 있다. 

 

• HTML Templating

웹 프레임워크는 응답으로 보낼 HTML을 서버에서 작성하기 위해, HTML Template를 통해 미리 페이지의 뼈대를 작성 가능하다. 기존에는 HTML 문서를 그냥 쓰거나, JS가 동적으로 움직이거나, CSS가 디자인을 신경써주었다. 동적 웹을 사용하는 시대에 살고 있어서 서버에서 받아오는 정보에 따라 달라지는 부분이 있다. 그런 정보를 빈 칸을 뚫어놓는 HTML 작성 방법인 HTML Template을 만들 수 있다.  그 웹 프레임워크를 통해서 해당 정보를 채워줄 수도 있다.

 

Node.js의 웹 프레임워크

Node.js 에는 다양한 웹 프레임워크가 있다. 이후 내용에선 Express.js를 다룬다.

 

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

 

Express.js

Express.js는 Node.js의 웹 프레임워크 중 가장 유명한 웹 프레임워크다. 그만큼 정보를 얻기도 편하고 질문하기도 편하다. 필요에 따라 유연하게 구조 설정이 가능하다. 다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 가능하다. 모든 동작이 명시적으로 구성되기 때문에, 웹 프레임워크의 동작 방식을 이해하기 가장 좋은 프레임워크다.

 

npm init으로 시작하기

npm을 활용해서 프로젝트 폴더를 만들고 (mkdir my-web) 이곳으로 이동한다. (cd my-web)

npm init으로 npm 프로젝트를 시작하고 express를 설치한다. (npm i express)

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

express-generator 사용하기

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

npx + express-generator 사용하기

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

 

Express.js의 구조

When you pull up, you know it's a shut down. 간

 

Express.js 동작 시켜 보기

이런 복잡한 과정을 거쳐 웰컴 투 익스프레스가 나온다.

express-generator로 만들어진 프로젝트 디렉터리에 접근(cmd, 터미널 환경)하여, npm start 로 Express.js 프로젝트를 실행할 수 있다. localhost:3000 에 접속하여 welcome to Express 페이지를 확인할 수 있다.

 

app.js

 

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

app.use()	middleware 를 사용하기 위한 함수
app.listen()	http 서버를 생성해주는 함수 이 서버는 어떤 요청을 보내게 되면 대응하는 응답의 함수를 넣어줌으로써 마치 이벤트 핸들러와 같이 주어진 역할을 수행할 수 있다. express-generator 를 사용하면 http.createServer를 사용하는데 app.listen 함수로 대체할 수 있음
app.locals	app에서 사용할 공통 상수 Express.js 에선 global 변수를 선언하지 않고 이 값을 사용할 수 있음

 

라우팅

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

 

• app 라우팅

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

 

• Express.Router

app 라우팅을 통해서는 라우팅의 핵심인 그룹화를 지원하지 않는다. (그룹화 : 유사한 경로를 함께 묶는 것) Express.Router 를 통해 라우팅을 모듈화 할 수 있다.

router 객체도 app 객체처럼 get, put, post, delete 함수를 사용할 수 있다. app의 함수와 동일한 동작을 하는 함수로 첫 번째 인자가 라우팅 될 URL이고, 마지막 인자가 라우팅 시 실행될 함수이다. 라우터는 일반적으로 모듈로 만들어서 사용한다.

작성된 라우터 모듈을 app 에 use 함수로 연결하여 사용할 수 있다. router 객체에도 하위 라우터를 use 함수로 연결하여 사용할 수 있다.

Express.js 라우팅은 path parameter를 제공한다. path parameter를 사용하면, 주소의 일부를 변수처럼 사용할 수 있다.
Ex)
/users/:id - /users/123, /users/456 등으로 접속했을 때 라우팅 적용
/messages/:from-:to - /message/123-456 등으로 접속했을 때 라우팅 적용

 

Request Handler

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

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

 

• Request 객체

HTTP 요청 정보를 가진 객체다. 클라이언트가 서버에게 요청을 보내는 과정에서 path parameter, query parameter, body, header와 같은 정보들을 확인 가능하다. 어떤 의미의 요청인지, 어떤 것을 원하는지를 쉽게 파악할 수 있다.

Request 객체의 주요 값 및 함수 : Request '객체'이기 때문에 안에 있는 개개인의 정보를 파악하기 위해선 프로퍼티로 접근해야한다.

 

• Response 객체

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

Response 객체의 주요 값 및 함수

 

Express.js 동작방식 정리

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

---

지시사항

./routes/users.js 파일을 수정하여,

‘/users/:userId/pets’ 경로에 petsRouter 를 설정합니다.

---

1. petsRouter 는 앱객체에 연결하지 않고,
   usersRouter 하위에 연결하도록 구성합니다.
   pets 라우터를 users 라우터에 연결할 때, path parameter 를 사용하는 경로를 추가하여 “/users/:userId/pets” 이하의 모든 요청을 pets 라우터가 처리할 수 있도록 구성합니다.

---

1. pets 라우터는 “GET /users/:userId/pets”라는 요청에 대해 “Pets of user {userId}” 라는 문자열을 HTTP 응답으로 보내주도록 추가 합니다.
   예를들어, “GET /users/15/pets” 라는 요청에 해당하는 응답은
   “Pets of user 15” 가 출력되어야 합니다.

---

참고사항

계층적 구조의 라우터를 사용할 때,
라우터의 선언시

Router({ mergeParams: true })

를 사용해야, 이전 라우터에서 전달된 path parameter 를 사용할 수 있습니다.

---

# users.js
const { Router } = require('express');
const petsRouter = require('./pets');
const router = Router();

router.get('/', (req, res) => {
    res.send('GET /users');
});

/* /:userId/pets 경로에 petsRouter 연결 */
router.use("/:userId/pets", petsRouter);

module.exports = router;


# pets.js
const { Router } = require('express');

const router = Router({ mergeParams: true });

/* GET 라우팅 추가 */ 
router.get('/', (req, res) => {
    const { userId } = req.params;
    res.send(`Pets of user ${userId}`)
    })

module.exports = router;


# index.js
const express = require('express');

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

const app = express();

app.get('/', (req, res) => {
    res.send("OK");
});

/* 라우터를 '/users' 경로에 연결 */
app.use('/users', userRouter);

app.listen(8080);