이번 글에서는 캘린더 웹 애플리케이션 "피플(Piece-Plan)" 프로젝트의 서버 로직을 구현하면서 해결했던 이슈를 소개하고자 한다.
🔥 문제 상황
우선 이슈를 소개하기 이전에 상황 설명을 잠깐 하자면, 프로젝트 내에서 express.js 모듈을 사용하여 서버 로직과 Routing을 구현한 상태였다. /login, /signup과 같이 Route 분기가 하나인 경우의 페이지는 아주 정상적으로 Routing이 동작했다. 그러나 일별 캘린더 페이지를 렌더링할 때 이슈가 발생했다. 일별 캘린더 페이지는 /plan이라는 Route 뒤에 날짜를 구분하기 위해서 임의의 가상 경로를 중첩하여 지정하는 식으로 구현했었다. /plan/20221022와 같은 방식으로 말이다. 그러다 보니 Routing이 정상적으로 동작하지 않는 문제가 발생하고 만 것이다.
🔨 해결 과정
❌ 문제 해결 전 서버 로직
// npm 설치 후 import 해온 모듈 및 미들웨어
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
// 환경 변수 파일 연결
require('dotenv').config();
// 서버 객체 생성 및 PORT 연결
const app = express();
const PORT = process.env.PORT || 5500;
// 루트 경로 연결
app.use(express.static('public'));
문제 해결 이전의 코드는 위와 같았다. 마지막 줄을 유심히 보면, Route로 정적 파일을 제공 받는 경로를 public으로만 지정해놓았기 때문에 /login, /signup까지는 정상적으로 동작하지만 가상 경로가 하나 더 중첩되는 순간 /plan/20221022가 되어 정상적으로 정적 파일에 대한 경로를 인식하지 못했던 것이다.
⭕ 문제 해결 후 서버 로직
// npm 설치 후 import 해온 모듈 및 미들웨어
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
// 환경 변수 파일 연결
require('dotenv').config();
// 서버 객체 생성 및 PORT 연결
const app = express();
const PORT = process.env.PORT || 5500;
// 루트 경로 연결
app.use(express.static('public'));
app.use('/plan', express.static('public'));
문제를 해결할 수 있었던 로직은 위와 같다. 차이점이 있다면 마지막 줄에 express.static 미들웨어를 하나 더 호출한 것뿐이다. 그럼 여기서 express.static 미들웨어의 사용법에 대해 잠깐 짚고 넘어가자.
💡 express.static 미들웨어 사용법
: 공식 문서를 보면 다음과 같이 나와 있는 것을 확인할 수 있다.
express.static(root, [options]): 기본 경로를 인수로 전달할 수 있지만, 추가적으로 옵셔널한 인수를 하나 더 전달할 수 있다는 이야기다.
app.use('/static', express.static('public')): 위와 같은 방식으로 지정하면
/static/을 정적 파일 경로로 지정하겠다는 이야기다.app.use(express.static('public')) app.use('/static', express.static('public')): 또한 위와 같이 미들웨어를 여러 번 호출하면 여러 개의 정적 파일 경로를 지정할 수도 있다.
이처럼 express.static 미들웨어를 여러 번 호출하면 여러 개의 정적 파일 경로를 지정할 수 있을 뿐만 아니라, 옵셔널한 인수를 추가적으로 전달하여 가상으로 설정한 경로를 정적 파일 기본 경로로 지정할 수도 있다. 이를 활용하여 가상 경로 Routing과 관련된 문제를 손쉽게 해결할 수 있었다.
🤔 느낀 점
항상 새로운 기술 스택을 공부하면 느끼는 점이지만, 공식 문서가 최고의 해답지다. 문제를 해결하기 위해 습관적으로 구글링부터 시도했는데 돌고 돌아 공식 문서에서 명쾌한 해답을 찾았다. 명심, 또 명심하자. 공식 문서부터 확인할 것.
