[Express] - Express.js로 웹 서버 만들기(프로젝트 사전 세팅)

Donggu(oo)·2022년 12월 12일
express.js
0

Node.js

목록 보기
4/9
post-thumbnail

1. package.json 파일 생성

  • package.json이란 프로그램을 실행시키기 위해 필요한 모듈들이 무엇인지, 프로그램을 실행시키는 방법, 프로그램을 테스트하는 방법 등이 명시되어 있다. npm init 명령어로 package.json 파일을 생성한다.
npm init
  • package name: 패키지 이름이다. 프로젝트 혹은 현재 애플리케이션의 대표 이름을 입력한다.
  • version: 패키지 버전이다.
  • description: 패키지에 대한 설명이다.
  • entry point: 자바스크립트 실행 파일이다. 웹 서버를 구현한다면 index.js 혹은 app.js로 구현한다. 프로젝트에서 가장 먼저 실행되는 main 자바스크립트 파일이다.
  • test command: 코드를 테스트할 때 입력할 명령어다.
  • git repository: 코드를 저장해 둔 깃(Git) 저장소 주소다. 현재 패키지를 다른 패키지에서 사용하는 경우, 깃 저장소 주소를 확인하고 코드가 어디서 관리되는지를 확인할 수 있게 해 준다.
  • keywords: 개발자들이 npm 공식 홈페이지에서 패키지를 검색할 때, 검색을 위해 제공되는 키워드다.
  • license: 패키지 라이센스 정보다. 기본값은 ISC다. ISC는 Internet Systems Consortium에서 허용한 자유 소프트웨어 라이선스이다.
{
  "name": "project",
  "version": "1.0.0",
  "main": "index.js",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

2. Express 설치

  • npm install express 명령어를 사용해 Express를 설치한다.
npm install express

  • 이렇게 express 패키지가 설치되면 node_modules라는 폴더가 자동으로 생성된다. express라는 Node.js 패키지 하나만 설치했는데 node_modules 폴더를 열어보면 굉장히 다양한 폴더와 파일이 생성된 것을 확인할 수 있다. 이렇게 다양한 파일이 생성된 이유는 express 패키지 내부에서 참조하고 있는 다른 모든 패키지가 설치되기 때문이다.

  • 대다수의 Node.js 패키지는 모든 프로그래밍 코드를 자체 개발하는 것이 아니라 특정 기능에 대해서는 이미 개발된 다른 패키지를 사용해서 개발하므로 패키지 간에는 연관성이 존재한다. 그래서 npm install 명령어로 패키지를 설치하는 순간, 연관된 모든 패키지가 같이 설치된다.

3. index.js 생성

  • index.js 이름으로 파일을 생성하고 아래와 같이 코드를 작성해 node index.js 명령어를 통해 웹 서버를 실행시킬 수 있다.
node [실행시킬 파일명]
const express = require('express')  // express 모듈 불러오기
const app = express()  // 서버 생성
const port = 8080

// 클라이언트에서 HTTP 요청 메서드 중 GET을 이용해서 'host:port'로 요청을 보내면 실행되는 라우트
app.get('/', (req, res) => {
  res.send('Hello World!')
})

// app.listen 함수를 사용해서 서버 실행
// 클라이언트는 'host:port'로 노드 서버에 요청을 보낼 수 있다.
app.listen(port, () => {
  console.log(`서버가 실행됩니다. http://localhost:${port}`);
});

  • 웹 브라우저 주소창에 http://localhost:8080을 입력하고 실행하면 아래와 같이 브라우저 창에 'Hello World'가 나오는 것을 확인할 수 있다.

3-1. nodemon 모듈 설치

  • 애플리케이션을 개발할 때는 쿼리문과 라우터를 계속해서 추가하거나 변경하게 된다. 이때마다 서버를 재시작하는 것은 굉장히 불편하고 비효율적일 것이다.

  • nodemon은 node monitor의 약자로, 특정 디렉토리 혹은 파일을 감시하고 있다가 변경사항이 발생하면 Node.js 애플리케이션을 재시작하는 모듈이다. nodemon은 npm install --save-dev nodemon으로 설치할 수 있다.

npm install --save-dev nodemon

  • nodemon이 설치되고 나면 Node.js를 실행시킬 때 변경 사항을 감시하고 싶은 파일을 지정할 수 있다. nodemon으로 지정된 파일은 변경 사항이 발생해도 Node.js를 다시 실행시킬 필요 없이 자동으로 반영된다.

  • Node.js 애플리케이션을 실행할 때 node 명령어 대신 nodemon 명령어를 사용하면 애플리케이션이 실행되고, 동일한 디렉토리에 있는 파일에 변경 사항이 발생하면 Node.js 애플리케이션을 재실행한다.

nodemon index.js
  • 이제 index.js 파일과 같은 디렉토리에 있는 파일의 소스 코드가 변경되면 nodemon이 index.js를 다시 실행해 주기 때문에 수동으로 애플리케이션을 종료하고 재실행 할 필요가 없다. 그리고 nodemon 명령어를 package.json의 scripts에 등록해 쉽게 사용할 수 있도록 한다.
{
  "name": "project",
  "version": "1.0.0",
  "main": "index.js",
  "description": "",
  "scripts": {
    "dev": "nodemon index.js", // npm run dev 명령어를 실행하면 index.js 파일을 감시한다.
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.19.2"
  },
  "devDependencies": {
    "nodemon": "^3.1.4"
  }
}
  • 만약 특정 디렉토리만 감시하고 싶다면 다음과 같이 실행한다.
nodemon --watch [감시 대상] [재실행 파일]
  • 다음은 mysql 폴더를 감시하고 변경 사항이 발생하면 index.js를 재실행하는 명령어다.
nodemon --watch mysql index.js

4. cors

  • CORS(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용해서 도메인 또는 포트가 다른 서버의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제를 말한다. 일반적으로 Node.js로 웹 서버를 별도로 구성하는 경우 클라이언트와 도메인 또는 포트가 별도의 서버로 구동한다. 이러한 겨우 클라이언트의 요청은 브라우저 보안 문제로 인해 정상적인 접근을 할 수 없다.

  • CORS 도메인과 포트를 지정해서 권한이 있는 클라이언트만 접근할 수 있도록 접근 권한을 부여하고 관리할 수 있는 미들웨어다. npm install cors 명령어로 설치할 수 있다.

npm install cors

미들웨어(Middleware)

  • 미들웨어 함수는 요청 객체, 응답 객체 그리고 애플리케이션의 요청-응답 주기에서 다음 함수에 접근할 수 있는 함수를 말한다. 다시 말해, 미들웨어 모듈이란, 요청(request)과 응답(response)의 중간(middle)에서 목적에 맞는 특정 기능을 하는 함수다.

  • 브라우저에서 Origin이란 URL 구조의 프로토콜, 호스트, 포트를 합친 것을 말한다. 그래서 Cross-Origin이란 서로 다른 Origin(출처), 즉 프로토콜, 도메인 혹은 포트 중 하나라도 다르면 다른 Origin(출처)로 인식하고, CORS 설정을 하지 않으면 접근할 수 없도록 하는 것이다.

  • 예를 들어, 프론트엔드에서 프로젝트를 로컬에서 실행하면 3000번 포트로 실행되는데 서버는 8080포트를 사용하고 있을 경우 포트가 다르므로 서로 다른 출처로 인식하기 때문에 cors 에러가 발생한다.

const express = require('express');
const cors = require('cors');
const app = express();
const port = 8080;

const corsOptions = {
  origin: 'http://example.com', // 허용할 도메인 설정
  optionsSuccessStatus: 200
}

app.use(cors(corsOptions)); // cors를 모든 라우터에 적용

app.get('/products/:id', (req, res, next) => {
  res.json({msg: 'This is CORS-enabled for all origins'});
});

app.listen(port, () => {
  console.log(`서버가 실행됩니다. http://localhost:${port}`);
});
  • 다음과 같이 특정 라우터에만 적용할 수도 있다.
const express = require('express');
const cors = require('cors');
const app = express();
const port = 8080;

const corsOptions = {
  origin: 'http://example.com', // 허용할 도메인 설정
  optionsSuccessStatus: 200
}

// 특정 라우터에만 cors 적용
app.get('/products/:id', cors(corsOptions), (req, res, next) => {
  res.json({msg: 'This is CORS-enabled only example.com'});
});

app.listen(port, () => {
  console.log(`서버가 실행됩니다. http://localhost:${port}`);
});
profile
Donggu(oo)
이전 포스트

Node.js로 서버 만들기(HTTP 트랜잭션)

다음 포스트

[Express] - 라우팅 처리

0개의 댓글

관련 채용 정보