[Nodejs] express 프레임워크 프로젝트 만들기

지난 포스팅에서는 Nodejs를 설치하고 가장 기본이 되는 index.js 파일을 만들어서 서버를 동작시켜 보았습니다.

2021.03.19 - [쿤즈 Server/Nodejs] - [Nodejs] NodeJS 설치 및 프로젝트 생성하기(feat. Windows & macOS)

[Nodejs] NodeJS 설치 및 프로젝트 생성하기(feat. Windows & macOS)

굉장히 짧은 프로그램으로 서버를 동작시킬수 있는것이 Nodejs의 가장 큰 특징인 것 같습니다.

 

 

오늘 포스팅에서는 Nodejs에서 많이 사용되는 Express 프레임워크를 적용하는 방법을 알아보도록 하겠습니다.

---

Express 프레임워크란

Express는 웹 어플리케이션을 보다 더 쉽고 빠르고 만들어 줄수 있는 도구입니다. 웹 및 모바일 애플리케이션을 위한 강력한 기능들을 제공하는 프레임워크입니다.

* 프레임워크란 복잡한 기능들을 보다 편리하게 사용할 수 있도록 만들어 배포되는 소프트웨어 개발의 구조입니다.

굉장히 많은 API들이 있으며 Http 유틸에 관련된 method들과 미들웨어를 마음대로 사용해서 쉽고 빠르게 웹 어플리케이션을 만들어 낼 수 있습니다. 그래서 많은 다른 프레임워크들이 Express 기반으로 만들어진 것들이 많습니다.

---

Express 설치 및 프로젝트 생성하기

우선 먼저 프로젝트를 생성하기 위해서 디렉토리를 만들고 이동합니다.

mkdir exproj
cd exproj

 

---

Nodejs 프로젝트 생성

프로젝트를 생성하기 위해서는 다음과 같이 init 명령어를 사용합니다.

$ npm init

이때 -y 옵션을 넣지 않으면 생성시 필요한 정보들을 요구합니다. 필요하면 변경하고 필요하지 않으면 Return(Enter)를 눌러서 다음으로 계속 넘어가시면 됩니다. 여기서 다음과 같은 옵션이 등장합니다.

entry point: (index.js)

기본 Nodejs는 index.js를 시작하는 소스로 사용합니다. 그리고 express에는 구분을 위해 기본은 app.js를 사용하지만 index.js를 그대로 사용하셔도 됩니다. 저는 app.js로 변경해보았습니다.

끝나고 나면 package.json파일이 생성되고 Express로 시작하기 위해서 패키지를 설치합니다.

---

Express 설치

Express 프레임워크를 설치하는 방법은 npm 명령어를 이용해서 설치하시면 됩니다. 명령어는 다음과 같습니다.

$ npm install express

모듈이 정상적으로 설치가 되면 현재 디렉토리에 node_module이라는 디렉토리가 생성되고 그 내부에는 express 모듈들이 설치가 되어 있을겁니다. 또한 package.json파일에 express도 추가되어 있게 됩니다.

 

자 그럼 vscode를 이용해서 나머지 프로그래밍을 진행해 보도록 하겠습니다. vscode를 열고 현재 디렉토리로 이동해주세요.

---

Vscode로 app.js 만들고 실행

Vscode를 실행시켰다면 New File을 app.js라는 이름으로 하나 생성해 주세요. 그리고 파일 내부에는 아래 내용을 붙여넣어 줍니다.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

만들고 저장했다면 일단 실행으 한번 해보도록 하겠습니다. 위에서 작업하던 Shell을 열어도 되지만 메뉴에 보시면 [Terminal] - [New Terminal] 버튼을 누르지면 현재 디렉토리에서 새로운 터미널이 하나 열리게 됩니다. 이제 어플리케이션을 실행합니다.

$ node app.js

정상적으로 실행이 되었다면 이제부터는 소스를 조금 살펴보도록 하겠습니다.

---

app.js 소스 구조

app.js 구조를 살펴보도록 하겠습니다. 우선 Nodejs의 특징은 가장 상단에 필요한 모듈(프레임워크)들을 모두 불러와서 사용한다는 점입니다. 지금은 express모듈 하나이기 때문에 이를 불러오는 작업을 진행합니다.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

그리고 express() method를 app이라는 변수에 담아서 이 변수로 Router와 listen을 동작시키게 됩니다.

 

Router는 간단히 말해서 이동하게 될 Url을 매핑시켜주는 작업입니다. app.get('/', (req, res) => {...} 이라는 작업은 Http method가 get으로 불리고 url은 '/' 일때, callback으로 오른쪽 함수를 실행시킵니다. Arrow함수 형태로 만들어졌으며 일반 function함수로 만들어서 전혀 상관 없습니다.

 

따라서 localhost:3000/에 접속하면 Hello World! 라는 글자가 화면에 나타나게 됩니다.

 

다음은 listen() 함수입니다. 첫 번째 parameter는 port 정보이며 두 번째 함수는 callback으로 넘어오는 함수입니다. 서버가 정상적으로 실행됐음을 알리기 위해서 서버 로그를 남기는 형태입니다.

---

이번 포스팅에서는 간단한 Express 프레임워크의 구조에 대해서 알아보았습니다. 다음 포스팅에서는 app.js를 직접 만들지 않고 express 명령어를 이용해서 전체적인 구조를 쉽게 만들어주는 형태로 진행해 보도록 하겠습니다. 도움이 되셨으면 합니다. 이상입니다.