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. Yong Hyun Lee
    완료 201001
  2. 윤병록
    20.09.24
  3. 퍼스니
    그림 출력이 안되시는 분들 한번 도전해 보시기 바랍니다
    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 부분이 완전히 이해가 안되지만 그래도 잘 따라가고 이써요!
            • 박창신
              수강완료
            • 얼그레이티
              ${description} 부분에 undefined 떠서 경로도 바꿔보고 이것저것 해보다가 댓글에 말씀해주신 대로 따옴표를 바꿨더니 실행이 되네요!
              1번키 옆에 있는 따옴표라고 하는데... Node.js 기술 문서에서 고대로 복사해온건 안되더니 댓글에 있는걸 복사하니 실행이 되네요. (따옴표 모양도 다르고요..)
              제 키보드 자판엔 이 따옴표가 없는데 어떻게 해야하나요.. ㅠ_ㅠ 혹시 아시는분 계시면 답변 부탁드립니다...
              아래는 해당 댓글을 복사해온 것입니다.
              ----------------------------------------------------------------------------------------------------------------
              16번째줄
              'data/${queryData.id}' 를 --> `data/${queryData.id}` 로 바꿔주세요.
              '(따옴표)를 -> `(1옆에 특수문자) 로 바꾸세요.
            • 쑤우
              수강완료. 감사합니다~
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기