본 포스팅은 node.js와 express 패키지가 설치되어있다는 가정하에 진행합니다.
정적 파일이란? (static file)
- 동적으로 변경되지 않는 파일
- 명시적으로 수정하지 않는 한 내용이 동일하게 유지 되는 것을 의미
- 이미지, CSS 파일, HTML 파일, JavaScript 파일 등
- 웹 서버(express)에 적용해서 말하자면 서버에서 처리하지 않고 클라이언트측에서 처리하여 보다 빠른 처리 속도 제공
기본 구성
/* index.js */
// express 프레임워크 객체 생성
const express = require('express');
// express의 새 인스턴스 할당
const app = express();
// path 사용
const path = require('path');
app.get('/', function (req, res) {
// code
});
// 해당 포트로 서버를 시작하고 들어오는 요청 수신
app.listen(3000, () => {
console.log('Server listening on port 3000');
});express에서 정적 파일 제공하기
구문
express.static(root)- express.static : 정적 파일을 제공하는 기능
- root : 정적 파일을 제공하는 루트 디렉토리 지정
정적 파일 폴더 생성
- 정적 파일 저장하기
- Visual Studio Code에서 public 폴더 생성
- public 폴더 내에 제공할 정적 파일 저장
- 생성 예시
- 정적 파일 폴더는 일반적으로 public 의 이름을 많이 사용함
정적 파일 제공 설정
- express 에서 설정한 정적 파일 제공하기
- 정적 파일 주소 : '기본URL/파일이름'
- 예) public/img/img.jpg의 경우, URL/img/img.jpg
- 파일은 오로지 public 안에 있는 파일만을 접근할 수 있음
// 정적 파일 사용
app.use(express.static( path.join(__dirname, '/public')))정적 파일 이미지 넣기
- public 폴더 안에 이미지를 저장
- 저장 예시 : public/img/img.jpg
URL 경로로 정적 파일 확인해보기
- 로컬로 express 서버를 실행하고 정적 파일 경로 접근
