지난시간, history api를 사용해 자바스크립트로 만든 SPA에 라우팅을 적용해보았습니다. 하지만, VSCode에서 제공되는 Live Server를 사용해 자바스크립트를 실행하게 되면, 다음과 같이 모든 상황에서 index.html 파일을 반환하지 않기 때문에 ‘/panda’, ‘/koala’ 와 같은 url에서 새로고침을 할 경우 에러가 발생했는데요,
이를 해결하기 위해 실제 서버 환경을 구축해보도록 하겠습니다. 서버를 구축하는 방법에는 여러 방법이 있지만, 우리는 자바스크립트를 사용하면 보다 쉽게 사용할 수 있는 node.js와 express.js 를 사용해보도록 하겠습니다.
Node.js와 Express.js
node.js는 크롬 브라우저의 V8 엔진으로 빌드된 또 다른 자바스크립트의 실행 환경, 즉 런타임 환경입니다. 따라서 node.js를 사용하면, 웹 브라우저의 외부에서 자바스크립트를 실행할 수 있습니다.
하지만, node.js 만으로 복잡한 웹 서버를 구축하는 것은 다소 번거롭고 시간이 많이 소요될 수 있는데요, 이때 express를 사용하면 조금 더 편리하게 웹 서버를 구축할 수 있습니다. express.js는 node.js 위에 구축된 프레임워크로, express를 사용하면 node.js의 기능을 더욱 효율적으로 활용할 수 있습니다.
node.js
그럼, node.js와 express를 사용해 간단한 서버를 설정하고 SPA에서의 라우팅 문제를 해결하는 방법에 대해 살펴보겠습니다. node.js 를 사용하기 위해서는 먼저 node.js가 설치되어 있어야 합니다. node.js 설치는 node.js의 공식 사이트에서 다운로드 할 수 있습니다.
https://nodejs.org/en/download 에 접속한 다음, 자신의 컴퓨터 환경에 맞게 선택 후 (LTS)라고 적혀있는 버전을 다운로드 해주겠습니다.
다운로드 버튼을 눌러 node.js 설치를 완료 했다면, VSCode의 터미널에
node -v 명령어를 작성해 설치가 알맞게 되었는지 확인해줍니다. 설치가 알맞게 되었는지 확인했다면, 이제 본격적으로 코드를 작성해 웹 서버를 구축해보도록 하겠습니다.server라는 이름의 폴더 내부에 server.js 파일을 만들어 준 다음, server.js 파일에
console.log("hello"); 를 작성해보겠습니다. 그 다음 터미널에 node ./server/server.js 를 작성한 후 엔터를 눌러보면, hello 가 출력되는 것을 볼 수 있습니다. 해당 명령어는 node.js 에게 server 폴더 안에 있는 server.js 파일을 실행하라는 명령어이기 때문에 명령에 따라 server.js 파일의 코드가 실행되어 hello 가 출력됩니다. hello 가 알맞게 출력되는 것을 확인 했다면, 이제부터는 Express.js를 사용하여 실제 웹 서버를 구축하는 방법을 알아보겠습니다. express.js는 node.js의 기능을 확장하여 더욱 간결하고 효율적으로 웹 서버를 개발할 수 있게 도와주는 프레임워크입니다. 이를 통해 복잡한 라우팅, 요청 처리, 그리고 응답 관리를 쉽게 처리할 수 있습니다.
Express.js
먼저, Express.js를 설치하기 위해 새로운 Node.js 프로젝트를 시작해야 합니다. VSCode의 터미널에서 npm 초기화를 진행해보도록 하겠습니다. npm (Node Package Manager)은 자바스크립트를 위한 패키지 관리자입니다. node.js를 사용하는 개발자들에게 필수적인 도구로, npm을 사용하면 다양한 라이브러리와 모듈을 쉽고 효율적으로 관리할 수 있습니다.
코드를 불러오는 중 입니다 ...해당 명령어는 node.js 프로젝트를 초기화하고, 프로젝트에 필요한 데이터들을 package.json이라는 파일에 작성해주는 명령어입니다. 끝에
코드를 불러오는 중 입니다 ...-y를 작성하는 이유는, npm init이 사용자에게 묻는 모든 질문에 대해 기본값으로 자동 응답할 수 있도록 해주는 옵션이기 때문입니다. package.json 파일이 생성된 것을 확인했다면, 이제 node.js에서 express를 사용하기 위해 express를 설치해보도록 하겠습니다.express 설치가 완료 되었다면, 이제 express.js를 사용해서 기본적인 웹 서버를 설정하고, SPA에서 필요한 라우팅을 처리해보겠습니다. 우선 ppt를 통해, 작성해야 하는 코드들에 대해 자세하게 배워본 다음, 코드를 전부 살펴본 이후 VSCode에 직접 코드를 작성해보겠습니다.
먼저, 웹 서버와 API를 쉽게 구축할 수 있게 해주는 node.js의 프레임워크인 express 모듈을 가져오겠습니다. node.js에서 특정 모듈을 가져올 때에는
require라는 함수를 사용합니다. 그 다음, path 모듈을 가져오겠습니다. path 모듈은 파일 시스템의 경로를 다루기 위해 사용되는 모듈입니다. 이 path 모듈을 사용하면 파일 경로를 쉽게 조작하고 생성할 수 있습니다.그리고 이제 불러온
express 모듈을 사용해보겠습니다. express 함수를 호출해서 express 애플리케이션 객체를 생성하고, app 이라는 이름의 상수에 할당해주겠습니다. 이 애플리케이션 객체는 웹 애플리케이션을 구성하고 실행하는데 필요한 모든 기능을 제공하는 객체입니다.그리고, 이제 우리가 사용했던 Live Server 주소인 http://127.0.0.1:5500/ 과 같이 끝에 5500처럼, 서버가 계속해서 듣고있을 포트 번호를 설정해주겠습니다. 우리는 포트번호를 3000번으로 설정해주겠습니다.
코드를 불러오는 중 입니다 ...여기까지 작성을 했다면, 이제는 사용될 서버에 필요한 기능들을 만들어보도록 하겠습니다. 우리가 필요한 서버는, 어떠한 요청을 받던 항상 index.html 파일을 반환해주는 함수입니다. 항상 index.html 파일을 반환해야 새로고침을 하더라도 index.html에 의해 index.js 파일이 실행되어 App.js 가 실행되기 때문입니다.
그렇기 때문에, 먼저
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 GET 요청은 클라이언트가 서버로부터 어떠한 리소스를 요청할 때 사용하는 HTTP 메서드입니다.
HTTP는, 웹에서 클라이언트와 서버간에 데이터를 주고받기 위한 어떠한 규칙을 의미합니다. 결론적으로, 우리가 만드는 서버는 클라이언트와 서버의 통신을 하기 위해, 이들이 통신할 수 있는 규칙인 HTTP의 GET이라는 요청을 사용해야합니다.
HTTP에는
GET, POST, PUT, DELETE와 같은 다양한 메서드들이 있는데요, 우리는 이들 중, 서버로부터 데이터를 요청하고 조회할 수 있는 기능인 GET 요청을 사용합니다. 이 메서드는 주로 데이터를 가져오는 데 사용되며, 요청한 리소스를 서버에서 클라이언트로 전달하는 기능을 합니다.node.js에서 HTTP GET 요청을 사용하는 방법은 간단합니다.
express 함수의 호출을 통해 생성한 애플리케이션 객체인 app을 사용하면 이를 쉽게 사용할 수 있습니다.app의 get 메서드를 사용해주겠습니다. get 메서드의 첫 번째 인자로는 처리할 특정 경로를, 그리고 두 번째 인자로는 처리할 로직인 콜백 함수를 작성합니다. 예를들어, 클라이언트에서 ‘/panda’ 페이지에 접속했을 때에 ‘panda.html’을 틀어줘야한다면, get 메서드의 첫 번째 인자로 ‘/panda’를 적어주고, 두 번째 인자로는 ‘panda.html’로 이동시켜주는 로직의 함수를 작성해줍니다.우리는 App.js 에서
state 값에 따라 각각 다른 동물들의 사진을 틀어주는 기능을 이미 만들어줬기 때문에, 클라이언트에서 어떤 요청이 오든지 항상 index.html 파일을 반환해주면, 웹 페이지가 알맞게 작동하겠죠.이러한 경우, 모든 경로에 매칭되는 경로 패턴인 ‘/*’ 를 사용합니다.
‘/*’는 와일드카드 패턴으로 모든 경로에 매칭되기 때문에, 우리가 원하는 기능을 쉽게 제작할 수 있습니다.콜백 함수로는, 매개변수로
request와 response를 받는 함수를 작성해 줄건데요, 이 매개변수들을 통해 요청을 처리하고 응답을 보내는 역할을 할 수 있습니다.우리는 클라이언트에서 요청이 들어오면
코드를 불러오는 중 입니다 ...response, 응답으로 index.html 파일을 돌려주어야 하므로, response 응답 객체의 파일을 응답으로 보내는 메서드인 sendFile 이라는 메서드를 사용해주겠습니다. 마찬가지로, sendFile 메서드의 괄호 안에는 path.join 메서드를 사용해 index.html 파일의 경로를 작성해주겠습니다.코드를 다음과 같이 작성하면, 모든 GET 요청에 대해 index.html 파일을 응답으로 보내는 라우팅을 정의할 수 있습니다.
이제 마지막으로,
express 애플리케이션에서 서버를 시작하고, 서버가 우리가 지정한 3000번 포트에서 요청을 들을 수 있도록 설정해주겠습니다. 마찬가지로 app 객체를 사용합니다.우리가 지정한 3000번 포트에서
코드를 불러오는 중 입니다 ...request를 들을 수 있도록 하기 위해서는 listen 이라는 메서드를 사용합니다. listen 메서드의 내부에는 우리가 작성해둔 포트번호가 적혀있는 PORT상수를 작성해줍니다. 그 다음, 두 번째 인자로는 서버가 성공적으로 실행되었는지를 알 수 있도록 console.log를 사용해서 ‘start server’를 출력해주도록 하겠습니다. 코드를 이렇게 작성하면, 서버가 성공적으로 실행되었을 때 터미널에 다음과 같이 나타나게 됩니다.이제 실제 VSCode에 직접 코드를 작성하고 서버를 실행시켜주겠습니다. 서버를 실행하려면 터미널에 다음과 같은 명령어를 작성해야합니다.
코드를 불러오는 중 입니다 ...서버가 성공적으로 실행되었을 때 출력되는 ‘START SERVER’ 메세지가 터미널에 알맞게 출력되었다면, 이제 브라우저에서 웹 페이지를 띄워보겠습니다.
localhost의 3000번 포트를 나타내는 localhost:3000 을 작성하고 엔터를 치면, 우리가 제작한 웹 페이지가 알맞게 나타나고, 펭귄, 코알라, 판다 버튼을 누른 다음 새로고침을 눌러봐도, 이전과는 다르게 오류없이 사진들이 알맞게 나타나는 것을 볼 수 있습니다.
프론트엔드 개발자라고 해서 클라이언트 기능만 개발해야 되는 것은 아닙니다. 이렇게 간단하게라도 스스로 서버를 구축할 수 있다면, 앞으로 웹 서비스를 개발하는데 큰 도움이 될 것입니다.
지금까지 바닐라 자바스크립트를 사용해서 SPA를 제작하는 방법과, 이에 필요한 여러가지 개념들에 대해 모두 배워보았습니다. 다음 시간에는, 배운 내용들을 다시 한 번 복습할 겸, 최종 프로젝트를 처음부터 끝까지 함께 개발해보도록 하겠습니다.
먼저 최종 프로젝트에 대해 살펴본 다음, 라이브로 함께 코드를 작성해봅시다. 감사합니다.