Node.js

App - 홈페이지 구현

수업소개

조건문을 활용해서 홈페이지를 표현하는 방법을 살펴봅니다. 

 

 

 

강의

 

 

 

소스코드

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 pathname = url.parse(_url, true).pathname;
    if(pathname === '/'){
      if(queryData.id === undefined){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          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.writeHead(200);
          response.end(template);
        });
      } else {
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          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.writeHead(200);
          response.end(template);
        });
      }
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

 

댓글

댓글 본문
  1. 이윤재
    20201123완료
  2. Sunny
    2020.11.03.TUE.
  3. ㅇㄹ
  4. 콜라
    20201014 완료
  5. Yong Hyun Lee
    완료 201001
  6. 윤병록
    20.09.24
  7. CH Yim
    2020.09.13
  8. 2020.09.09
  9. OQ the YOUNG
    2020.09.08
  10. CodingChan
    2020. 09. 06
  11. 코딩조아
    20.08.05
  12. 뚜따띠또따
    20/07/31 완료!
  13. 누누
    2020.07.31 완료
  14. 코딩하는렌즈쟁이
    2020-07-25 (토)
    완료!
  15. Jenny Song
    24th.JULY.2020 완료
  16. 리다
    20200713
  17. 불스택
    20.07.10 완료
    감사합니다 !
  18. 영호팍
    오늘도! 출석!
  19. Amousk
    좋은강의 감사합니다.
  20. 2020.06.15
  21. 사아
    완료!
  22. Katherine Roh
    완료 :)
  23. 김보미
    완료
  24. 김진수
    완료
  25. 김재익
    완료
  26. 바다의왕자
    완료
  27. Eunsung Shin
    완료
  28. 03.09 완료
  29. eddylee123456
    복습
  30. eddylee123456
    완료
  31. 스티븐잡숴
    완료
  32. 임은정
    완룡
  33. 파이어뱃
    2019_12_05 complete
  34. codinginpain
    완료이므니다
  35. 박창신
    수강완료
  36. 강다리
    달려요
  37. 쑤우
    수강완료. 감사합니다~
  38. 굼벵이
    완료
  39. CronEB
    완료
  40. YesterdayKite
    완료. 감사합니다!
  41. 허공
    190510 감사합니다.
  42. 이루
    완료
  43. polo
    `data/${queryData.id}` 본문 못 불러왔던 이유를 찾았습니다. 몇 시간동안 헤메다가...(')가 아니라 (`)그레이브액센트 표시를 해야 한다는 것을 ..헤매긴 했지만, 문제가 해결된 기쁨이 더 크군요.
  44. youngjin.lee
    Complete
  45. 위준우
    완료
  46. 인정
    저도 완료입니당~~~~~~~~~~~~~~~~^______________________^
    대화보기
    • 통신 MDP 좋아 ^_^
      완료 ^___________________________________________________________________^
    • 자유로움
      완료
    • kirimochi0726@gmail.com
      href="./css/footer.css 로 해보세요 ^^
      대화보기
      • supernet
        감사합니다.
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기