[Express.js] 기초 이해하기

안녕하세요!!

 

지난 게시글(바로 어제의 따끈따끈한 것.)에서, '처음으로 Next.js와 TypeScript를 써보면서 새롭게 만나 기억해두고 싶어 기록한 것'을 작성했던 것처럼, 이번에는 Express.js를 써보면서 마주했던 그런 것들을 정리해보려고 합니다.

 

이번 프로젝트는 백엔드에서 주로 Socket.IO를 이용한 통신 로직만 작성하고 RESTful API는 작성하지 않았지만, 그 과정에서 기초는 이해할 수 있었습니다. 내용은 다음과 같습니다.

• [Express.js] 기본적인 라우팅, 최소 조건 코드 예시
• [Express.js] 서버 실행
• [Express.js] app.listen()

 

1. [Express.js] 기본적인 라우팅, 최소 조건 코드 (예시)

app.js

const express = require('express');

const PORT = 8000;

const app = express();

// 기본 라우팅
app.get('/', (req, res) => {
    res.send('Hello, Express!');
});

// 서버 시작
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});​

프로젝트 생성을 하면서 Express.js를 설치해 주었듯이, Express.js는 Node.js의 기본 제공 모듈이 아니므로, 설치하지 않으면 `require('express')` 호출 시 오류가 발생합니다.

 

기본 라우팅 `app.get('/')`은 포함되지 않아도 정상적으로 서버가 실행되지만, 요청이 들어왔을 때 404 Not Found만 반환됩니다. 기본적인 예시로 "app.get()은 이렇게 쓴다!"라고 기억해 두고 싶었기에 포함시켜 두었습니다.

 

예시를 찾아보니, Express.js의 개발 환경에서는 보통 3000번을 많이 사용한다는 것 같습니다. 저는 Next.js가 3000번에서 돌아가게 하고, Express.js는 8000번에서 돌아가게 해주었습니다.

2. [Express.js] 서버 실행

서버 실행은 지난 `프로젝트 생성` 게시글에서도 작성했던 내용처럼 했습니다. (package.json에 커스텀 명령어를 만들지 않고)

node app.js

 

출력:

 

브라우저에서 `http://localhost:8000`에 접속하면, 다음과 같은 화면이 나타나게 됩니다.

3. [Express.js] app.listen()

위 '최소 조건 코드 예시'에서 보이던 `app.listen()`은 사실 엄청 중요한 조각입니다. (그래보이죠?)

 

여기서 `app`은 Express.js 애플리케이션 인스턴스로, 핵심 객체입니다. 이 객체는 웹 서버를 만들고,

• 라우팅 (app.get())
  • request와 response를 처리
• 미들웨어 설정 (app.use())
• 서버 시작 (app.listen())

등 웹 애플리케이션의 모든 기능을 정의하고 제어하는 중심 역할을 합니다.

 

`app.listen(PORT)`를 호출하는 것은 "서버가 클라이언트 요청을 받을 준비를 했다"라고 동작하게 해줍니다. 즉, 서버를 실행하는 코드입니다. 지정된 포트 번호에서 HTTP 서버를 실행하며, callback 함수를 작성함으로써 서버가 성공적으로 시작된 이후 실행할 코드를 작성할 수 있습니다.

 

미들웨어 설정은 차후 Socket.IO를 연결하는 과정에서 'CORS' 문제를 마주하고 경험하게 되었는데, 때가 되면(?) 포스팅 하도록 하겠습니다.

 

부록

코드 저장소 바로가기

https://github.com/yewon-saurus-mini-project/air-hockey-app

GitHub - yewon-saurus-mini-project/air-hockey-app