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. 코딩조아
    20.08.05
  2. 뚜따띠또따
    20/07/31 완료!
  3. 누누
    2020.07.31 완료
  4. 코딩하는렌즈쟁이
    2020-07-25 (토)
    완료!
  5. Jenny Song
    24th.JULY.2020 완료
  6. 리다
    20200713
  7. 불스택
    20.07.10 완료
    감사합니다 !
  8. 영호팍
    오늘도! 출석!
  9. Amousk
    좋은강의 감사합니다.
  10. 2020.06.15
  11. 사아
    완료!
  12. Katherine Roh
    완료 :)
  13. 김보미
    완료
  14. 김진수
    완료
  15. 김재익
    완료
  16. 바다의왕자
    완료
  17. Eunsung Shin
    완료
  18. 03.09 완료
  19. eddylee123456
    복습
  20. eddylee123456
    완료
  21. 스티븐잡숴
    완료
  22. 임은정
    완룡
  23. 파이어뱃
    2019_12_05 complete
  24. codinginpain
    완료이므니다
  25. 박창신
    수강완료
  26. 강다리
    달려요
  27. 쑤우
    수강완료. 감사합니다~
  28. 굼벵이
    완료
  29. CronEB
    완료
  30. YesterdayKite
    완료. 감사합니다!
  31. 허공
    190510 감사합니다.
  32. 이루
    완료
  33. polo
    `data/${queryData.id}` 본문 못 불러왔던 이유를 찾았습니다. 몇 시간동안 헤메다가...(')가 아니라 (`)그레이브액센트 표시를 해야 한다는 것을 ..헤매긴 했지만, 문제가 해결된 기쁨이 더 크군요.
  34. youngjin.lee
    Complete
  35. 위준우
    완료
  36. 인정
    저도 완료입니당~~~~~~~~~~~~~~~~^______________________^
    대화보기
    • 통신 MDP 좋아 ^_^
      완료 ^___________________________________________________________________^
    • 자유로움
      완료
    • kirimochi0726@gmail.com
      href="./css/footer.css 로 해보세요 ^^
      대화보기
      • supernet
        감사합니다.
      • dbjerry
        강의에서 만들었던 template 변수 안에
        <link type='text/css' rel='stylesheet' href='css/footer.css'>
        태그가 있는데 404 (Not Found)가 뜨네요..
        경로는 node_lifecoding/main.js 이고,
        node_lifecoding/css/footer.css 입니다.

        href에 경로 설정을 css/, /css/, ./css/ 요렇게 해봤네요 흑ㅠ;
        stackoverflow에선 express 모듈을 쓰는거 같아서 이해는 안된 채 따라만 해봤지만 역시나 안됐네요.

        egoing님의 현재 이 강의까지의 선에선 적용하기 힘든건가요?
        파일 부르는거까지 했으니까 될 것 같기도 한데ㅠ
      • 지미츄
        완료감사합니다
      • 호두
        감사합니다.
      • if(pathname === '/') {
        fs.readFile(`data/${title}`, 'utf8', function(err, description) {
        if(title === undefined) {
        title = 'Welcome';
        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>
        <ol>
        <li><a href="/?id=HTML">HTML</a></li>
        <li><a href="/?id=CSS">CSS</a></li>
        <li><a href="/?id=JavaScript">JavaScript</a></li>
        </ol>
        <h2>${title}</h2>
        <p>${description}</p>
        </body>
        </html>
        `;
        response.end(template);
        });
        if ~ else로 구분 않고 이렇게 한번에 작성하셔도 될 것 같습니다.
      • karen
        카렌, 에델, 웅 완료
      • 삼고잉
        잘읽었습니다.
      • flyhoon
        감사합니다!
      • Gimme_Gsuit
        ㅎㅎ 밑에 찍고 다시 재정독중인데~~ ../에대한 설명 감사합니다 ㅎㅎ
        대화보기
        • 고통받는자
          저도 본문글을 못받아서 고통받고있었는데
          아마 이고잉님이랑 다르게 파일 디렉토리 설정이 왜인지모르겠는데 다르게되있었어여
          저는 data폴더가 main.js가위치한 폴더 상위에있어서
          '../data/${queryData.id}` 로 하니까 되더군요 여기서 ../ 란 한칸 상위폴더로 가는명령어입니다
          대화보기
          • Gimme_Gsuit
            저는 왜...도대체 ㅋㅋㅋㅋㅋ data 밑에있는 본문 글들을 못 읽어 오는지 당최 모르겠네요...하면서 계속 이것저것 수정해보고있는데 .. ㅎㅎㅎㅎ
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기