20230628TIL

Express.js

자바스크립트와 나의 관계... 2년동안 같은 반이었는데 말 걸어본 지는 손에 꼽는 사이랄까? 봐도봐도 모르겠다.
지난주 리액트,Next.js에 이어 또 새로운 js친구가 나오셨다.

Express.js는 무엇인가? 인용

Express.js는 Node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크다.

프레임 워크:어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다. 라이브러리와의 차이점을 엄밀하게 따지기는 어렵다고 한다.

그러한 컴포넌트를 미들웨어(middleware)라고 하며, 설정보다는 관례(convention over configuration)와 같은 프레임워크의 철학을 지탱하는 주춧돌에 해당한다. 즉, 개발자들은 특정 프로젝트에 필요한 라이브러리를 어떤 것이든 자유롭게 선택할 수 있으며, 이는 개발자들에게 유연함과 수준 높은 맞춤식 구성을 보장한다.

출처: 엘리스

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

//app.js
var express = require('express');
var app = express()
var indexRouter = require('./routes/index');
app.use('/',indexRouter)
module.exports = app;

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

require():외부 모듈을 가져올 수 있다.
app.use(): middleware 를 사용하기 위한 함수

app.use('/users', setUser(), usersRouter); usersRouter에서 setUser 함수를 사용하기 위한 코드! 이때 setUsers는 다른 코드에서 생성해 require로 불러온 것이고 인자값을 받을 수 있다.

라우팅 (Routing)

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

app Routing

//app 라우팅
app.get('/', (req, res) => {
	res.send('GET /');
});

app 객체에 직접 get, post, put, delete 함수를 사용하여 HTTP method 로 라우팅 할 수 있다. app 라우팅을 통해서는 라우팅의 핵심인 그룹화를 지원하지 않는다.HTTP method 함수의 첫 번째 인자가 이 라우팅을 실행할 URL이다.

app에 get 메서드를 사용해 서버에 출력하기 위해서는
app.get('/', (req, res) => {
res.send('Hello Elice!');
});
의 형태를 사용해야 한다~! request Handler만 req,res를 받아오는 것이 아닌 것 같다. 문제 풀면서 더 익혀봐야 할듯!! 아직은 헷갈린다

Express.Router 모듈

//routes/index.js
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 함수를 사용할 수 있음
app의 함수와 동일한 동작을 하는 함수로
첫 번째 인자가 라우팅 될 URL이고, 마지막 인자가 라우팅 시 실행될 함수.
라우터는 일반적으로 module.exports를 통해 모듈로 만들어서 사용함

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

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

실행 순서
1. const petRouter = require('./pets');

• ./pets에서 router를 받아온다.

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

• petRouter를 /pets라는 경로에 연결

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

• userRouter에 ./routes/users에 있는 petRouter를 불러와 저장

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

• userRouter로 /users에 연결. users 하위 경로가 모두 userRouter로 들어감. 그러나 users.js 안에 const petRouter = require('./pets');가 있어 router.use('/pets', petRouter);로 pets의 경로를 처리함.

Express.js 라우팅은 path parameter를 제공
path parameter를 사용하면, 주소의 일부를 변수처럼 사용할 수 있음

/users/:id -> /users/123, /users/456 등으로 접속했을 때 라우팅 적용!

Request Handler

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

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

실행 과정
router로 '/:id'라는 path parameter를 포함한 경로로 요청이 들어왔고, id는 요청값의 파라미터의 id를 받아와 'hello ${id}'라는 값을 답으로 보내준다.

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

Request Handler 안에는 Request 객체와 Response 객체가 있다.

Request 객체는 HTTP 요청 정보를 가진 객체로, HTTP 요청 정보의 path parameter, query parameter, body, header 등을 확인할 수 있다.
Response 객체는 HTTP 응답을 처리하는 객체로,
HTTP 응답의 데이터를 전송하거나, 응답 상태 및 헤더를 설정할 수 있음

Request 객체의 주요 값 및 함수

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

Response 객체의 주요 값 및 함수

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

실습문제 가져오기

app.get("/:follow", (req, res) => {
  res
    .set({
      "Content-Type": "text/json",
      ETag: "10000",
    })
    .status(201)
    .json(req.params);
});

res.set()으로 response의 헤더 정보를 설정하고,
res.status(201)로 response의 상태코드를 설정했다.
res.json(req.params)로 json형태로 HTTP 응답을 전송했다.

app Routing 사용 예시

//routes/hi.js
const { Router } = require('express');

const router = Router();

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

module.exports = router;

routes/sayhi.js
이 파일은 Express Router 모듈을 export 한다. router.get()을 통해 Say Hi 를 화면에 전송한다. GET 요청을 처리하는 API를 만든 것이다!

//index.js
const express = require('express');
const hiRouter = require('./routes/sayhi');
const app = express();

app.listen(8080);
// 라우터를 "/books" 경로에 연결하세요.
app.use('/sayhi', hiRouter);

routes와 같은 위치에 있는 index.js
app.listen으로 8080포트로 서버를 열었고,
const hiRouter = require('./routes/sayhi');로 routes/sayhi에 있는 라우터를 hiRouter로 선언했다.
app.use('/sayhi', hiRouter); 로 불러온 라우터를 /books 경로에 연결했다.

const books=require('./data/books')
const setBook = (req, res, next) => {
    const { title } = req.query;
    req.title = books[title];
    next();
}

title에 request의 query문자열을 받아온다. /books?title='Harry Potter'일 경우, title='Harry Potter'을 객체로 하여 title에 Harry Potter 값을 넣어준다.
books는 query로 읽어온 책의 데이터로, books['Harry Potter']인 셈이다.