🧐 개요

작업하고 있는 boiler-plate에서

단순 링크 접속시에는 GET 방식을 사용하고 있습니다.

1. 최초 페이지 : domain/
2. 로그인 : domain/login
3. 회원가입 : domain/register
4. 게시판 : domain/board/list/1
5. 글 쓰기 : domain/board/write

위와 같이, 각 기능들이 시작지점(?)이 되는 URL이 다르다보니

public 파일의 공통 JS라던가, CSS를 적용하는 데에 경로 설정에 대한 불편함이 있었습니다.

결론적으론 static 메서드로 간단히 해결되었습니다.

이 포스트에서는 해당 메서드에 관해 정리합니다.

직접 사용한 것을 토대로 하기에 틀린 부분이 있을 수 있습니다.

---

📋 정적 파일

정적(static) 파일은 직접 변화를 주지 않는 이상 공통적으로 적용되는 파일을 의미합니다.

웹에서는 image, css, js 등에 해당되며, Node는 이를 static 메서드로 제공합니다.

---

📋 정적 파일 전달하기

static 메서드의 사용에는 여러 방법이 있습니다.

🎯 기본형

app.use(express.static('public'));

위와 같이 메서드를 사용하면 ' / ' 으로 시작되는 페이지에서

Public 폴더 내에 있는 폴더 및 파일을 접근할 수 있습니다.

public-
	css-
    		stylesheets.css
    	imgs-
        	temp.jpg

폴더 구조가 위와 같다고 할 때,
domain/imgs/temp.jpg 로 사진에 접근가능합니다.

🎯 특정 경로 지정

만약 기준 URL 경로가 ' / '가 아니라면, 경로를 더해줄 필요가 있습니다.

app.use('/board/list',express.static('public'));

첫 번째 인자에 추가시킬 경로를 지정합니다.

위의 경우, /board/list/ 로 시작하는 페이지들이 public에 접근할 수 있습니다.

public-
	css-
    		stylesheets.css
    	imgs-
        	temp.jpg

폴더 구조가 위와 같다고 할 때,
domain/board/list/imgs/temp.jpg 로 사진에 접근가능합니다.

🎯 path.join과의 결합

app.use(express.static(path.join(__dirname,'public')))
app.use('/board/list', express.static(path.join(__dirname,'public')));

위와 같이 public 폴더의 경로를 path모듈로 받아올 수 있습니다.

path 모듈의 join 함수는 구분자와 상관없이 경로를 조합해줍니다.

---