[ Node.js 입문주차1 (1-12)] Express.js 프레임워크

 

1. Express.js의 이해

Express.js는 Node.js로 서버를 빠르고 간편하게 만들 수 있게 도와주는 가장 대표적인 웹 프레임워크.

이를 통해 개발자들은 효율적이고 빠르게 백엔드 서버를 구축할 수 있다.

Express - Node.js web application framework

Express.js의 가장 큰 특징 중 하나는 미들웨어(Middleware)를 지원힌다. 미들웨어는 사용자의 요청과 응답 사이에 위치하며, 특정 기능을 수행하는 함수로 생각할 수 있다.

 

• Express.js와 웹 서버(Web Server)는 동일하지 않다.
• Express.js는 웹서버 자체가 아니라, 웹 서버를 구현하는데 도움을 주는 도구입니다. 즉, Node.js를 위한 웹 프레임워크! 

---

2. Express.js로 백엔드 서버 구현

 

[ 새 프로젝트 설정 ] 

1) VS Code를 실행.

2) 상단 메뉴의 File → Open 

3) 새로운 폴더 버튼을 누르고 새 폴더를 생성 (spa-shop)

4) 새로 만들어진 폴더를 클릭하고 열기.

5) 그리고 위에 메뉴에서 새 터미널을 클릭.

6)  터미널이 열리면 터미널에 아래와 같이 명령어를 실행하여 package.json을 생성한다.

yarn init -y
// 뒤의 -y는 yarn init 명령 실행시 원래는 프로젝트명이나 버전 등을 물어보는데
// 그런 것들을 물어보지 않고 기본값으로 알아서 바로 설정해주는 옵션! 바로 생성됨.

(오른쪽)  생성된 package.json 파일을 보면,  설정한 name ‘spa-shop’ 그리고 기본적인 index.js로 앤트리 포인트가 생성된 것으로 확인 할 수 있다. 

7)  spa-shop 폴더 안에 app.js라는 파일을 아래와 같이 만든다.

---

[ package.json 모듈 변경하기 ] : ES6 모듈을 사용하기 위해 package.json 을 아래와 같이 수정해야 한다.

{
	"name": "spa-shop",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module"  //** type을 추가해주면 된다.
}

---

[Express.js 설치] : 터미널로 돌아가 이번에는 Express.js 프레임워크를 설치한다. 

yarn add express
// ** 설치가 완료되었다면 이제 웹서버를 작성할 준비가 완료됨! ** //

---

[ 기본적인 백엔드 서버 코드 작성] : spa-shop 폴더 안에 app.js라는 파일을 생성한다.

 

- package.json 파일을 다시 열어봤을 때 express 관련된 내용이 들어있으면 정상적으로 설치가 되었다.

- yarn.lock은 어떤 패키지들이 어떤 버전으로 설치되었는지 기록해 놓은 파일이다.

  나중에 이 파일이 있으면 다른 동료들과 협업할 때 같은 환경으로 개발할 수 있게 도와준다.

- node_modules 폴더는 yarn을 통해 설치된 패키지들에 대한 파일이 있는 폴더로, 앞으로 개발을 하면서 다양한 라이브러리를 사용하게 될 텐데 이에 대한 모든 파일이 여기에 설치된다.

// app.js

import express from 'express';

const app = express();
const PORT = 3000;

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

app.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

---

[ 내가 만든 서버 실행 ] : app.js를 실행하기 위해서는 spa-shop의 경로에서 아래와 같이 실행한다.

node app.js

왼쪽) 상단 코드스니펫 입력 후 터미널에 node app.js 입력 오른쪽) localhost:3000 접속시 "hello world"출력됨

"3000 포트로 서버가 열렸어요!” 라는 메시지가 출력되었다면 정상적으로 서버가 실행된 것이다.

 

---

 

* 만약 아래와 같은 오류가 발생이 된다면? 

Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (net.js:1318:16)
    at listenInCluster (net.js:1366:12)
    at Server.listen (net.js:1452:7)
// 혹시 위와같은 에러가 나오나요? 이미 다른 프로그램이 해당 포트를 사용중일 수 있어요.
// app.js 파일에서 3000 이라고 써져있는 port를 4000이나 다른 숫자로 변경해서 다시 해봅시다.

 

* 이미 사용 중인 포트를 찾아서 종료하고 싶다면? 

 

MAC 

터미널을 열고 아래 명령어를 통해서, 우리가 원하는 포트 정보를 찾는다.

예를 들어서 3000번 포트를 점유하고 있는 프로세스에 대한 정보를 찾고 싶다면

lsof -i :3000 이라고 입력하여 찾고, 'kill - 9 < 포트를 점유하고 있는 PID>' 를 통해 종료시켜 준다.

lsof -i :<원하는포트> 
kill -9 <포트를 점유하고 있는 PID>

Linux에서 제공하는 killall이라는 명령어를 사용하여, 특정 프로세스 명을 가지고 있는 모든 프로세스를 종료할 수 있다.

만약, 3000 포트뿐만 아니라, 모든 Node.js 서버를 종료하고 싶을 땐 아래와 같이 입력하면 된다.

# 모든 node 프로세스 명을 종료합니다.
killall node

Windows 

// ** 포트 정보를 찾기 ** // 
netstat -ano | find <"원하는포트"> 
// ** 해당 포트를 점유하고 있는 PID를 찾아서 종료 ** //
taskkill /f /pid 12952