express - middleWare) 정적인 파일의 서비스

YoonJu Lee·2021년 7월 17일
0

Node.js

목록 보기
3/10

정적인 파일 서비스

정적인 파일 : 이미지파일, 자바스크립트, css파일 등을 웹브라우저로 다운로드 시킨 경우

  1. 아래의 메인 페이지에 사진 붙이기.

  1. expressjs.com 사이트

  1. 코드 추가
    : 'public' directory 안에서 static 파일을 찾겠다!!
app.use(express.static('public'))
  1. upload된 모습
    Directory 구성 )
    주소 ) http://localhost:3000/ images/hello.jpg

  1. img 파일의 경로를 연결 해 주기.
    : 메인 페이지에 코드 추가
// css ( style옵션 ) 추가함 (사이즈 변경) . 
,
    <img src="/images/hello.jpg" style="width:400px; display:block; margin-top:10px">`,

==> 추가된 코드 위치.

// 1. 홈페이지 구현.
app.get('/', (request, response) => {
  var title = 'Welcome';
  var description = 'Hello, Node.js';
  var list = template.list(request.list);
  var html = template.HTML(title, list,
    `<h2>${title}</h2>${description},
    <img src="/images/hello.jpg" style="width:400px; display:block; margin-top:10px">`,
    `<a href="/create">create</a>`
  );
  response.send(html);

})
  1. 추가된 모습 ( 홈페이지 )

7. Totall

:'public' directory 안에서 static 파일을 찾겠다!! 라고 직접 지정한다.
app.use(express.static('public'))
이 코드는..
'public' directory 안의 파일 or directory 만 url을 통해 접근가능하고, 여기만 접근허용이므로 훨씬 안전해짐.

profile
Coder가 아닌 Engineer를 향해서.

0개의 댓글