express.static() 미들웨어를 이용한 중첩 Routing 구현

💛 nalsae·2023년 5월 9일
1

🔥 트러블 슈팅

목록 보기
2/7
post-thumbnail

 이번 글에서는 캘린더 웹 애플리케이션 "피플(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과 관련된 문제를 손쉽게 해결할 수 있었다.


🤔 느낀 점

 항상 새로운 기술 스택을 공부하면 느끼는 점이지만, 공식 문서가 최고의 해답지다. 문제를 해결하기 위해 습관적으로 구글링부터 시도했는데 돌고 돌아 공식 문서에서 명쾌한 해답을 찾았다. 명심, 또 명심하자. 공식 문서부터 확인할 것.

profile
𝙸'𝚖 𝚊 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚝𝚛𝚢𝚒𝚗𝚐 𝚝𝚘 𝚜𝚝𝚞𝚍𝚢 𝚊𝚕𝚠𝚊𝚢𝚜. 🤔

0개의 댓글