Node.js Express 로컬 서버 구축(2) Express 라우팅

티스토리 뷰

C++ 200제/코딩 IT 정보

Node.js Express 로컬 서버 구축(2) Express 라우팅

vicddory 2020. 3. 4. 07:00

시리즈 목록
Node.js Express 로컬 서버 구축(1): npm 도입
Node.js Express 로컬 서버 구축(2): Express 라우팅
Node.js Express 로컬 서버 구축(3): JSON 반환 stub API
Node.js Express 로컬 서버 구축(4) Request 다른 서버 이미지 얻기

글 순서

목적

Node.js와 Express를 이용하여 PC에 로컬 서버 띄우기

이 글의 결론

브라우저에서 "localhost:8080" 연결하면 HTML 파일을 얻음
HTML 파일에 연결된, CSS, JS, IMG 파일도 얻음

대상자

WEB 프런트 담당자
HTML, CSS, JavaScript(es2015 포함) 기본 문법을 이해하는 사람
HTTP 통신 GET, POST 등을 어느 정도 이해하는 사람 (대충 알아도 됨)
검은 화면에 명령어 넣는 것이 좋은 사람

환경 버전

Windows10
Node.js (권장 버전) 10.15.01
npm 6.4.1
Express 4.16.4

프레임워크 활용

Node.js의 핵심 모듈은 최소한의 기능만 보유하여 간소합니다.

요청(리퀘스트)에 대한 적절한 응답을 선택하는 라우팅 작업 등을 처음부터 쓰는 것은 좀 귀찮아 Node.js Express라는 프레임워크를 이용합니다.

web 애플리케이션을 구축하는 데 편리한 여러 자료가 있으며, 공식 사이트엔 한국어 버전도 존재합니다. 단, 최신 버전은 번역되어 있지 않습니다.

Express (한국 어)

또한 Eexpress를 이용한 WEB 응용 프로그램을 제작할 때, 양식을 미리 만들어주는 express-generator라는 편리한 툴도 있습니다.

프레임워크 구조를 먼저 파악한 뒤, 다음부터는 generator 같은 도구를 이용하는 것이 좋다고 생각합니다.

Express 응용 프로그램 생성기

Express 설치

npm을 이용하여 설치합니다.

프로젝트 작업 폴더로 이동하여 다음 명령을 실행합니다.

"npm씨, express 설치하세요. 설치할 때, package.json 정리도 하세요."

$ npm install express --save

--save가 package.json에 쓰라고 지시하는 명령어 옵션입니다.

설치가 성공적으로 완료되면 package.json이 아래처럼 변경됩니다.

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.4"
  }
}

dependencies(종속성, 의존 관계) 항목에 express 이름과 설치된 버전이 포함됩니다.

그리고 작업 폴더 안에 node_modules 폴더가 추가되었습니다.

이 프로젝트에서 설치한 패키지 파일들은 여기에 저장됩니다.

또, package-lock.json이라는 파일이 생성됩니다.

이 파일은 종속성(의존 관계)을 더 엄격하게 관리하기 위한 것으로, 일단 내버려 둡니다. (삭제하지 마세요)

궁금한 분은 관련된 질문과 답변을 찾아보세요.

구글 검색 : npm-package-json.lock 필요한 이유

devDependencies

위에 dependencies란 파일이 있는데, 비슷한 이름의 devDependencies라는 파일도 있습니다.

이 포스트에선 일관되게 dependencies만을 다루지만 npm 설치에 관한 글에서는 devDependencies도 자주 등장하기 때문에, 관련 글을 읽어 보는 것이 좋습니다.

구글 검색 : devDependencies dependencies 차이

서버 구축

폴더 및 파일 준비

우선 정적 파일들을 준비합니다. 작업 폴더는 다음과 같으며 똑같이 준비해주세요.

sample/
  ├　public/
  │    ├ css/
  │    │   └ sample.css 
  │    ├ js/
  │    │   └ sample.js 
  │    ├ img/
  │    │   └ sample.png 
  │    └ index.html
  └ app.js

/public/index.html에는 css, js, img 파일에 대한 링크를 걸어 둡니다. (Node.js Express 루트 경로)

<!DOCTYPE html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>TEST</title>
    <link rel="stylesheet" href="/css/sample.css">
  </head>

  <body>
    <h1>Hello World!</h1>
    <p id="hoge"></p>
    <div>
      <img src="/img/sample.png">
    </div>
    <script src="/js/sample.js"></script>
  </body>
</html>

/public/css/sample.css와 /public/js/sample.js에 적절한 코드를 작성합니다.

/* /public/css/sample.css */
h1 {
  font-size: 1.5rem;
  color: #0000ff;
}
img {
  max-width: 100%;
}

/* /public/js/sample.js */
{
  const el = document.getElementById('hoge');
  el.innerText = 'HAHAHAHAHAHAHA!!!!';
}

WEB 서버 응용 프로그램 파일 만들기

app.js 파일 개요

/app.js 서버 처리 내용을 작성합니다.

/**
 * /app.js
 */ 
// express 모듈 인스턴스 작성
const express = require('express');
const app = express();
// 패스 지정용 모듈
const path = require('path');

// 8080번 포트로 기다림
app.listen(8080, () => {
  console.log('Running at Port 8080...');
});

// 요청 파일 루팅
app.use(express.static(path.join(__dirname, 'public')));

// 기타 리퀘스트에 대한 404 에러
app.use((req, res) => {
  res.sendStatus(404);
});

방금 설치한 express 모듈을 로드합니다.

http 모듈에선 http.createServer 메소드로 서버를 생성하지만, express는 가져온 모듈을 그대로 생성하고 실행합니다.

const express = require('express');
const app = express();

생성된 서버 객체의 listen 메소드를 실행하여 리퀘스트 대기를 시작합니다.

첫 번째 인수는 포트 번호, 두 번째 인수는 시작 후 콜백 함수입니다.

app.listen(8080, () => {...

공식 가이드 : Express Hello World 예제

Express 라우팅

여기까지는 http 모듈 이용할 때와 큰 차이가 없습니다. 다음 코드에선 Express를 이용한 라우팅을 시작합니다.

app.use(express.static(path.join(__dirname, 'public'))));

use 메소드

use 메소드는 루팅 하는 미들웨어(중간 처리하는 함수)를 받습니다. 임의로 편집할 수도 있지만, 여기에서는 Node.js express 정적 메소드 static을 이용합니다.

이 메서드에 정적 파일이 모여있는 (루트 경로) 폴더 경로를 전달합니다. 그러면 하위에 저장된 파일들의 요청을 처리하는 Middleware가 생성됩니다.

path 모듈

static 메소드에 넘겨주는 곳에서 사용합니다. path 모듈은 Node.js 핵심 모듈입니다. 파일 경로를 수정하기 위한 도구가 포함되어 있습니다. 파일 자체의 편집은 불가능합니다.

공식 레퍼런스 : Path (영문)

__dirname

__dirname은 Node.js에서 미리 로드할 필요 없는 모듈이 작성된 파일 경로를 반환합니다.

app.js가 C:/sample/app.js에 있는 경우 C:/sample이 리턴됩니다.

그리고 그 경로와 정적 파일이 저장되어 있는 폴더 이름 public을 path.join 메소드 경로와 이어 붙여 전체 경로인 C:/sample/public을 만듭니다.

정리하면

1. public 폴더까지의 경로(문자열)를 만듬

2. 문자열을 express.static 메소드에 전달하여 정적 파일 라우팅용 미들웨어 만듬

3. 미들웨어를 app.use 메소드에 전달하여 8080 액세스 시에 이용되도록 함

그래서 public/ 이 경로가 실제 사이트의 루트입니다.

따라서 localhost:8080/ 접근하면 public/ 아래의 index.html가 반환됩니다.

루트 경로로 /common/css/sample.css를 지정하면 C:/sample/public/common/css/sample.css가 반환됩니다.

여기에서는 static에 몰아주고 있습니다만, 좀 더 세밀하게 "이 경로의 경우 이 폴더"라고 지정할 수도 있습니다.

첫 번째 인수에 해당 사이트 경로, 두 번째 인수에 MiddleWare(미들웨어)를 전달합니다.

app.use(`/test/sub`, express.static(path.join(__dirname, 'yeh'))));

위의 예에서는 /test/sub로 접속하면 yeh/ 폴더의 파일이 리턴됩니다.

공식 가이드 : 라우팅

공식 가이드 : Express에서 정적 파일 제공

404 Not Found

마지막 코드는 해당 파일이 존재하지 않을 때 404 오류를 반환하도록 설정된 겁니다. "Not Found" 문자열을 반환하는 간단한 내용입니다.

공식 레퍼런스 : res.sendStatus (영어)

동작 확인

자, 이제 명령 프롬프트에서 다음 명령을 실행합니다. (작업 폴더로 이동한 다음)

"node 씨, app.js 파일을 실행하세요!"

$ node app.js

이제 서버가 올라왔습니다. 콘솔에 Running...이 출력되고 있을 겁니다.

그리고 브라우저에서 localhost:8080으로 접속해보세요.

무사히 응답을 받았습니다! !

CSS, JS, IMG 파일도 실행 결과로 받을 수 있습니다.

종료하려면 서버를 실행한 명령 프롬프트에서 Ctrl+C 입력하여 프로세스를 종료합니다.

서버를 시작한 명령 프롬프트에선 다른 명령을 입력할 수 없습니다. 다른 명령 프롬프트를 띄워야 추가 명령어를 입력할 수 있습니다.

저작자표시 비영리 변경금지

코딩 기록

티스토리 뷰