[Toy Project - Omuk] 1. Express 설치

Express 설치

익스프레스는 Node.js 런타임 환경에서 손쉽게 서버를 생성할 수 있게 하는 프레임 워크이다.

 

이 프레임 워크를 사용하여, 새롭게 토이프로젝트를 진행해보고자 한다.

 

먼저 VScode를 통해서 원하는 디렉토리를 열어준다.

 

나 같은 경우, 향후에 프론트엔드도 구성해볼 계획이라서 backend라고 폴더명을 지었다.

원하는 폴더에서 아래의 명령어를 통해서 초기화를 한다.

npm init

명령어 입력시 이름과 버전, 설명 등을 작성하라고 하는데 나중에 작성해도 되니까 기본값으로 두었다. 그렇게 하면 본격적으로 package.json 파일이 생성된다.

 

미리 코드를 집어넣었는데, 초기화를 하면 위와 같이 파일이 생성된다. main 프로퍼티는 서버의 기둥이 되는 파일이며, type 프로퍼티에 module을 설정해서 ES6 방식으로 작성할 것임을 명시했다.

 

메인 파일 작성

 

이제 main 파일을 생성하고 간단하게 익스프레스를 체험할 수 있도록 아래와 같이 코드를 작성한다.

import express from "express";

const app = express();

const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Your Express app has been started at http://localhost:${port}`);
});

express를 임포트하고, port를 설정한다. 기본적으로 설정된 환경의 포트를 사용하거나 3000번 포트를 사용한다.

 

이후 listen으로 익스프레스가 3000번 포트 하에 작동할 수 있도록 한다. 서버의 실행은

node main.js // 서버 메인 파일

npm run start // package.json에서 설정

둘 중 하나를 입력하여 실행할 수 있다.

 

웹 브라우저 프로그램에서 localhost:3000 을 입력하여 접속했을 때, 위와 같이 화면이 구성되면 성공한 것이다.

 

다음에는 라우트를 설정할 예정이다.