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. ohhigo
    21/1/22 ★★★★★
    동적페이지 본문 구성
  2. mano
    HTML클릭 시 이미지도 같이 올리고 싶어서 도전했으나 실패했다.

    https://stackoverflow.com......age
    에서 첫번째 답변에서 fs.readFile('image.jpg', function(err, data) {를 fs.readFile('coding.jpg', function(err, data) {
    으로 변경한 후 http://localhost......에 접속하여 이미지가 뜨는 것 까지 확인!

    나중에 실력이 생기면 다시 해보자
  3. wnstjd9701
    2021-01-18
  4. 할수이다
    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);


    저는 이렇게 해서 성공했는데요...
    이게 참.... cmd가 반응이 느린건지 계속 undi 가 뜨다가 아무것도 안뜨다가 해서 CSS,HTML,JavaScript 파일 안에 아무글자 떄려넣고 다시 cmd ctrl+c 로 나왔다가 node main.js로 들어가서 페이지 f5 갈기니까 갑자기 글자들이 와라라라라 나타났어요! 제가 다시 한번 한국인임을 느낍니다....천천히 해보셔요 다들
  5. well-being
    undefined 에러가 뜨는 경우 정리
    1. fs.readFile(`data/${queryData.id}` ~~ 에서, ` <-- 기호가 따옴표(')가 아니라 탭위에있는 `기호일 때

    2. .txt파일로 저장되었을 경우, ${queryData.id}.txt를 붙이지 않았을 때

    3. data라는 폴더 상위에 main.js 파일이 위치하지 않았을 때.
  6. Noah
    2020.12.31 완료!
  7. 이상운
    20/12/29완료
  8. 손민철
    20/12/29 완료
  9. 풀스택개발자
    2020 12 28
  10. 생활둘기
    2020 12 24
  11. kkn1125
    20.12.21 완료~!
  12. 이윤재
    20201122완료
  13. 2020.11.03.TUE.
  14. Juveloper
    .txt를 붙이고도 안 되는 분들 잘 보세요! fs.readFile(`data/${queryData.id}` -> fs.readFile(`../data/${queryData.id}.txt`
    이렇게 고치고 시도해보세요 두 번째 경우에서 ../이 추가되었는데 이것의 의미는 syntax폴더 밖으로 나와서 data폴더 안에 ${queryData.id}.txt라는 파일을 찾으라는 의미입니다. 즉 syntax폴더와 data폴더는 분리되어 있기에 ../ 을 붙여 줘야해요!
  15. 콜라
    20201014 완료
  16. Yong Hyun Lee
    완료 201001
  17. 윤병록
    20.09.24
  18. 퍼스니
    그림 출력이 안되시는 분들 한번 도전해 보시기 바랍니다
    https://not-to-be-reset.tistory.com/263
    안돼서 정보 찾아보고 정리한 제가 쓴 글입니다. 참고하시어 해결 하시면 좋겠습니다.
    핵심은 그림파일 자체가 서버에 올라가 있지 않기 때문입니다.
    대화보기
    • Kangsoo Jeong
      안녕하세요! 다들 열심히 이세요 ㅎㅎ
      저도 공부하다가, 작동이 잘 안되는 부분이 있어서 질문 남깁니다.
      우선, 나머지 부분은 문제 없이 잘 작동하는데요.,
      현재 제 디렉토리의 레이아웃은
      1.상위폴더: WEB2_NODEJS
      1의 하위에는 data\폴더가 있고, 나머니 파일들(1.html,2.html,3.html..... main.js, coding.jps(1.html본문의 중간에 삽입되는 이미지),.... 가 있습니다.
      현재 main.js에서 본문을 quearyData.id에 따라 출력하는 부분을 완성했는데,
      data\폴더 하위에 있는, html, css, javascript파일들이 각각 잘 불러와 지지만, html파일에 img태그만 잘 안불러 와지네요...
      <img src='coding.jpg' width="100%"> 이렇게 되어 있어서 혹시 위치를 다시 설정해야 하나?
      라고 생각하여,
      (1)
      data폴더에 저장되어 있는 html을 기준으로 했을 때는 ../를 이용하여 상위폴더로 이동해야 coding.jpg가 있으니
      src를 '../coding.jpg'로 바꿔도 보았고,
      (2)'./coding.jpg'로도 바꿔 보아도 이미지가 여전히 나타나지 않네요.. ㅠ

      혹시 이 상황에 대해서 제가 쓴 글만으로도 정보가 된다면 원인을 알 수 있는 분 계실까요?
      도움 부탁드립니다.
    • OQ the YOUNG
      2020.09.08
    • helloworld
      20.9.8
    • CodingChan
      2020. 09. 06
    • 김혜린
      8월 29일 완료!
    • 마준
      완료
    • 밑에 댓글들에 나온 undefined 에러를 해결하는 방법입니다.

      저같은 경우는 data 안의 파일들이 CSS.txt, JavaScript.txt, HTML.txt이기 때문에 텍스트 파일을 열어준다는 지정을 해야 합니다.

      그렇다고 해서 fs.readFile(`data/${queryData.id).txt','utf8',function(err,description){ ..
      이렇게 고치시면 안되구요,
      fs.readFile(`data/${queryData.id}`+'.txt','utf8',function(err,description){
      이렇게 고치셔야 제대로 작동합니다.

      +)
      생활코딩님이 하신 것처럼 '확장자가 존재하지 않는 파일'을 만드시려면, 윈도우에선 파일의 '이름 바꾸기'를 들어가서 .txt 부분을 지워버리면 됩니다.

      +)그래도 해결되지 않는다면 혹시 href="/?id=HTML" 와 같이 링크로 지정된 파일명과 실제로 data 폴더 안에 만드신 파일명이 똑같은지 확인해보세요. 저같은 경우는 처음에 생활코딩님과 코드를 똑같이 해놓고 파일들을 html.txt와 같이 대소문자를 바꿔서 저장해서 오류가 발생했습니다.
    • Itsyng
      파일을 불러와서 본문나타내기
    • 코딩조아
      20.08.05
    • 누누
      20/07/30 완료
    • 뚜따띠또따
      20/07/30 완료
    • 코딩하는렌즈쟁이
      2020-07-23 (목)
      완료!
    • Jimin Joo
      HTML 파일은 잘 불러와지는데 왜 CSS, JavaScript 파일은 안불러와지는 걸까요?? 이름도 같은 거 계속확인했는데..
    • 아래 JoyfulJin님께서 알려주신글에 추가로 약간 보충설명을 하자면,
      위에 소스 붙여넣기 했을때 16번째줄에
      fs.readFile(`data/${queryData.id}`
      이 부분에서
      1. ' 와 ` 틀리지 않게 잘 구분해주셔야 되구요.
      2. (`data/${queryData.id} <-- 여기서 data/ 이 부분이 폴더 경로를 지정해주는 부분인데,
      - 바탕화면에 'nodejs', 'data' 폴더를 각각 따로 만들어놓은 경우:
      data 대신 ../data로 지정해주면 해결되실 겁니다.
      - 혹은 'nodejs' 폴더(main.js가 있는 폴더) 안에 'data'폴더를 옮겨주시면 코드변경 없이 해결되실 겁니다.

      추가로, fs.readFile(`data/${queryData.id}` --> fs.readFile(`data/${title}`로 바꿔봤는데 정상작동되네요.

      질문. 루트조건에서 descrition란에 undefined라고 표시되는것 혹시 제거하려면 어떻게 하면 되는지 아시는분 계실까요?
    • joyfulJin
      본문 내용이 undefined로 나오시는 분들은 이번 강의에서 추가한 fs.readFile(`data/${queryData.id}` 에서 data의 폴더 디렉토리가 main.js가 실행되는 하위 디렉토리에 있는지 확인해주세요!
    • 코딩중독
      뭔가를 알아야 문제를 해결하는데 뭔가를 모르니까 문제 해결을 못하겠네요.....
    • 리다
      20200706
    • 영호팍
      출석 완료!!! 대박!! 복습하고 내일 또 강의 들을게영
    • Amousk
      좋은강의 감사합니다.
    • 임승원
      var contents=' '
      fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
      contents=desription
      });

      이렇게 외부 변수에다가 텍스트로 불러온 값을 받아와서
      <p>${contents}</p>이렇게 사용할 수는 없나요?? 실행 시켜도 description에 해당하는 부분이 안나오네요..
    • 임승원
      함수 밖에서 변수를 선언하고 거기에 대입해서 걔를 사용하시면 될것같아여
      대화보기
      • 노농
        리드 파일 경로?를 ../data/ 로 해도 안되길래 다른 자료 찾아보다가
        fs.readFile(`data/${title}` 이렇게하니 저는 됐어요
      • 2020.06.13
      • 사아
        ${description} 부분 undefined 되시는 분들
        댓글따라 아래처럼 바꿔보세요~~
        `data/${queryData.id` → `../data/${queryData.id}`
        대화보기
        • Katherine Roh
          완료 :)
        • 김보미
          완료
        • 바다의왕자
          완료
        • 김재익
          완료 정상작동
        • Eunsung Shin
          완료
        • 이창환
          fs.readFile(`../data/${queryData.id}`, 'utf8', (err, description) => {
          return description
          });
          혹시 이런식으로 결과 값을 return 이나 어떠한 방법으로 함수의 범위 밖으로 꺼내 내어서 다른 변수에 담아서 템플릿 안에 넣을수있는 방법은 없을까요? return으로 꺼내 볼려도해도 제가 아는 방법으로는 할수가 없네요
        • 03.09 완료
        • eddylee123456
          복습
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기