생활코딩

Coding Everybody

코스 전체목록

닫기

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. 김철흥
    2024.01.10
    완료!
  2. Hoon Ko
    20231016
  3. 수상한용이
    23.10.05 완료
  4. carpediem
    23.09.03 완료!!
  5. BF_Lee
    23.06.28
    파일읽기를 통해 글의 내용을 수정해도 껏다키지 않고 자유롭게 할 수 있게됨
  6. 어흥
    23.06.28.
  7. 고경록
    강의에서 삭제한 "data/HTML" 파일 내 <img src="coding.jpg" width="100%"> 를 제대로 표시하려면 어떻게 해야하나요? 이미지가 data 의 상위 폴더인 web2-nodejs 에 있으니 "../coding.js" 으로 하면 될 줄 알았는데 안 되네요ㅠㅠ..
  8. 코지마 히데오 뺨 후릴 반바지
    23.02.28 완료!
  9. 백대진
    23.01.18
  10. 감자
    22.12.01 완료
  11. 드가자
    따라는 하고 있는데 왜 이렇게 되는건지 이해를 못하고 있다
  12. 당당
    2022.10.16
  13. 뿔고래
    쿼리를 사용하여 입력값에 따라 다른 문자열을 출력하는 노드js를 사용하면 웹페이지가 여러개인척 할 수 있다.
  14. i_am_es
    2022-08-05
  15. 아캔두잇
    20220804 완료
  16. 키다리아저씨
    220715완
  17. toonfac
    220714 오후 2시 01분 완료
  18. 이성훈
    2022/06/23 완료
  19. 코지마 히데오 뺨 후릴 반바지
    와안료
  20. 코지마 히데오 뺨 후릴 반바지
    오 친절한 설명 감사합니다 ㅋㅋ 저도 코드 따라 쳤는데 "오헤헹. 왜 안되누?" 이러고 있다가
    잘 보니까 폴더 위치가 이상하더라구요 ㅋㅋㅋ
    대화보기
    • 난할수있어
      다들 디렉토리 조심하세요. nodejs 디렉토리에 1,2,3, index, main.js 있고 data폴더는 nodejs 바로 하위폴더여야 합니다. 디렉토리 안맞추면 본문에 undefiend만 나와요. 이거가지고 몇시간 헤맴
    • 밍기
      2022-01-14 완료
    • 소설가
      2021-1-6 완료
      고맙습니다.
    • node.js가 mvc패턴을 취하는 php로 제작하는 사이트에 비해 동적으로 생성된다는 것이 정확히 어떤 것인지 궁금합니다.
      어짜피 프론트 코드 개발자가 만들어야 하는 것은 같지 않나요?
    • 김관호
      21.11.23
    • BlitzcrankNautilusSeraphine
      맞아요 이 문제는 당일에 모든 강의를 수강하고 `과 '의 차이를 늦게나마 알아차려서 문제를 해결했습니다. 답장 감사합니다.
      대화보기
      • 일억개
        효율적인 코딩을 하려면 template literal 문법을 쓰는 것이 좋겠습니다.
        `data/${queryData.id}` 이렇게 그레이브 액센트로 감쌋나요?
        대화보기
        • BlitzcrankNautilusSeraphine
          제 경우가 특이한건지 위의 코드가 잘못된건지 아래 댓글을 보니까 더 혼란스러워지네요 ㅋㅋ
          파일경로를 파라미터로 전달할때 ${} 를 쓰면 의도대로 되지않는 일이 있었습니다.
          실제로 코드를 따라가면서 뭐가 문제인지 확인하고 해결하였습니다.


          <문제발생>
          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>
          .. 생략
          </body>
          </html>
          `;
          response.end(template);
          })
          ..

          위의 readFile 함수에서 첫번째 파라미터로 READ할 FILE의 위치를 전달하는데
          단순히 'data/${queryData.id}' 로 전달 시 readFile이 파일의 경로를 queryData.id를 집어넣어서

          data/HTML
          data/CSS
          data/JavaScript 로 인식하는게 아닌
          data/${queryData.id} 라는 파일을 찾아서 출력하는 현상이 발생했습니다.

          그렇기 때문에 아무리 id를 다르게 전달해도 data 디렉터리 내 ${queryData.id}라는 파일만을 가져가게되고.
          실제로 같은 이름의 파일을 만들어서 시험해본 결과 가설이 맞았습니다.


          <문제해결>

          readFile('data/' + queryData.id, ...생략.. ) 으로 전달하여 경로자체를 + 연산으로 만들었습니다.

          다들 파이팅하십셔
        • 일억개
          0:40 1.html 파일에서 <p> 잘못 잘렸네요
        • 일억개
          3:55 웹서버 만들기 수업에 나오는 코드(이 수업의 초기 코드) 또한 사진을 없애고 새로고침 하니까, 바로 반영이 되더군요..
        • 자스마스터
          211001
          왜케어렵지 ㅜㅜ 원리를 모르겠다 일단 패스....
        • pdpd
          9일이나 지나서 이제는 해결하셨을거 같습니다만.... 33번 라인에
          <p><${description}</p>

          인데 <P> 다음에 < 가 하나 더껴져 있어서 그런것 같습니다.
          애당초에 html코드도 안되는게 정상일텐데..... 역시 스크립트 언어는 대충 돌아는 가는게 대단하지 않나 싶습니다...
          대화보기
          • Ribosom
            감사합니다.
          • R.A.E
            안녕하세요? HTML파일을 잘 읽어들이는데, 나머지 두개의 파일을 읽어내지 못하는 경우는 왜 그런 걸까요?
            디렉토리 문제도 아니고, txt로 저장되지도 않았고, 파일명도 queryData.id, title과 동일한데 정말 이유를 알 수가 없네요...ㅠㅠㅠㅠ

            저의 코딩은 이렇습니다.

            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);
          • 전해성
            21.09.11 완료
          • 초딩 개발자
            2021/09/11
          • 졸작완성하자
            21.09.07 완료. 인턴 때 회사에서 배웠을때는 백엔드 너무 어렵다고 생각해서 프론트엔드쪽으로 갔는데, 생활코딩에서 배우니까 너무 쉽고 좋은 것 같아요ㅎㅎ 감사합니다 :)
          • Young-Ki Kim
            허. 저는 본문이 잘 바뀌기는 하는데 Terminal 명령창에 계속 undefined가 나오네요.
          • 개발자말랑이
            마지막에 효과음이 생겼네요 ㅎㅎ
          • 고영히
            0823 완료
          • Kangmin Kim
            2021.8.22 완료!
          • 승뇽뇽
            노드 넘넘 강려크하다
          • 삼각자
            한참 헤맸는데 제가 파일명에 소문자만 써서 undefined 떴다는 걸 알았을 때 허무함... 강의 잘 봤습니다 ㅠㅠ
          • 박사장
            21 07 28 완료!
          • Mark Kim
            맥 os 사용자 분들 중, 소스 코드를 그대로 사용하여도 본문이 로드 되지 않을 시에, readFile메소드의 file path 를 터미널에서 표시되는 파일의 absolute file path 를 사용하시거나 소스파일 디렉토리를 기준으로 한 relative file path 를 사용하시면 본문을 성공적으로 불러 올 수 있습니다.
          • labis98
            20210720 completed!
          • Duke
            2021.07.17
          • 한민서
            이미지가 올려지지 않는 이유를 살펴보니... url 대신 data/${queryData.id}를 읽어오기 때문에 이미지를 요청할 때 이미지를 읽어오지 못하는 것이었습니다.

            url.parse()가 deprecated돼서 new URL().searchParams을 쓰신 분들은 그 코드 때문에 그럴 겁니다.

            제가 해결한 방법은 바로 ?id=HTML처럼 id를 사용하여 문서를 요청할 땐 문서를 보내주고 사진을 요청할 땐 사진을 보내주는 것입니다.
            data/HTML 문서에서 이미지 태그를 <img src="/picture/coding.jpg" width="100%"> 이렇게 수정해서 picture 디렉터리로 요청하도록 하고, main.js에서는 이미지를 보내주기 위해서

            if(_url.indexOf("/picture/") == 0) // '/picture'로 시작하는 url을 요청했을 경우 이미지를 가져온다
            {
            var imgSrc = _url.substr(1); // 이미지 파일 이름 가져오기
            fs.readFile(imgSrc, function(err, data){ // 이미지 파일을 읽어온다
            response.writeHead(200, {'Content-Type': 'image/jpeg'})
            response.end(data) // Send the file data to the browser.
            })
            return;
            }

            위 코드를 11번 라인 다음에 넣으면 됩니다. 그리고 이미지는 data와 마찬가지로 picture 폴더 안에 넣으면 됩니다. 코드는 mano님이 올려주신 글이랑 https://not-to-be-reset.tistory.com/263 이 글을 참고했어요.
            대화보기
            • warmpeace
              완료이긴 하지만 계속 반복해야 완전히 체득될 것 같아요~! 감사합니다!
            • Jeong Il Haan
              20210413
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기