카테고리 없음

Express.js 사용 - path parameter, Router

효니킴 2023. 6. 21. 02:08

📋 Express.js를 사용하는 이유

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

 

📝 npm init으로 시작하기

npm init을 사용해서 프로젝트를 만들고, Express.js를 응용하여 서버를 만드는 방법이다.

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

 

👇🏻👇🏻 express.js를 사용하여 간단한 서버 만들기(더보기) 

더보기

🤓 목표: npm init으로 프로젝트를 생성하고, express 패키지를 추가해서 서버를 만든다.

 

1. hello-express 이름으로 프로젝트 디렉터리를 만들고, 해당 디렉터리에서 npm init 을 통해 프로젝트를 생성한다.

2. 프로젝트가 생성 된 후 npm i express로 express 패키지를 추가한다. 

3. 설치 완료후 express패키지를 활용해서 코드 에디터로 이동하여 서버를 만들 준비가 완료되었다. hello-express디렉터리 안에 node_modules, package-lock.json, package.json이 추가가 되었다.

4. 서버를 만들기 위해 index.js 파일에서 express 모듈을 호출한다.

5. express 모듈이 로드가 되면, app 객체를 생성한다.

6. app객체를 생성하고, get라우팅을 추가한다.

7. get라우팅에는 "hello express"문자열을 요청으로 전달한다.

8. app.listen()을 사용해서 3000번 포트에 서버를 연다.

9. 서버가 열린 후에는 콜백함수가 실행되는데 콘솔에 서버가 열렸다는 문자열을 출력한다.

10. 작성 된 index.js 파일을 실행하기 위해서는 node index로 실행을 해도 되지만, package.json의 script를 추가하도록한다.

11. script안에서 run 없이 쓸수 있는 start 스크립트를 추가한다.

12. npm start 스크립트를 실행하면 콘솔 문자열 출력 후 서버가 시작된다.

13. 브라우저 localhost:3000 접속하면 hello express 문자열이 응답으로 출력된다.

 

 

 

📝 express-generator 사용하기

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


//1. 전역 패키지로 express-generator 를 추가한다.
//2. express 명령어를 사용하여 my-web 프로젝트를 생성한다.
//3. my-web 프로젝트 생성 후 해당 디렉터리로 이동한다.
//4. npm i 로 express에서 제공하는 dependencies를 설치하고
//5. npm start로 간단한 웹서비스가 생성되고 실행된다.
  • Express.js는 express-generator 라고 하는 프로젝트 생성기를 제공한다.
  • express-generator를 사용하면 프로젝트의 기본구조를 자동으로 생성해주기 때문에 빠르게 프로젝트를 시작하기 좋은방법이다.
  • 또한 직접 프로젝트 구조를 설정하지않고 express에서 제공하는 좋은 구조를 가져다 쓸수 있기 때문에 처음 프로젝트를 생성할 때 express-generator를 사용하여 웹프레임 워크에 대해 공부하는 방법이 유용하다.
  • 생성된 프로젝트는 npm start로 실행 가능하다.

 

👇🏻👇🏻 express-generator를 사용하여 간단한 서버 만들기(더보기) 

더보기

🤓 목표: express-generator을 사용하여 서버를 생성해본다.

 

1. express-generator를 사용하기 위해서는 npm i -g express-generator로 전역 패키지를 추가한다.

*이미 express-generator가 설치가 되어 있는 경우 아래 같이 나옴 

2. 전역패키지로 추가된 express-generator를 express my-server 이름으로 만들면 자동으로 my-server 디렉터리가 만들어진다. 그리고 my-server 디렉터리 하위에 다양한 디렉터리와 파일들이 생성된다.

3. my-server 디렉터리에서 npm i 로 필요한 패키지를 설치한다.

4. 패키지 설치를 완료 한후 npm start를 통해서 express-generator로 생성 된 서버를 실행할수 있다.

5. localhost:3000에 접근하면 express 창을 확인할수 있다.

📝 npx - express-generator 사용하기

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

 

📝 express.js 구조

express-generator로 프로젝트를 생성 했을 때 다음과 같은 파일과 디렉터리가 기본적으로 생성된다.

  • app.js 파일은 express.js의 가장 기본이 되는 파일로 웹 어플리케이션의 기능을 정의한다.
  • bin 디렉터리에 있는 www파일은 express.js의 실행부분을 담당하고 있다. 포트와 실행 오류 등을 정의한다.
  • pageage.json 파일은 프로젝트 의존성 및 스크립트 설정이 정의 되어있다.
  • public 일반적으로 static 파일 서빙 디렉터리라고 하는데 코드를 통하지 않고, 사용자에게 직접 제공되는 파일 디렉터리이다.
  • routes는 라우팅 파일이 저장되는 디렉터리이다.
  • views HTML Template 저장되는 디렉터리이다.

📝 express.js 동작

express-generator 로 만들어진 프로젝트 디렉터리에 접근하여 npm start 명령어를 사용하면 Express.js 프로젝트를 실행할수 있다. express 프로젝트가 실행되면 localhost:3000에 접속하여 Welcome to Express 페이지를 확인할 수있다.

 

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

 

 

📕 app.js 파일

var express = require("express");
var app = express();
  • app.js에서는 require('express') 모듈로 로드가 된 express()를 함수형 모듈로 사용해서 생성되는 app 객체를 확인할수 있다.
  • app객체는 express.js의 모든 기능을 담은 객체로 express.js의 모든 동작은 app객체에 정의가 되고 express는 app객체로 부터 시작되서 모든 요청을 처리한다.

⚙ app 객체의 주요기능

app.use() app.use()함수를 통해서 middleware를 사용할수 있다.
app.listen() app.listen()함수는 http서버를 생성해주는 함수로 express-generator를 사용하면 http.createServer를 사용하는데 app.listen함수로 대체할수 있다.
app.locals app.locals 변수는 app에서 사용할 공통 상수를 담을수 있다. 
express.js에서는 global 변수를 선언하지 않고 이 값을 사용할 수 있다.

 

📕 라우팅

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

 

⚙ 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같은 HTTP methode 함수를 사용할수 있다.
  • app의 함수와 동일한 동작을 하는 함수들로 첫번째 인자가 라우팅 될 URL이고, 마지막 인자가 라우팅 시 실행될 함수이다.
  • 라우터는 일반적으로 모듈로 만들어서 사용하고 있다.

 

⚙ Express.Router 사용

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

라우팅은 app.use()를 이용해 아래와 같은 형태로 설정한다.

app.use('/경로이름', 라우터 객체)

 

  1. ./routes/user.js는 get, post, put, delete 라우팅을 가진 라우터 모듈이다. 라우터 모듈을 userRouter로 받아서
  2. index.js 파일에서 라우터 모듈을 app 객체에 '/users' 경로로 연결한다.
  3. 웹페이지에 '/users' 경로로 들어오는 그 이하의 URL에 대해서는 userRouter에서 먼저 처리한다고 선언할수 있다.

 

계층적 구조의 라우터를 사용할 때, 라우터 선언시 아래 설정을 사용해야 이전 라우터에서 전달된 path parameter를 사용할수 있다.

Router({ mergeParams: true })
  1. ./routes/users.js파일에서 '/users/:userId/pets'경로에 petsRouter를 설정한다.
  2. petsRouter는 앱객체에 연결하지않고, usersRouter 하위에 연결하도록 구성한다. pets라우터를 users라우터에 연결할때, path parameter를 사용하는 경로를 추가하여 "/users/:userId/pets" 이하의 모든 요청을 pets라우터가 처리 할수 있도록 구성한다.
  3. pet 라우터는 "GET/users/:userId/pets"라는 요청에 대해 "Pets  of user {userId}" 라는 문자열을 HTTP응답으로 보내주록 추가한다. 예를 들어 "/GET/users/15/pets"라는 요청에 해당하는 응답은 "Pets of user 15" 가 출력되어야 한다.

 

⚙ 라우팅 - path parameter 사용

express.js라우팅은 path parameter 기능을 제공해서 주소의 일부를 변수처럼 사용할수 있다.

path parameter를 사용하여 메시지를 응답으로 보내는 라우팅을 한다.

 

예를 들어

  • /say/:greeting이라는 스트림을 사용하면 /say/hi, /say/hello 등으로 접속했을 때 hi, hello를 greeting 이라는 path parameter로 받을 수 있다. 즉, /say/ 뒤에 어떤 문자열이 오든지 해당 문자열을 응답으로 출력한다.
  • /messages/:from-:to 를 정의하면 /message/123-456 으로 접속했을 때  from 123 to는 456 라는 parameter로 받을수 있게된다.

📝 Request Handler

라우팅에 적용되는 함수를 Request Handler 라고 부른다.

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

 

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

 

📕 Request 객체

Request Handler에는 request객체와 response 객체가 있다.

 

request 객체는 HTTP 요청정보를 가진 객체로

HTTP요청의 path parameter, query parameter, body, header 등을 확인 가능하다.

 

Request 객체의 주요 값 및 함수

req.params - path parameter를 사용하기 위해서는 req.params 값을 참조해서 사용할수 있다.
- URL 표현중 /path/:id에서 :id를 req.params.id로 사용할수 있다.
req.queries - 물음표 뒤의 값들은 query parameter 라고한다.
- URL 표현중 /path?page=2에서 page부분을 req.queries.page로 사용할 수 있다.
req.body - 일반적으로 POST요청의 요청 데이터를 담고 있다.
- req,body에 요청 데이터가 저장되어 있다.
req.get('') - HTTP Request의 헤더 값을 가져올수 있다
- HTTP 요청이 어떤 사용자가 어떤 방식의 데이터를 요구하는지에 대한 정보들이 담겨있는 값이 헤더 값이다.
- req.get('Authorization')등으로 값을 가져옴

 

📕 Response 객체

HTTP 응답을 처리하는 객체이다.

HTTP 응답의 데이터를 전송하거나 응답 상태 및 헤더를 설정 할수있는 기능을 제공한다.

 

Response 객체의 주요 값 및 함수

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