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. 파이어뱃
    2019_12_05 complete
  2. codinginpain
    완료이므니다
  3. 박창신
    수강완료
  4. 강다리
    달려요
  5. 쑤우
    수강완료. 감사합니다~
  6. 굼벵이
    완료
  7. CronEB
    완료
  8. YesterdayKite
    완료. 감사합니다!
  9. 허공
    190510 감사합니다.
  10. 이루
    완료
  11. `data/${queryData.id}` 본문 못 불러왔던 이유를 찾았습니다. 몇 시간동안 헤메다가...(')가 아니라 (`)그레이브액센트 표시를 해야 한다는 것을 ..헤매긴 했지만, 문제가 해결된 기쁨이 더 크군요.
  12. youngjin.lee
    Complete
  13. 위준우
    완료
  14. 인정
    저도 완료입니당~~~~~~~~~~~~~~~~^______________________^
    대화보기
    • 통신 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 밑에있는 본문 글들을 못 읽어 오는지 당최 모르겠네요...하면서 계속 이것저것 수정해보고있는데 .. ㅎㅎㅎㅎ
          • moon
            감사합니다.
          • 헬리사우드
            '중복의 제거'를 하고싶으셨을것같네요..ㅋㅋ 다음강의가 반복문인거보고 느낍니다
          • refers
            좋은 강의 올려주셔서 도움많이 받고있습니다. 감사합니다. 한가지 안되는 부분이 있어 글올립니다.
            html 링크를 클릭했을때 보여지는 본문 내용에 이미지가 하나 포함되어 있는데요."coding.jpg" 인데 이 파일을 data폴더에 넣어 놓았으며, 경로를 나름대로 바꾸어도 찾을수가 없습니다. data/coding.jpg와 coding.jpg 이렇게 설정해 보았지만 찾을수가 없네요. 이 이미지 경로를 어떻게 잡아야 할지궁금합니다.
            혹시 .jpg 이미지를 사용하려면 라우팅을 해주어야 하는지요?
          • Seo Yun Seok Tudoistube
            오류를 일부러 재현하는게 어려울때가 있네요^^;;
            3시간 걸려서 오류를 재현했는데요, /favicon.ico 가 브라우저를 열면 항상 뜨는건가 보다 생각했는데
            이번에 해보니까 딱 한번 떠서 어떤때 뜨는건지 살짝 궁금해졌습니다.
            그동안 '/favicon.ico' 가 뜨는걸 아는게 중요해 보이진 않지만, 혹시 이걸 꼭 알아야 할 정도로 중요한
            거라면 저한테도 살짝 알려주시기 바랍니다.
            캡쳐이미지랑 '/' 만 실행되는 소스 함께 올렸습니다.
            https://github.com......s/1
            감사합니다.
            대화보기
            • egoing
              제가 잘 이해를 못했어요. 좀 더 자세히 상황을 말씀해주시면 좋겠습니다. :)
              대화보기
              • Seo Yun Seok Tudoistube
                response.riteHead() 랑 response.end() 를 fs.readFile() 바깥으로 빼려고 하니깐 비동기여서 favicon 까지 2번 호출하는거 같네요.
                undefined 인 경우는 fs.readFile 안에 err 처리 구문을 넣어주면 되지 않을까요?
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기