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. Jeong Il Haan
    20210413
  2. 서쥐서쥐
    210402 완료
  3. koabc0999
    response.end(template); 가 readfile 익명함수 내부에 들어가야하는 이유를 잘 모르겠어요.
    template를 미리 익명함수 외부에서 선언해두고 익명함수 내부에서 데이터를 할당해주면
    template의 내부 데이터는 사라지지않고 남아있어야 할 것 같은데 다시 이전의 데이터로 돌아가는것 같은 결과가 나와요. 왜 이럴까요? ㅋㅋㅋ
  4. qufstar7
    3번째 방법으로 main.js파일 상위폴더로 옳기니까 됬습니다.
    코드 비교하고 검색하고 이것저건 고생했는데 감사합니다~
    대화보기
    • 이수완
      아톰 러너로 키니까 undefined 뜨다가 cmd로 키니까 되네요 ㅠ_ㅠ ..
    • byoonn
      완료
    • 밀키
      2021.02.22 완료
    • chimhyangmoo
      21.02.18
    • jeisyoon
      2021.02.06 App - 파일을 이용해 본문 구현 완료
    • 나그네
      잘 되었네요.~^^;
      .
      .
      처음에 안되서 헤매다가....
      cd web2-nodejs 디렉토리가 틀려서 안되었습니다.
    • 마아앙
      2021.01.31
    • 마아앙
      일단 유튜브 동영상이 어떻게 로드가 되었는지 참고해보세요! 그러다보면 CSS서버, JS파일 서버를 각각 만들어서 이것에게 포트번호(ex. http://localhost:1563/)를 부여하고 Main서버에있는 a테그의 href에다가 http://localhost:1563/를 넣어주면 이미지를 불러올겁니다!
      대화보기
      • 임찬혁
        완료
      • 뭄수
        완료
      • ohhigo
        21/1/22 ★★★★★
        동적페이지 본문 구성
      • HTML클릭 시 이미지도 같이 올리고 싶어서 도전했으나 실패했다.

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

        나중에 실력이 생기면 다시 해보자
      • wnstjd9701
        2021-01-18
      • 할수이다
        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 갈기니까 갑자기 글자들이 와라라라라 나타났어요! 제가 다시 한번 한국인임을 느낍니다....천천히 해보셔요 다들
      • well-being
        undefined 에러가 뜨는 경우 정리
        1. fs.readFile(`data/${queryData.id}` ~~ 에서, ` <-- 기호가 따옴표(')가 아니라 탭위에있는 `기호일 때

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

        3. data라는 폴더 상위에 main.js 파일이 위치하지 않았을 때.
      • 2020.12.31 완료!
      • 이상운
        20/12/29완료
      • 손민철
        20/12/29 완료
      • 풀스택개발자
        2020 12 28
      • 생활둘기
        2020 12 24
      • kkn1125
        20.12.21 완료~!
      • 이윤재
        20201122완료
      • 2020.11.03.TUE.
      • Juveloper
        .txt를 붙이고도 안 되는 분들 잘 보세요! fs.readFile(`data/${queryData.id}` -> fs.readFile(`../data/${queryData.id}.txt`
        이렇게 고치고 시도해보세요 두 번째 경우에서 ../이 추가되었는데 이것의 의미는 syntax폴더 밖으로 나와서 data폴더 안에 ${queryData.id}.txt라는 파일을 찾으라는 의미입니다. 즉 syntax폴더와 data폴더는 분리되어 있기에 ../ 을 붙여 줘야해요!
      • 콜라
        20201014 완료
      • Yong Hyun Lee
        완료 201001
      • 윤병록
        20.09.24
      • 퍼스니
        그림 출력이 안되시는 분들 한번 도전해 보시기 바랍니다
        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
        • 영호팍
          출석 완료!!! 대박!! 복습하고 내일 또 강의 들을게영
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기