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. 아미쓔
    zreadFile()이라는 함수가 있나요?

    readFile()이 맞습니다.
    대화보기
    • 현빈
      undefined에러 해결법..

      1. 경로를 확인하여 상대경로를 적어준다.

      2. 파일의 확장자명은 txt가 아니다.
      아무 확장자도 없는 파일이다. 만약 확장자가 있는 파일명이라면
      그에 맞게 경로를 수정해줘야 한다.
    • bakki1127@naver.com
      fs.zreadFile 라는 함수가 없으니
      z 빼고
      fs.readFile로 적고 다시 실행해보세요
      대화보기
      • gnsdl106@naver.com
        에러메세지에서

        fs.zreadFile이라는 함수가 없다고 하네요
        대화보기
        • 허공
          190510 감사합니다.
        • LEMILE
          저기서 coding.jpg파일 어떻게 보이게 하는지 아시는 분 있나요?
          coding.jpg파일을 data폴더에 옮겨 넣어도 안보이네요.
        • 이루
          완료!
        • jennypark
          check it check it!!!!
        • 츄리
          감사합니다.!
          대화보기
          • 지나가는 웹초보
            저도 계속 undefined가 떠서 무슨 이유인지 여러가지 실행시켜 보니까
            현재의 디렉토리가 어딘지에 따라서 실행되는 파일이 읽혀지고 안읽혀지고가 되는거 같습니다.
            예로들어 저의 syntax와 data폴더는 node.js라는 폴더안에 서로 독립된 채로 있습니다.
            현재 디렉토리를 syntax로 하고 main.js를 실행시켰을때 data폴더 안에 있는 HTML,CSS,JavaScript라는 파일들은 실행시킬수가 없었습니다.
            실행방법은
            1.data라는 폴더를 syntax폴더 안에 넣어서 egoing님의 실행방법으로 실행을 시키는 방법이 첫번 째 이고,
            2.현재 디렉토리를 syntax와 data폴더가 있는 node.js폴더로 바꾸어서
            cd syntax/main.js 로 실행시키는 방법 2가지가 있는것 같습니다..
            그냥 저의 의견을 적어본 것이니 지적 또한 감사히 받겠습니다. !!!
          • 위준우
            완료
          • 통신 MDP 좋아 ^_^
            완료 ^__________^
          • 자유로움
            완료
          • fs.zreadFile('/data/${queryData.id}', 'utf8', function(err, description){
            ^

            TypeError: fs.zreadFile is not a function
            at Server.<anonymous> (C:\Users\kim\Desktop\project\main.js:20:8)
            at Server.emit (events.js:189:13)
            at parserOnIncoming (_http_server.js:672:12)
            at HTTPParser.parserOnHeadersComplete (_http_common.js:109:17)

            전 이렇게 오류가 뜨는데요. data에 `` 그레이브 엑센트도 써보고, function 안에 response.end(template);
            도 넣어봤는데 이런 에러가 뜹니다. 똑같이 따라했는데 뭐가 문제인가요?
          • 상대
            혹시 밑에 댓글로도 undefined문제가 발생하시는 분들은
            `../data/${queryData.id}` 로 한번 시도해보세요
            상대경로를 통해 상위 디렉토리로 이동하지 않아서 생기는 문제일수도 있습니다
          • supernet
            완료
          • phasor
            갈아만든공돌이 /

            fileRead 함수 안에 Description 변수는 로컬 변수입니다. 함수 밖으로 나가면 사라지는 변수에요.

            우리는 링크를 클릭할 때마다 description을 읽어온 후 본문안에 집어넣어야 되잖아용?

            본문은 함수 밖에 있으니까 description은 밖으로 못가져갑니다. 그래서 본문을 함수 안에 넣어서

            본문이랑 decription이랑 합치는거에요
            대화보기
            • 마추픽추
              아래 덧글에 나와있네요
              ----------------------------------------------
              undefind 뜨는분들

              16번째줄
              'data/${queryData.id}' 를 --> `data/${queryData.id}` 로 바꿔주세요.
              '(따옴표)를 -> `(1옆에 특수문자) 로 바꾸세요.
              대화보기
              • 서리서리
                감사합니다~!!
                대화보기
                • ㅇㅇㅇㅇ
                  밑에 댓글달린 걸로도 다 해봤는데 안 되네ㅐ요
                • 토토랑
                  저도 정확히 아는 것은 아니나... 검색해 보실 수 있도록 제가 아는 내용을 말씀 드립니다~
                  (혹시라도 제가 틀린 내용을 적었다면 다른 분들이 정정해 주시길 부탁 드려요!!)

                  함수에 넣어야 하는 이유는 파일을 다 읽은 후에 함수 안의 코드가 실행되게 하기 위해서입니다.
                  이것은 비동기/동기에 대한 내용을 알고 계셔야 합니다. (asynchronous /synchronous)

                  이번 실습에서 사용한 fs.readFile 은 비동기적으로 파일을 읽습니다.
                  (동기적인 버전은 fs.readFileSync 입니다. 노드 공식 홈페이지 docs 에 설명이 있어요 ㅎㅎ)
                  대화보기
                  • tanpopo1013@naver.com
                    저도 똑같은 에러가 나고 똑같은 해결이 되네요. 왜 함수안에 넣어야하는지 이해가 안되구요
                    대화보기
                    • 알마플머
                      undefined 뜨시는 분들 fs.readFile(`Text/${queryData.id}` => fs.readFile(`Text/${queryData.id}.txt` 이렇게 바꿔보세요~
                    • 호두
                      감사합니다
                    • 코딩
                      난 왜 똑같이 따라했는데 왜 본문에 undefined가 다 뜨지??
                    • 지미츄
                      완료 감사합니다
                    • 갈아만든공돌이
                      C:\Users\rlaru\Desktop\web\nodejs>node main.js
                      undefined
                      C:\Users\rlaru\Desktop\web\nodejs\main.js:48
                      response.end(template);
                      ^

                      ReferenceError: template is not defined
                      at Server.<anonymous> (C:\Users\rlaru\Desktop\web\nodejs\main.js:48:18)
                      at Server.emit (events.js:182:13)
                      at parserOnIncoming (_http_server.js:672:12)
                      at HTTPParser.parserOnHeadersComplete (_http_common.js:109:17)

                      이런 오류가 뜨면서 localhost3000에 접속이 안되는데 왜 그런걸까요... template이라는 변수가 존재하지 않을리가 없는데
                      ________________________________________________________________________________________
                      response.end(template); 를 function안에 넣지 않아서 생긴 문제였습니다. 그러나 왜 이걸 여기에 넣어야하는지는 이해할 수 없었습니다.
                    • 나마코엘
                      와.. 동적문서를 이렇게 만들어 가는군요..
                    • Jung Hwan Sung
                      와우..JAVA 개발 3년차에 script로 전향하고 싶어서 vue 를 아무 생각없이 공부하고 있었는데 그 원리를 이제서야 정확히 알게 됩니다 정말 감사합니다 최고에요
                    • ''를 쓰셔도 'data/'+title 이렇게 쓰시면 됩니다.
                      ``를 썼을 때의 `data/${title}`과 같습니다.
                      대화보기
                      • 소금돌
                        완료
                      • lomacd@naver.com
                        이러신경우도있을까봐 올려봅니다
                        위내용대로 코딩했을경우 영상과 달리
                        syntax 디렉터리안에 data폴더를 넣어주셔야
                        undefine 문제가 해결되는 경우도있네요
                      • waitingjesus@snu.ac.kr
                        워후!!!
                      • Yeabbi
                        완료
                      • twinpooh@gmail.com
                        카렌, 에델, 웅 완료
                      • jo_onc
                        의견을 하나 덧붙이자면, 코드의 재활용을 생각해서
                        `data/${queryData.id}` -> 기존에 만들어두었던 title변수를 사용해서 `data/${title}`로 하셔도 됩니다~
                      • 족발
                        실행이 잘 안되시는 분들은, date 디렉토리 파일을 하나의 디렉토리에 파일별로 모두 집어넣어서 실행해보시기 바랍니다
                      • 삼고잉
                        잘읽었습니다
                      • 도전자
                        undefind 뜨는분들

                        16번째줄
                        'data/${queryData.id}' 를 --> `data/${queryData.id}` 로 바꿔주세요.
                        '(따옴표)를 -> `(1옆에 특수문자) 로 바꾸세요.
                      • 코딩초보
                        아하 감사합니당
                        대화보기
                        • colley
                          마지막 환호 소리가 제 환호 소리와 비슷하네요
                          퍼블리싱만 하다가 node.js 의 동적인 기능을 보니 감탄사밖에 안나오네요
                        • 바울
                          답변 감사드립니다! :)
                          대화보기
                          • egoing
                            뒤에서 배우게 됩니다!
                            대화보기
                            • 바울
                              질문이 있는데요, 위에처럼 구현할 시 localhost:3000 으로 접속했을 때
                              body 부분에 undefined가 뜨지 않게 하려면 어떻게 해야 하나요?
                            • 김라식
                              '' 이걸쓰면 문자열로 표현되기때문에 임의의 디렉토리 안의 어떠한 파일을 선택하는게 안되는것이고
                              `` 이걸쓰면 /와 ${}를 통한 문자열과 프로그래밍 코드를 분류하는 작업을 하기때문에 정상작동 하는것이죠?

                              제대로 이해한거 맞나요?...
                            • Gimme_Gsuit
                              fs.readFile(`data/${queryData.id}`, 요기 부분에서 제가 처음에는 CSS,HTML,JavaScript를 .txt 확장자를 달고 있어서 못 찾았습니다. 코드만 계속 수정 했었는데 결국 안되서 진도를 뺴면서도 중간중간 수정했는데도 안되서 혹시 확장자 안달고 본문 파일을 만들어 보았더니 결국 해결은 되었네요. 혹시 .txt 확장자를 달면 확장자를 찾는 코드(?)는 따로 없나요. 찾아봐도 못 찾아서요~~ ㅎㅎㅎㅎ 즐코하세요 (아아 참고로 밑에 방법도 다 해보았습니다.) ㅎㅎㅎㅎ
                            • 돼지코코
                              data/${queryData.id} 부분을 감싸는게 '가 아닌 `인지 보시고 html,css,javascript 파일 만들 때 확장자 안 붙였으면 .txt 쓰지 말고 해보세요!
                              대화보기
                              • Gimme_Gsuit
                                혹시 몰라서 fs.readFile 부분에 ${queryData.id}을 HTML.txt 이런식으로 바꿔봤는데 정적으로는 파일을 읽는 것 같은데 ${queryData.id}로 다시 수정하면 안되네요.. 혹시 아시는분 답글좀 부탁드립니다.
                              • Gimme_Gsuit
                                흠....왜 도대체 왜!!! 저는 undefined가 뜨죠.... 댓글에 달린 방법대로 다해봤는데 자꾸 undefined뜨네요..
                              • undefined가 뜨는 이유는 홈 화면일 때 id가 정의되어 있지 않아서 본문의 내용도 불러오지 못하는 거 아닌가요?
                              버전 관리
                              egoing
                              현재 버전
                              선택 버전
                              graphittie 자세히 보기