static file folder
static-file은 image, video, sound와 같이 파일 자체를 말한다.
서버에 저장된 static-file의 url을 프론트에서 사용하기 위해 static-file-folder를 설정해보자.
<img src=URL />를 통해 이미지를 HTML문서에 넣었다면 이미지의 경로를 작성해야 하는데, 이 URL를 static-file-folder의 경로가 된다.
static-file-folder에 대한 설정 없이 서버에 저장된 파일의 경로를 클라이언트에서 사용한다면?
만약 파일이 이미지라면, 해당 url을 서버로 요청하지만, 서버에서 파일경로를 찾지못해404 not found응답과, 이미지-엑박을 출력한다.
express.static
express.static 공홈 설명
express에 내장된 미들웨어이다. express.static(경로,옵션=선택인자) 정적파일을 제공하는 기능을 한다. 만약 파일을 찾지 못한다면 404 응답 대신에 next()를 통해 다음미들웨어를 실행할 수 있다.
server.js 작성
const express= require('express');
const app = express();
const PORT = 3000;
// use()메서드를 통해 static 폴더를 설정한다.
app.use(express.static(__dirname+'/apple')) // 1번 미들웨어
app.use((req,res,next)=>{ // 2번 미들웨어
// 여기에 2번 미들웨어를 정의
// next()로 다음 미들웨어(여기서는 다음줄의 3번 미들웨어로 고고)
next()
})
app.get('/',(req,res)=>{ // 3번 미들웨어
res.status(200).sendFile(__dirname+'/index.html')
})
app.listen(PORT,()=>{
console.log(`Listen : ${PORT}`)
})index.html 작성
- 이미지 경로는 public이하 경로를 작성하도록 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>NODE-PRAC2</title>
</head>
<body>
<h1>NODE PRAC2 #6 express - static folder</h1>
<!-- static파일의 기본 경로는 apple이기 때문에 apple 이하 경로를 작성해 준다. -->
<img src="./node.png" alt="" />
<!-- 위의 경로는 서버에서 작성되었기 때문에 ./node.png 가 되었고,-->
<!-- 클라이언트에서 서버의 이미지를 사용한다면 http://서버URL:포트/apple/node.png 가된다!-->
</body>
</html>
브라우저 화면
위 사진과 같이 화면에 이미지가 나타났다.
TIL 기록 블로그 :: 문제가 있는 글엔 댓글 부탁드려요!
안녕하세요. 혹시 // 해당미들웨어의 config가 위치한뒤 next()로 다음 미들웨어로 넘어가도록 처리한다. 이 주석의 의미가 뭔지 알 수 있을까요?