Node.js

App - 파일을 이용해 본문 구현

수업소개

파일에 본문을 저장하고, Node.js의 파일 읽기 기능(fs.readFile)을 이용해서 본문을 생성하는 방법을 살펴봅니다. 

 

 

 

강의

?id= 의 값을 정의하지 않았을 때 제목과 본문에 undefined가 뜨는 문제는 뒤에서 해결 방법을 배우게 됩니다. 조금만 기다려주세요. 

 

 

 

소스코드

main.js

변경사항

var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var title = queryData.id;
    if(_url == '/'){
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
      var template = `
      <!doctype html>
      <html>
      <head>
        <title>WEB1 - ${title}</title>
        <meta charset="utf-8">
      </head>
      <body>
        <h1><a href="/">WEB</a></h1>
        <ul>
          <li><a href="/?id=HTML">HTML</a></li>
          <li><a href="/?id=CSS">CSS</a></li>
          <li><a href="/?id=JavaScript">JavaScript</a></li>
        </ul>
        <h2>${title}</h2>
        <p>${description}</p>
      </body>
      </html>
      `;
      response.end(template);
    })


});
app.listen(3000);

 

댓글

댓글 본문
작성자
비밀번호
  1. twinpooh@gmail.com
    카렌, 에델, 웅 완료
  2. jo_onc
    의견을 하나 덧붙이자면, 코드의 재활용을 생각해서
    `data/${queryData.id}` -> 기존에 만들어두었던 title변수를 사용해서 `data/${title}`로 하셔도 됩니다~
  3. 족발
    실행이 잘 안되시는 분들은, date 디렉토리 파일을 하나의 디렉토리에 파일별로 모두 집어넣어서 실행해보시기 바랍니다
  4. 삼고잉
    잘읽었습니다
  5. 도전자
    undefind 뜨는분들

    16번째줄
    'data/${queryData.id}' 를 --> `data/${queryData.id}` 로 바꿔주세요.
    '(따옴표)를 -> `(1옆에 특수문자) 로 바꾸세요.
  6. 코딩초보
    아하 감사합니당
    대화보기
    • colley
      마지막 환호 소리가 제 환호 소리와 비슷하네요
      퍼블리싱만 하다가 node.js 의 동적인 기능을 보니 감탄사밖에 안나오네요
    • 바울
      답변 감사드립니다! :)
      대화보기
      • egoing
        뒤에서 배우게 됩니다!
        대화보기
        • 바울
          질문이 있는데요, 위에처럼 구현할 시 localhost:3000 으로 접속했을 때
          body 부분에 undefined가 뜨지 않게 하려면 어떻게 해야 하나요?
        • 김라식
          '' 이걸쓰면 문자열로 표현되기때문에 임의의 디렉토리 안의 어떠한 파일을 선택하는게 안되는것이고
          `` 이걸쓰면 /와 ${}를 통한 문자열과 프로그래밍 코드를 분류하는 작업을 하기때문에 정상작동 하는것이죠?

          제대로 이해한거 맞나요?...
        • Gimme_Gsuit
          fs.readFile(`data/${queryData.id}`, 요기 부분에서 제가 처음에는 CSS,HTML,JavaScript를 .txt 확장자를 달고 있어서 못 찾았습니다. 코드만 계속 수정 했었는데 결국 안되서 진도를 뺴면서도 중간중간 수정했는데도 안되서 혹시 확장자 안달고 본문 파일을 만들어 보았더니 결국 해결은 되었네요. 혹시 .txt 확장자를 달면 확장자를 찾는 코드(?)는 따로 없나요. 찾아봐도 못 찾아서요~~ ㅎㅎㅎㅎ 즐코하세요 (아아 참고로 밑에 방법도 다 해보았습니다.) ㅎㅎㅎㅎ
        • 돼지코코
          data/${queryData.id} 부분을 감싸는게 '가 아닌 `인지 보시고 html,css,javascript 파일 만들 때 확장자 안 붙였으면 .txt 쓰지 말고 해보세요!
          대화보기
          • Gimme_Gsuit
            혹시 몰라서 fs.readFile 부분에 ${queryData.id}을 HTML.txt 이런식으로 바꿔봤는데 정적으로는 파일을 읽는 것 같은데 ${queryData.id}로 다시 수정하면 안되네요.. 혹시 아시는분 답글좀 부탁드립니다.
          • Gimme_Gsuit
            흠....왜 도대체 왜!!! 저는 undefined가 뜨죠.... 댓글에 달린 방법대로 다해봤는데 자꾸 undefined뜨네요..
          • undefined가 뜨는 이유는 홈 화면일 때 id가 정의되어 있지 않아서 본문의 내용도 불러오지 못하는 거 아닌가요?
          • 김종우
            혹시 이고잉님께서 쓰시는 아톰 테마가 뭔지 알 수 있을까요??
          • 이성준
            undefined 인경우는 각각 HTML,CSS,JavaScript 파일을 만들고나서 저장해주지 않고 하시면 나오는것 같습니다.
            저장하고나서 console 에서 ctrl +c 로 끄고 다시 node main.js 실행해주시면 잘 나올거에요
          • J Gong
            fs.readFile(`data/${queryData.id}`...) 를 fs.readFile('data/${title}'...) 라고 해도 같은 값이 나오는 건가요?
          • heiditty
            저는 아직 이해를 못해서 그런데 undefined 뜨신 분들은 이유가 무엇일까요?
          • Hyung Jun Choi
            이런식으로 할 경우, localhost:3000/ 자체는 본문 내용이 undefined로 뜰 수 밖에 없네요.. 언급 안해주셔서 서럽..
          • 감사합니다.
          • Sungwoong Pyeon
            좋은 포인트인거 같아요 ㅎㅎ 저도 똑같은 문제를 겪었습니다! 다른분들은 쉽게 해결하시길!
            대화보기
            • 헬리사우드
              아 ㅋㅋㅋㅋ마지막에 뿜었네요
            • Seo Yun Seok Tudoistube
              txt 확장자 없이 파일을 만들었는데, '${queryData.id}.text' 처럼 파일명을 만들어줄수도 있는거 댓글 보고 배웠습니다.
              ${queryData.id} 로 하시려면 fs.readFile 경로에 data 없이 바로 p태그 안쪽 내용을 data 라는 폴더 없이 파일에 만드시는 경우처럼 생각합니다.
              감사합니다^^!
              대화보기
              • 도퉁
                저 같이 이해못하실 분이 계실수도 있으니...
                윈도우에서 html내용 중 P 태그 안쪽 내용을 복사하여 text 파일(메모장)에 저장했습니다.

                이후 실행 할 경우 실행이 되지않더라구요

                해결방법을 찾아보니
                위 코드 중 16번줄 일부를 fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
                이렇게 바꾸시면나옵니다! fs.readFile(`${queryData.id}.text`, 'utf8', function(err, description){

                저만 모르는걸수도 있지만..ㅋㅋㅋ
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기