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. 리다
    20200706
  2. 영호팍
    출석 완료!!! 대박!! 복습하고 내일 또 강의 들을게영
  3. Amousk
    좋은강의 감사합니다.
  4. 임승원
    var contents=' '
    fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
    contents=desription
    });

    이렇게 외부 변수에다가 텍스트로 불러온 값을 받아와서
    <p>${contents}</p>이렇게 사용할 수는 없나요?? 실행 시켜도 description에 해당하는 부분이 안나오네요..
  5. 임승원
    함수 밖에서 변수를 선언하고 거기에 대입해서 걔를 사용하시면 될것같아여
    대화보기
    • 노농
      리드 파일 경로?를 ../data/ 로 해도 안되길래 다른 자료 찾아보다가
      fs.readFile(`data/${title}` 이렇게하니 저는 됐어요
    • hoya
      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옆에 특수문자) 로 바꾸세요.
          • 쑤우
            수강완료. 감사합니다~
          • 굼벵이
            완료
          • LuciferD
            undefine 떠서 왜안되나 했더니 실행 파일 기준이 아니고
            실행위치 기준으로 파일을 읽어 오네요

            안되시는 분들 폴더로 이동하신후 실행해 보ㅔ요
          • 아지카
            되네요 감사합니다.
            대화보기
            • 시계의온도
              저도 이게 엄청 궁금했어요!! 감사합니다.
              대화보기
              • 별강
                와 소심플이네요... 이거한다고 머리 오래굴리고 결국 <h1><a href="/">WEB</a></h1> 이부분을
                <h1><a href="/?id=Web">WEB</a></h1> 이렇게 바꾸고는 찝찝한채로 잠에 들었었는데 감사합니다 ㅎㅎ
                대화보기
                • data 폴더에 WEB이라는 파일을 생성 하고 web의 본문내용만 붙여 넣은 후,
                  if(_url == '/'){
                  title = "Welcome";
                  queryData.id = "WEB";

                  }

                  조건문에 위 처럼 queryData.id = "WEB"; 추가 해주시면 됩니다.!
                  대화보기
                  • 혹시 web 눌렀을 때도 index.html의 본문을 사용하고 싶으시다면
                    data 폴더에 WEB이라는 파일을 생성 하고 web의 본문내용만 붙여 넣은 후,
                    if(_url == '/'){
                    title = "Welcome";
                    queryData.id = "WEB";

                    }

                    조건문에 위 처럼 queryData.id = "WEB"; 추가 해주시면 됩니다.!
                  • CronEB
                    완료
                  • YesterdayKite
                    완료. 감사합니다.
                  • 별강
                    web 눌렀을때도 구현하려면 어떻게 해야될까요 조건 설정해야하나 ㅜㅠ
                  • 미유노
                    덕분에 해결! 감사해요:-)
                    대화보기
                    • 이산아빠
                      감사합니다!! 덕분에 해결했습니다!
                      대화보기
                      • 소소한
                        차이는 변수(${xxx})를 포함하느냐 하지 않으냐이고, "JavaScript - Template Literal" 강의에 설명이 있습니다.
                        대화보기
                        • undefined 문제 해결 했습니다.
                          `data/${queryData.id}`

                          `${__dirname}/data/${queryData.id}`
                          로 변경
                        • 웅이
                          이 앞 강의에서는 fs.readFile의 첫번째 값을 ''(작은따옴표)로 감쌌는데,
                          이번에는 그렇게하니까 undefined가 뜨고 ``(~키)에 있는 걸 쓰니까 되네요.
                          왜 이번엔 ``(~키)를 써야하나요?
                        • 아미쓔
                          zreadFile()이라는 함수가 있나요?

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

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

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

                              fs.zreadFile이라는 함수가 없다고 하네요
                              대화보기
                              버전 관리
                              egoing
                              현재 버전
                              선택 버전
                              graphittie 자세히 보기