WEB3 - Express

정적인 파일의 서비스

수업소개

이미지, 자바스크립트, CSS와 같은 파일을 서비스하는 방법을 살펴보겠습니다. 

 

 

 

강의

 

 

 

소스코드

변경사항

main.js

var express = require('express')
var app = express()
var fs = require('fs');
var path = require('path');
var qs = require('querystring');
var bodyParser = require('body-parser');
var sanitizeHtml = require('sanitize-html');
var compression = require('compression')
var template = require('./lib/template.js');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(compression());
app.get('*', function(request, response, next){
  fs.readdir('./data', function(error, filelist){
    request.list = filelist;
    next();
  });
});

//route, routing
//app.get('/', (req, res) => res.send('Hello World!'))
app.get('/', function(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:300px; display:block; margin-top:10px;">
    `,
    `<a href="/create">create</a>`
  ); 
  response.send(html);
});

app.get('/page/:pageId', function(request, response) { 
  var filteredId = path.parse(request.params.pageId).base;
  fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
    var title = request.params.pageId;
    var sanitizedTitle = sanitizeHtml(title);
    var sanitizedDescription = sanitizeHtml(description, {
      allowedTags:['h1']
    });
    var list = template.list(request.list);
    var html = template.HTML(sanitizedTitle, list,
      `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
      ` <a href="/create">create</a>
        <a href="/update/${sanitizedTitle}">update</a>
        <form action="/delete_process" method="post">
          <input type="hidden" name="id" value="${sanitizedTitle}">
          <input type="submit" value="delete">
        </form>`
    );
    response.send(html);
  });
});

app.get('/create', function(request, response){
  var title = 'WEB - create';
  var list = template.list(request.list);
  var html = template.HTML(title, list, `
    <form action="/create_process" method="post">
      <p><input type="text" name="title" placeholder="title"></p>
      <p>
        <textarea name="description" placeholder="description"></textarea>
      </p>
      <p>
        <input type="submit">
      </p>
    </form>
  `, '');
  response.send(html);
});

app.post('/create_process', function(request, response){
  var post = request.body;
  var title = post.title;
  var description = post.description;
  fs.writeFile(`data/${title}`, description, 'utf8', function(err){
    response.writeHead(302, {Location: `/?id=${title}`});
    response.end();
  });
});

app.get('/update/:pageId', function(request, response){
  var filteredId = path.parse(request.params.pageId).base;
  fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
    var title = request.params.pageId;
    var list = template.list(filelist);
    var html = template.HTML(title, list,
      `
      <form action="/update_process" method="post">
        <input type="hidden" name="id" value="${title}">
        <p><input type="text" name="title" placeholder="title" value="${title}"></p>
        <p>
          <textarea name="description" placeholder="description">${description}</textarea>
        </p>
        <p>
          <input type="submit">
        </p>
      </form>
      `,
      `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
    );
    response.send(html);
  });
});

app.post('/update_process', function(request, response){
  var post = request.body;
  var id = post.id;
  var title = post.title;
  var description = post.description;
  fs.rename(`data/${id}`, `data/${title}`, function(error){
    fs.writeFile(`data/${title}`, description, 'utf8', function(err){
      response.redirect(`/?id=${title}`);
    })
  });
});

app.post('/delete_process', function(request, response){
  var post = request.body;
  var id = post.id;
  var filteredId = path.parse(id).base;
  fs.unlink(`data/${filteredId}`, function(error){
    response.redirect('/');
  });
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!')
});

 

댓글

댓글 본문
  1. public 폴더안에 images 폴더를 따로 만들어야 되는 거였습니다. 답변 항상 감사합니다
    대화보기
    • Sansol Park
      구체적인 상황이 설명되어 있지 않아서, 정확한 해결책을 말씀드리긴 어렵지만 이전에 다른 분들이 댓글에 남겨주신 해결책들 공유드립니다.

      1. 반드시 public 밑에 리소스를 넣어줘야 합니다..

      2. 초반에 /images/hello.jpg가 실행되지 않을경우 pm2를 껐다가 다시 켜보면 될겁니다

      아래는 ChatGPT-4의 답변입니다.

      말씀하신 문제를 해결하기 위해 몇 가지 추가적인 점을 확인해보시면 좋을 것 같습니다.

      1. 이미지 파일의 확장자: 이미지 파일의 확장자가 .jpg가 맞는지 확인해주세요. 파일의 확장자가 맞지 않으면 이미지가 표시되지 않습니다.
      2. 이미지 파일 경로: 정적 파일을 제공하는 express.static('public') 미들웨어는 서버가 시작되는 위치를 기준으로 경로를 해석합니다. 따라서, 이미지 파일이 정확히 'public/images' 폴더 안에 위치해 있는지 확인해주세요.
      3. 서버 재시작: 코드를 변경한 후에는 서버를 재시작해야 변경사항이 적용됩니다. Node.js 서버를 재시작해보세요.
      4. 브라우저 캐시: 웹 브라우저는 자주 사용하는 파일을 캐시(임시 저장)하여 빠르게 접근하도록 돕습니다. 이 때문에 최신 버전의 파일이 아닌 이전 버전의 파일이 표시될 수 있습니다. 브라우저의 캐시를 지우고 다시 시도해보세요.

      위의 방법들로도 해결이 안되면, 코드의 다른 부분에서 문제가 발생하고 있을 수 있습니다. 그럴 경우 코드 전체를 다시 한 번 점검해보시는 것이 좋습니다.
      대화보기
      • public 폴더안에 이미지를 넣었음에도 이미지가 안 뜨네요...
      • 어흥
        230706
      • Hojun Song
        2023-04-20 목
      • 감자
        22.12.22
      • 당당
        2022.11.18
      • 케굴
        2022-01-02
        이쁘네요^^
      • aminora
        초반에 /images/hello.jpg가 실행되지 않을경우 pm2를 껐다가 다시 켜보면 될겁니다
      • 민수
        와 진짜 격하게 궁금했던 기능이었습니다!!!!!!!!!!!!!1
      • jeisyoon
        2021.03.15 Serving Static File - OK
      • hanel_
        감사합니다. 21.2.22
      • 김지호
        21 01 08
      • 생활둘기
        2021 1 4
      • 콜라
        20201025 완료
      • Yong Hyun Lee
        완료 201003
      • 전주호
        완료
      • ldhan0715
        20-09-15
      • 뚜루뚜루뚭
        감사합니다
      • ㅋㅋㅋ
        드디어...
      • 쑤우
        수강완료. 감사합니다~
      • 버섯지렁이
        app.use(express.static('public'));
        app.use(express.static('public2'));

        이렇게 두개의 폴더를 설정하고 각 폴더에 같은 이름의 서로 다른 파일이 있으면 먼저 쓰인 폴더가 사용 되네요.
      • 파이어뱃
        1. service할 정적인 파일들을 담는 directory를 지정
        app.use(express.static('public'));

        2. url을 통해 파일에 접근 가능
      • 굼벵이
        완료
      • 지미츄
        감사합니다!
      • jo_onc
        와~ 이런게 있네요.
        강의 감사합니다!
      • 연수아빠
        감사합니다.
      • Hyung Jun Choi
        반드시 public 밑에 리소스를 넣어줘야 합니다..
      graphittie 자세히 보기