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

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

예를 들면 바닐라로 SPA를 제작했을 때 각각의 페이지를 불러와야 하는 경우가 있다.

 

그렇기 때문에 나는 프론트엔드 개발잔데, '내가? 왜?'라는 생각보다는

웹 개발자라고 하더라도, 간단하게 서버를 만드는 방법 정도는 알아두면 좋다.

 

Node.js

우선 node.js에 대해 알아야 한다.

node.js는 크롬 브라우저의 V8 엔진으로 빌드된 또 다른 자바스크립트의 실행 환경, 즉 런타임 환경이다.

따라서 node.js를 사용하면 웹 브라우저의 외부에서 자바스크립트를 실행할 수 있다.

 

하지만 node.js 만으로 복잡한 웹 서버를 구축하는 것은 다소 번거롭고 시간이 많이 소요될 수 있기 때문에,

express를 사용하면 조금 더 편리하게 웹 서버를 구축할 수 있다.

express는 node.js 위에 구축된 프레임워크로, express를 사용하면 node.js의 기능을 더욱 효율적으로 활용할 수 있다.

 

다운로드

node.js는 공식 사이트에서 다운로드할 수 있다.

https://nodejs.org/en/download 에 접속한 다음, 내 컴퓨터 환경에 맞게 선택 후 (LTS)라고 적혀있는 버전을 다운로드하면 된다.

 

 

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

node-v

 

그럼 설치된 node.js의 버전이 알맞게 출력된다.

확인을 했다면, 이제 서버를 구축할 수 있는 상태가 된 것이다.

 

 

폴더 생성

서버 코드를 구분해주기 위해, sever 폴더 내부에 js 파일을 하나 만들어준다.

파일에는 console.log('hello');를 작성해 보고, 터미널에 다음과 같은 명령어를 작성 후 엔터를 눌러보면

node ./server/server.js

 

작성한 hello라는 단어가 출력되는 것을 볼 수 있다.

해당 명령어는 node.js에게 server 폴더 안에 있는 server.js 파일을 실행하라는 명령어이기 때문에,

명령에 따라 server.js 파일의 코드가 실행되는 것이다.

 

Express.js

hello 가 알맞게 출력되는 것을 확인했다면, 이제부터는 Express.js를 사용하여 실제 웹 서버를 구축해 보자.

 

express.js는 node.js의 기능을 확장하여 더욱 간결하고 효율적으로 웹 서버를 개발할 수 있게 도와주는 프레임워크로,

이를 통해 복잡한 라우팅, 요청 처리, 그리고 응답 관리를 쉽게 처리할 수 있다.

 

먼저, Express.js를 설치하기 위해 새로운 Node.js 프로젝트를 시작해야 한다.

터미널에서 npm 초기화를 진행해야 하는데, npm (Node Package Manager)은 자바스크립트를 위한 패키지 관리자이다.

 

node.js를 사용하는 개발자들에게 필수적인 도구로,

npm을 사용하면 다양한 라이브러리와 모듈을 쉽고 효율적으로 관리할 수 있다.

npm init -y

 

해당 명령어는 node.js 프로젝트를 초기화하고, 프로젝트에 필요한 데이터들을 package.json이라는 파일에 작성해 주는 명령어다.

 

끝에 -y를 작성하는 이유는, npm init이 사용자에게 묻는 모든 질문에 대해

기본값으로 자동 응답할 수 있도록 해주는 옵션이기 때문이다.

 

package.json 파일이 생성된 것을 확인했다면, 이제 node.js에서 express를 사용하기 위해

다음과 같은 명령어를 통해 express를 설치해 보자.

npm install express

 

설치가 완료되었다면, 이제 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`);
});

 

(코드를 하나씩 뜯어서 자세하게 살펴보자)

const express = require('express');

먼저, 웹 서버와 API를 쉽게 구축할 수 있게 해주는 node.js의 프레임워크인 express 모듈을 가져와준다.

node.js에서 특정 모듈을 가져올 때에는 require라는 함수를 사용한다.

 

const path = require('path');

그다음, path 모듈을 가져와야 하는데, path 모듈은 파일 시스템의 경로를 다루기 위해 사용되는 모듈이다.

이 path 모듈을 사용하면 파일 경로를 쉽게 조작하고 생성할 수 있다.

 

const app = express();

그리고 이제 express 함수를 호출해서 express 애플리케이션 객체를 생성하고, app이라는 이름의 상수에 할당해 준다.

이 애플리케이션 객체는 웹 애플리케이션을 구성하고 실행하는데 필요한 모든 기능을 제공하는 객체이다.

 

const PORT = 3000;

그다음 서버가 계속해서 듣고 있을 포트 번호를 설정해주어야 한다. 우리는 포트번호를 3000번으로 설정해 주자.

 

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

위의 코드는 app 객체에 use라는 메서드를 사용해서 express 애플리케이션에 미들웨어를 추가해 주는 코드다.

여기서 미들웨어란, express.js와 같은 웹 프레임워크에서 요청과 응답, 즉 request와 response 객체를 수정 및 종료하고,

request를 보내는 기능을 할 수 있도록 도와주는 함수라고 생각하면 된다.

이렇게 use 메서드를 사용했다면, 이제 메서드의 내부에 인자를 작성해야 하는데,

우리는 정적 파일인 index.html 파일을 제공하는 제공하는 미들웨어를 작성해 보자.

 

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을 작성하고, 옆에는 상위 폴더로 올라갈 수 있도록 ‘..’를 작성해 코드를 완성해준다.

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

 

우리가 만들고 있는 이 서버는, 클라이언트의 요청에 대해 적절한 '응답'을 제공해주어야한다.

따라서 HTTP GET 요청을 처리해야하는데, 이는 클라이언트가 서버로부터 어떠한 리소스를 요청할 때 사용하는 HTTP 메서드이다.

HTTP는 웹에서 클라이언트와 서버간에, 데이터를 주고받기 위한 어떠한 규칙이다.

 

결론적으로 우리가 만드는 서버는, 클라이언트와 서버의 통신을 하기 위해

이들이 통신할 수 있는 규칙인 HTTP의 GET이라는 요청을 사용해야하한다는 것이다.

 

HTTP에는 GET, POST, PUT등과 같은 여러가지 메서드들이 있는데,

우리는 이 메서드들중에서 서버로부터 데이터를 요청하고 조회할 수 있는 기능인 GET 요청을 사용해보자.

 

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

node.js에서 HTTP GET 요청을 사용하는 방법은 간단하다.

express 함수의 호출을 통해 생성한 애플리케이션 객체인 'app'을 사용하면 된다.

 

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

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

 

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

 

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

이제 마지막으로 express 애플리케이션에서 서버를 시작하고, 서버가 우리가 지정한 3000번 포트에서

어떠한 요청을 들을 수 있도록 설정해보자. 마찬가지로 app 객체를 사용한다.

 

우리가 지정한 3000번 포트에서 request를 들을 수 있도록하기 위해서는 listen 이라는 메서드를 사용하고,
작성해둔 PORT 상수를 첫 번째 매개변수로, 그리고 서버가 성공적으로 실행되었는지를 확인할 수 있게
콘솔에 출력될 문장을 작성해준다.

이렇게 코드를 작성하면, 서버가 성공적으로 실행되었을 때 터미널에 'START SERVER' 가 출력된다.

 

프론트엔드 개발자라고해서, 클라이언트 기능만 개발해야되는 것은 아니다. 

이렇게 간단하게라도 스스로 서버를 구축할 수 있다면, 앞으로 웹 서비스를 개발하는데 큰 도움이 될 것이다.

---

본 글의 내용은 '한 번에 끝내는 자바스크립트' 강의 내용을 포함하고 있습니다.

강의 수강을 원하는 분들은, 아래의 쿠폰을 사용해 강의를 수강할 수 있습니다.

 

쿠폰 번호 : 18056-e96df6cbb781
쿠폰 기간 : 11월 30일 자정까지
강의 링크 : https://inf.run/WfRmY

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 강의 | 효빈 Hyobin - 인프런