My Boundary As Much As I Experienced

Express 초기화, 기본 사용법, 미들웨어 사용하기, 파라미터 쓰는 법 본문

BackEnd/Node.js

Express 초기화, 기본 사용법, 미들웨어 사용하기, 파라미터 쓰는 법

Bumang 2024. 7. 3. 01:07

1. Express 초기화하는 법

express를 임포트 해오고 실행시켜 app 객체를 만든다.

그리고 마지막에 app.listen으로 특정 포트를 듣고 있으면 실행 완료.

"자, 이게 서버야." ... 끝!

 

또한 port는 그냥 넘버 원시값으로 3000 이런 식으로 써줄수도 있지만

app.set("key", value)로 app 객체 안에 속성 선언해놓고 쓸수도 있다.

선언해놓은 속성은 app.get으로 불러올 수 있다. ex. app.get("port")

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

const app = express();

// SET PORT=80 같은걸로 포트를 바꿀 수 있음. 그럴 경우 process.env.PORT가 바뀜.
app.set("port", process.env.PORT || 3000); // app객체에다 속성을 심는다.

...

app.listen(app.get("port"), () => {
  console.log("익스프레스 서버 실행");
});

 

 

2. 기본적인 사용법

아래처럼 특정 path에 접근하면 실행할 콜백함수를 지정해주면 된다.

get, post, patch, put 등의 메소드들을 쓸 수 있다.

req객체는 요청, res객체는 응답을 지정할 수 있다.

send는 메시지를 날릴 수 있고, sendFile은 html파일 등을 날릴 수 있다.

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "./index.html"));
});

app.post("/", (req, res) => {
  res.send("hello express");
});

 

 

3. 미들웨어 사용하는 법

Axios interceptor도 일종의 미들웨어인 것일까? 유사한 개념이다.

모든 요청을 받기 전에 공통적으로 처리할 미들웨어들을 설정할 수 있다.

세 번째 인자로 next를 받는데, 이를 실행시켜줘야 다음 작업을 실행할 수 있다.

app.use((req, res, next) => {
  console.log("언제나 실행");
  next();
});

 

 

4. 파라미터(와일드카드) 쓰는 법

파라미터에 따른 처리를 해주려면 path에 :id같은 값을 추가해주면 된다.

그리고 이 값은 req.params....로 읽을 수 있다.

 

주의해야될 점은 이런 파라미터들은 최대한 아래 쓰는게 좋다는 것이다.

 

스크립트 언어 특성 상, 범위가 넓은 라우터를 위에 쓰게 되면

더 하단에 있는 특정 라우터로 가야될 요청까지 다 먹어버리게 된다.

 

예를 들어, 아래 /category/javascript에 들어가면 hooray!가 떠야하지만

위의 와일드카드 라우터가 먹어버려서 hello javascript가 뜨게 되버리는 것이다.

// 보통 와일드 카드들은 다른 라우터들보다 아래에 위치하는게 좋다.
app.get("/category/:id", (req, res) => {
  // node에서 parameter 쓰는 법
  res.send(`hello ${req.params.name}`);
});

app.get("/category/javascript", (req, res) => {
  // node에서 parameter 쓰는 법
  res.send(`hooray! javascript`);
});

app.get("*", () => {
  res.send("Invalid Page");
});

 

 

 

전체 파일

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

const app = express();

// SET PORT=80 같은걸로 포트를 바꿀 수 있음. 그럴 경우 process.env.PORT가 바뀜.
app.set("port", process.env.PORT || 3000); // app객체에다 속성을 심는다.

app.use((req, res, next) => {
  console.log("언제나 실행");
  next();
});

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "./index.html"));
});

app.post("/", (req, res) => {
  res.send("hello express");
});

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

app.get("/category/javascript", (req, res) => {
  // node에서 parameter 쓰는 법
  res.send(`hooray! javascript`);
});

// 보통 와일드 카드들은 다른 라우터들보다 아래에 위치하는게 좋다.
app.get("/category/:id", (req, res) => {
  // node에서 parameter 쓰는 법
  res.send(`hello ${req.params.name}`);
});

app.get("*", () => {
  res.send("Invalid Page");
});

app.listen(app.get("port"), () => {
  console.log("익스프레스 서버 실행");
});