본문 바로가기
도서로 공부하는 프로그래밍/코딩 자율학습

[NodeJS] 익스프레스 서버 만들기

by 열공노년 2024. 4. 12.
반응형

새로운 디렉터리에 익스프레스 서버 만들기

간단한 익스프레스 서버입니다. 'localhost:3000'으로 접근하면 "Hello Express"를 반환하는 서버입니다. express 패키지를 로딩해 express에 할당합니다. 

const express = require("express"); // express 모듈 불러오기
const app = express(); // express를 초기화와 app에 할당
const port = 3000; // 포트 번호 할당

app.get("/", (req, res) => { // "/"으로 GET 요청이 오면 실행
    res.set({ "Content-Type": "text/html; charset=utf-8" }); // 헤더 값 설정
    res.end("Hello Express"); // 브라우저에 표현
});

app.listen(port, () => { // 서버가 기동된 경우 요청을 기다림
    console.log(`START SERVER : use ${port}`); // 콘솔에 문자 "START SERVER : use 3000" 출력
});

VSCode에 코딩된 상태

 

'node index.js'로 실행한 결과입니다. 브라우저에 'localhost:3000'을 입력하거나 '127.0.0.1:3000'을 입력했을 때 만나는 문자열입니다. 코딩된 내용과 브라우저를 겹쳐서 캡처했습니다.

코딩 내용과 브라우저 출력 상태

 

Node.js 라이브러리로 만든 서버를 익스프레스로 구현하기

기본 구조는 학습됐습니다. 전에 만든 서버를 익스프레스로 만듭니다. res.json() 함수는 JSON 타입으로 보여주고, 캐릭터셋도 자동으로 utf-8로 설정해 줍니다. 

간단하게 수정됨

 

수정된 내용은 urlMap으로 url 맵핑을 없애고, app.get() 함수에 등록했습니다. 많은 URL이 있다면 함수 하나하나를 맵핑해야되는 수고로움이 있습니다. express에서는 app.get() 함수에 설정을 추가하면 됩니다.

 

Node.js의 기본적인 방법과 Express 웹 프레임워크 사용의 차이

Node.js 기본 방식 사용 express 모듈 사용

첫 번째 이미지에서는 Node.js의 내장 `http` 모듈을 사용하여 서버를 만들고 있으며, URL 라우팅을 수동으로 관리하고 있습니다. 이 방식은 Node.js의 핵심 기능만을 사용하여 HTTP 서버를 구축하고 있으며, 라우팅 로직을 직접 작성해야 합니다. 

두 번째 이미지에서는 `express` 모듈을 사용하여 서버를 구성하고 있습니다. Express는 Node.js의 `http` 모듈을 추상화하여 더 간단한 API를 제공하는 웹 프레임워크로, 라우팅, 미들웨어 지원, 템플릿 엔진 통합 등의 추가 기능을 제공합니다. 이 경우, `app.get`과 같은 메서드를 통해 라우팅을 훨씬 간단하게 설정할 수 있습니다.

첫 번째 이미지에서는 `if` 문을 사용하여 각 URL 경로에 따라 다른 함수를 호출하는 반면, 두 번째 이미지에서는 Express의 라우팅 메소드를 사용하여 각 경로에 대한 핸들러 함수를 정의합니다. Express를 사용하면 코드가 더욱 선언적이고, 가독성이 높아집니다. 또한, Express는 라우팅 외에도 다양한 HTTP 관련 기능을 간편하게 사용할 수 있게 해 줍니다.

두 코딩의 차이는 Node.js의 기본적인 방식과 Express라는 웹 프레임워크를 사용한 방식 사이의 차이입니다. Express를 사용하면 개발 과정이 단순화되고, 웹 서버 기능을 더 쉽고 효율적으로 구축할 수 있습니다. 코딩의 길이도 10줄 이상 줄어들었습니다.

 

정리

express 모듈을 사용하여 웹 프레임워크로 작성된 서버가 훨씬 간단하고 관리가 용이해집니다. URL이 더 복잡해지면 그 성과는 더욱 확실해지겠습니다.

반응형