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. Juveloper
    .txt를 붙이고도 안 되는 분들 잘 보세요! fs.readFile(`data/${queryData.id}` -> fs.readFile(`../data/${queryData.id}.txt`
    이렇게 고치고 시도해보세요 두 번째 경우에서 ../이 추가되었는데 이것의 의미는 syntax폴더 밖으로 나와서 data폴더 안에 ${queryData.id}.txt라는 파일을 찾으라는 의미입니다. 즉 syntax폴더와 data폴더는 분리되어 있기에 ../ 을 붙여 줘야해요!
  2. 콜라
    20201014 완료
  3. Yong Hyun Lee
    완료 201001
  4. 윤병록
    20.09.24
  5. 퍼스니
    그림 출력이 안되시는 분들 한번 도전해 보시기 바랍니다
    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
          복습
        • 마운틴고릴라
          저랑 같은 경우신지는 모르겠는데 저 같은 경우에는 파일을 txt 파일로 만들고 확장자 없이 불렀더니 못찾는다고 나오더라구요. 만약 파일 제작시 txt 파일로 만드셨다면

          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){ 이 부분을
          fs.readFile(`data/${queryData.id}.txt`, 'utf8', function(err, description){ 로 수정하시거나

          해당 파일을 확장자 없이 만들어보시면 어떨까요??
          대화보기
          • eddylee123456
            완료
          • 궁금증해결
            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(2000);






            node 재실행 후 localhost:2000 접속시


            WEB
            HTML
            CSS
            JavaScript
            Welcome
            undefined



            본문이 undefined 나오는데.. 왜 그럴까요..
          • 스티븐잡숴
            완료
          • 고생하셨어요
            대화보기
            • 임은정
              완료오오옹
              해결
            • JT_brand
              완료했어여~~!!!!
            • 김태완
              마지막 환호성듣는데 깜짝 놀랐네요 ㅎㅎ
            • 파이어뱃
              2019_12_05 complete
              문자열에 Javascript변수를 넣어 표현하고 싶을 때는

              1. 일반 문자열: '', ""(작은따옴표나 큰따옴표)안에 일반 문자열을 넣으시고 + 기호로 자바스크립트 변수를 합쳐 표현합니다.

              ex) '안녕하세요' + name

              2. 탬플릿 문자열: ``(백틱) 백틱안에 ${자바스크립트 변수명}으로 연결합니다.

              ex)`안녕하세요${name}`
            • 잔디맨기기
              완료쓰^^
            • 뚜리
              너무 재밌어요!
            • description 부분이 완전히 이해가 안되지만 그래도 잘 따라가고 이써요!
            • 박창신
              수강완료
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기