Express.js로 간단한 서버 만들기

웹 개발을 하다 보면, 간단하게 서버를 제작해야하는 경우가 발생합니다.

예를 들어보자면 다음과 같은 경우들이 있죠. 모두 한 번쯤은 겪어봤을 것이라고 생각합니다.

• 자바스크립트로 SPA를 개발할 때, 브라우저의 기본 라우팅이 올바르게 작동하지 않아 새로고침하거나 직접 URL을 입력했을 때 404 에러가 발생하는 경우
• 백엔드가 준비되지 않았을 때, 간단한 API를 제작해 테스트를 해야하는 경우

그렇기 때문에 '프론트엔드 개발자인 내가 왜? 서버를 만들 수 있어야하지?' 라는 생각보다는,
웹 개발자라고 하더라도 간단하게나마 서버를 만드는 방법 정도는 알아두면 좋습니다.

그럼 이제 간단하게 서버를 만드는 방법을 차근차근 알아봅시다.

Node.js

우리는 자바스크립트를 사용할 줄 아는 프론트엔드 개발자이기 때문에, Node.js를 사용하면 간단하게 서버를 제작할 수 있습니다.

Node.js는 크롬 브라우저의 V8 엔진으로 빌드된 또 다른 자바스크립트의 실행 환경, 즉 런타임 환경인데요,
따라서 Node.js를 사용하면 웹 브라우저의 외부에서 자바스크립트를 실행할 수 있는 것입니다.

하지만 node.js 만으로 복잡한 웹 서버를 구축하는 것은 다소 번거롭고 시간이 많이 소요될 수 있기 때문에,
우리는 Express.js 라는 것을 사용해서 웹 서버를 조금 더 편리하게 구축해봅시다.

Express.js는 Node.js 위에 구축된 프레임워크로, Express를 사용하면 Node.js의 기능을 더욱 효율적으로 활용할 수 있는데요, 이들을 사용하기 위해서는 가장 먼저 Node.js 설치가 필요합니다.

Node.js 다운로드

Node.js를 사용하려면, 공식 사이트에서 Node.js를 다운로드 해주어야합니다.
https://nodejs.org/en/download 에 접속한 다음, 내 컴퓨터 환경에 맞게 선택 후 'LTS' 라고 적혀있는 버전을 다운로드해줍니다.

다운로드 버튼을 눌러서 Node.js를 설치했다면, 이제 터미널에 다음과 같은 명령어를 입력해줍시다.

node -v

위의 명령어를 터미널에 입력하면 설치된 Node.js의 버전이 알맞게 출력이 됩니다.
확인을 했다면 이제 서버를 구축할 수 있는 상태가 된 것입니다.

폴더 생성

현재 코드가 작성되어 있는 폴더에서, 서버 코드를 구분해주기 위해 'server'라는 새로운 폴더를 만들고
폴더 내부에 'server.js'와 같은 js 파일을 하나 만들어줍시다.

그리고 파일에는 console.log('hello server!'); 를 작성하고,
터미널에는 아래와 같은 명령어를 작성 후 엔터를 눌러보면,

node ./server/server.js

터미널에 'hello server!' 라는 문장이 출력되는 것을 볼 수 있습니다.

우리가 작성해준 명령어는, Node.js에게 server 폴더 내부에 있는 server.js 파일을 실행하라는 명령이기 때문에 명령에 따라 server.js 파일의 코드가 알맞게 실행이 된 것입니다.

Express.js

터미널에 'hello server!'까지 출력을 해보았으니, 이제는 본격적으로 Express.js를 사용해서
실제 웹 서버를 구축해봅시다.

Express.js는 Node.js의 기능을 확장해, 더욱 간결하고 효율적으로 웹 서버를 개발할 수 있게 도와주는 프레임워크로, 이를 통해 복잡한 라우팅, 요청 처리, 그리고 응답 관리를 쉽게 처리할 수 있습니다.

설치

먼저 Express.js를 설치하기 위해 새로운 Node.js 프로젝트를 시작해볼건데요,
동일하게 터미널에 명령어를 작성해주겠습니다.

npm init -y

npm init 명령어는, npm 초기화를 진행하는 명령어입니다.

npm(Node PackageManager)은 자바스크립트를 위한 패키지 관리자로, npm을 사용하면 다양한 라이브러리와 모듈을 쉽고 효율적으로 관리할 수 있습니다.

또한 명령어의 끝에 -y를 작성하는 이유는, npm init 명령어가 사용자에게 묻는 모든 질문에 대해
기본값으로 자동 응답할 수 있도록 해주는 옵션이기 때문입니다.

해당 명령어를 실행하면, 폴더안에 'package.json' 파일이 생성된 것을 볼 수 있습니다.
package.json 파일이 생성된 것을 확인하고, 이제 아래의 명령어를 통해 Express.js를 설치해봅시다.

npm install express

JS 코드 작성

Express.js 설치 후, server.js 파일에는 다음과 같은 코드를 작성해줄겁니다.

const express = require('express');
const path = require('path');
const app = express();
const PORT = 3000;

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

app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '..', 'index.html'));
});

app.listen(PORT, () => {
    console.log(`START SERVER`);
});

이렇게 아주 짧은 코드만으로 간단한 서버를 개발할 수 있습니다.

위의 코드를 하나씩 뜯어서 자세하게 살펴봅시다.

express

const express = require('express');

먼저, 웹 서버와 API를 쉽게 구축할 수 있게 해주는 Node.js의 프레임워크인 express 모듈을 가져와줍니다. Node.js에서 특정 모듈을 가져올 때에는 require라는 함수를 사용합니다.

path

const path = require('path');

그 다음 path라는 모듈을 가져와야 하는데요, path 모듈은 파일 시스템의 경로를 다루기 위해 사용되는 모듈입니다. 이 path 모듈을 사용하면 파일 경로를 쉽게 조작하고 생성할 수 있습니다.

app

const app = express();

그리고 이제 express 함수를 호출해서, Express 애플리케이션 객체를 생성하고 app이라는 이름의 상수에 할당을 해줍니다. 이 애플리케이션 객체는 웹 애플리케이션을 구성하고 실행하는데 필요한 기능을 제공하는 객체입니다.

PORT

const PORT = 3000;

VSCode에서 'Live Server'라는 익스텐션을 설치하고 사용하면 http://127.0.0.1:5500 주소로 이동하는데요, 뒤의 5500가 '포트 번호'입니다.

이와 마찬가지로 우리도 만들고 있는 이 서버가 3000번 포트에서 듣고있을 수 있도록, PORT라는 상수에 3000이라는 번호를 할당해줍니다.

app.use()

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

이제 생성된 app 객체에 use 메서드를 사용해서 express 애플리케이션에 미들웨어를 추가해봅시다.

여기서 '미들웨어'는, Express.js와 같은 웹 프레임워크에서 요청과 응답, 즉 request와 response 객체를 수정 및 종료하고, request를 보내는 기능을 할 수 있도록 도와주는 함수라고 생각하면 좋습니다.

use 메서드 안에는 express에서 제공하는 내장 미들웨어 함수인 express.static()을 사용하면, 정적 파일을 제공하는 미들웨어를 생성할 수 있습니다. static 함수에는 제공할 정적파일, 즉 index.html에 접근할 수 있도록 server.js 파일의 상위 폴더를 지정해줍니다.

__dirname을 사용하면 현재 파일의 경로를 쉽게 작성할 수 있다.

그 다음 ‘/..’ 를 사용해 server.js 파일의 상위 폴더의 경로를 지정해주어야 하는데요,
‘/’ 와 같은 경로 구분자는 다음과 같이 플랫폼마다 다르기 때문에, 해당 방식보다 조금 더 안전한 방식으로 경로를 나타내봅시다.

위에서 생성해주었던, 경로를 쉽게 조작할 수 있는 path 모듈을 사용하면 경로를 쉽게 나타낼 수 있습니다.
path 모듈이 가지고 있는 join 메서드를 사용하면 파일 경로를 편리하게 나타낼 수 있는데요,
join 메서드 내부에 join('src', ‘components’, ‘Content.js’);와 같이 작성하면, ‘src/components/Content.js’ 경로를 나타낼 수 있습니다.

따라서 우리는, 현재 파일의 경로인 __dirname을 작성하고, 옆에는 상위 폴더로 올라갈 수 있도록 ‘..’를 작성해 코드를 완성해줍시다.

app.get()

이렇게 미들웨어를 우리가 코드를 작성한 파일들에 접근할 수 있도록 설정해주었으니,
이번에는 서버가 모든 경로에 대해 index.html 파일을 response 할 수 있도록 코드를 작성해보겠습니다.

우리가 만들고 있는 이 서버는, 클라이언트의 요청에 대해 적절한 '응답'을 제공해주어야합니다.
따라서 HTTP GET 요청을 처리해야하는데, 이는 클라이언트가 서버로부터 어떠한 리소스를 요청할 때 사용하는 HTTP 메서드입니다.

HTTP는 웹에서 클라이언트와 서버간에, 데이터를 주고받기 위한 어떠한 규칙으로, 결론적으로 우리가 만드는 서버는 클라이언트와 서버의 통신을 하기 위해 이들이 통신할 수 있는 규칙인 HTTP의 GET이라는 요청을 사용해야하한다는 것이죠.

HTTP에는 GET, POST, PUT,DELETE 등과 같은 여러가지 메서드들이 있는데요, 우리는 이 메서드들중에서 서버로부터 데이터를 요청하고 조회할 수 있는 기능인 GET 요청을 사용해봅시다.

app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '..', 'index.html'));
}); 

Node.js에서 HTTP GET 요청을 사용하는 방법은 간단합니다. express 함수의 호출을 통해 생성한 애플리케이션 객체인 app을 사용하면됩니다.

위의 코드처럼, app의 get 메서드를 통해 첫번째 인수로는 '처리할 특정 경로'를, 그리고 두번째 인수로는 '처리할 로직'인 콜백함수를 작성합니다.

모든 경로에 매칭되는 경로 패턴인 '/*'는 와일드카드 패턴으로, 모든 경로에 매칭이 되기 때문에 유용하게 사용됩니다.

콜백함수로는 매개변수로 request와 response를 받는 함수를 작성해줄건데요, 이 매개변수들을 통해 요청을 처리하고 응답을 보내는 역할을 할 수 있습니다.

우리는 클라이언트에서 요청이 들어오면, 응답으로 index.html 파일을 돌려줄 예정이므로, response 응답 객체의 파일을 응답으로 보내는 메서드인 sendFile 이라는 메서드를 사용해주겠습니다. 마찬가지로, sendFile 메서드의 괄호 안에는 path.join 메서드를 사용해 index.html 파일의 경로를 작성해줍시다.

app.listen()

이제 마지막으로! express 애플리케이션에서 서버를 시작하고, 서버가 우리가 지정한 3000번 포트에서 요청을 들을 수 있도록 설정을 해주겠습니다. 마찬가지로 app 객체를 사용합니다.

app.listen(PORT, () => {
    console.log(`START SERVER`);
});

우리가 지정한 3000번 포트에서 request를 들을 수 있도록 하기 위해서는, listen이라는 메서드를 사용합니다.

listen 메서드의 내부에는 우리가 작성해둔 포트번호가 적혀있는 PORT상수를 작성해줍니다.
그 다음, 두 번째 인수로는 서버가 성공적으로 실행되었는지를 알 수 있도록 console.log를 사용해서 START SERVER를 출력해주도록 하겠습니다. 이렇게 코드를 작성하면 서버가 성공적으로 실행되었을 때, 터미널에 START SERVER라는 문장이 나타나게 됩니다.

마무리

프론트엔드 개발자라고 해서 클라이언트 기능만 개발해야 되는 것은 아닙니다. 이렇게 간단하게라도 스스로 서버를 구축할 수 있다면, 앞으로 웹 서비스를 개발하는데 큰 도움이 될 것입니다.

---

🎁 선물

본 글의 내용은 '인프런-한 번에 끝내는 자바스크립트' 강의의 일부입니다.
강의에 관심이 있는 분들은 아래의 쿠폰을 통해 30% 할인 가격으로 강의를 구매하실 수 있습니다.

강의 링크 : https://inf.run/WfRmY
쿠폰 번호 : 18066-6968df7d7c09
발급 기간 : 24년 11월 30일 자정