[express 기초]node와 express 알아보기 - 2

February 28, 2024

이전 포스팅에서 node를 이용해 서버를 구축하는 방법을 해보았으니 이번에는 express를 이용해 간단하게 서버를 구축해보자

install

설치하기 이전에 프로젝트 폴더를 만들어 준다. 본인은 express-start로 설정해두었다.

그 다음 npm init을 이용해 package.json 을 생성해준다.

npm init을 하게 되면 package name, version, description 등 여러가지를 입력하라고 뜨는데 entry point를 제외한 모든 질문은 enter키를 누르자.

entry point는 실행시킬 메인 파일을 무엇을 할지를 선택하라는 물음으로, 기본적으로 index.js이다.

본인은 한 권으로 끝내는 Node & Express 책을 기준으로 공부하니 교재와 동일하게 meadowlark.js로 설정해주겠다.

모든 질문에 enter키를 누르고 나면 package.json 파일이 생성될 것이다.

그럼 이제 express를 다운 받자

  npm install express@4

교재에서 사용한 버전을 사용해 주겠다.

또 파일을 수정할때 마다 실행시키기 귀찮으므로 nodemon도 설치해 주겠다.

  npm install --save-dev nodemon

그리고 nodemon으로 실행시켜주기 위해 package.json을 수정하자.

"scripts": {
    "start": "nodemon meadowlark.js"
  },

이렇게 수정해주면, 터미널에 npm run start 을 입력하게 되면 자동으로 nodemon 으로 실행된다.

이제 모든 설치가 끝났으니 코드르 작성해보자.

페이지 연결

const express = require("express");
const app = express();
const port = process.env.PORT || 3000;

// route
app.get("/", (req, res) => {
  res.type("text/plain");
  res.send("Meadowlark Travel");
});

app.get("/about", (req, res) => {
  res.type("text/plain");
  res.send("About Meadowlark Travel");
});

//custom 404 page
app.use((req, res) => {
  res.type("text/plain");
  res.status(404);
  res.send("404 - Not Found");
});

// custom 500 page
app.use((err, req, res, next) => {
  console.error(err.message);
  res.type("text/plain");
  res.status(500);
  res.send("500 - Server Error");
});

app.listen(port, () =>
  console.log(
    `Express started on http://localhost:${port}; ` +
      `press Ctrl-C to terminate`
  )
);

app.get(): 라우트를 추가하는 메서드
- 경로와 함수 두 가지 매개변수를 받는다.
- html method의 그 get이다.
app.use(): 미들웨어와 관련있는 메서드
app.listen(): 원하는 포트에 서버를 실행시키는 메서드
- 포트번호와 함수 두 가지 매개변수를 받는다.

node에서 달라진점

상태코드
- express: res.status(status)
- node: res.withHead(status)
content type
- express: res.type(type)
- node: res.withHead(status, {"Content-Type" : type})
데이터 전달
- express: res.send(data)
- node: res.end(data)

res.end, res.send

res.end 같은 경우 node의 저수준 메서드이다. express에서 확장한 res.send()를 사용한다.
공식문서 상에서 데이터 없이 빨리 응답하기 위해서 사용하고, 그 외 데이터를 전달해야할 경우 res.send(), res.json()을 사용하라 명시되어 있다.
- express 공식 문서의 end 메서드에 관한 링크
res.json()은 메서드 이름 그대로 json 형식으로 데이터를 주고 받을때 사용하는 메서드다.

라우트와 미들웨어 순서

익스프레스에서는 라우트와 미들웨어 순서가 중요하다.

위의 코드에서는 라우트가 먼저 작성되어 있고, 미들웨어가 작성되어 있다.

만일, 미들웨어라 먼저 작성되어 있으면 페이지에 접속되지 않고 무조건 404 페이지로 연결된다.

정적 파일

익스프레스는 미들웨어를 이용해 정적파일을 처리한다.

static 미들웨어는 하나 이상의 디렉터리를 지정해 이 디렉터리에 정적 자원을 보관하고, 이들은 아무런 변화 없이 클라이언트에게 전달된다.

보통 이 디렉터리에는 이미지, css 파일, 클라이언트 사이드 js 파일을 넣는다.

프로젝트 디렉터리에 public 디렉토리를 생성한 다음, 메인 파일에 아래 코드를 적어준다.

  app.use(express.static(__dirname + "/public"));

이후 파일 내부에 이미지를 넣고 이미지를 전송하고 싶을때는 public을 제외한 경로를 작성해주면 된다.

보통 static 미들웨어를 코드의 상단에 위치하기에 다른 라우트를 가로챌 수 있다.

위 코드에서 public 폴더안에 index.html을 저장하게 되면 예상과는 다른 화면이 보이는 결과가 나타난다.

그래서 이러한 점에 주의해서 작성해야한다.

참고 자료

한 권으로 끝내는 Node & Express 2판
두근두근 내 첫서버에서 GET 요청을 처리해보자 - 코딩애플
Express res.send() vs res.json() vs res.end() 비교 - Yohan Kim’s developer diary
express 공식 문서의 end 메서드에 관한 링크

YUN SEO