생활코딩

Coding Everybody

코스 전체목록

닫기

App - 글생성 UI 만들기

수업소개

글 작성을 할 수 있는 UI를 구현해봅시다.

 

 

 

강의

 

 

 

소스코드

main.js (변경사항)

var http = require('http');
var fs = require('fs');
var url = require('url');

function templateHTML(title, list, body){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    <a href="/create">create</a>
    ${body}
  </body>
  </html>
  `;
}
function templateList(filelist){
  var list = '<ul>';
  var i = 0;
  while(i < filelist.length){
    list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
    i = i + 1;
  }
  list = list+'</ul>';
  return list;
}

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.readdir('./data', function(error, filelist){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var list = templateList(filelist);
          var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
          response.writeHead(200);
          response.end(template);
        });
      } else {
        fs.readdir('./data', function(error, filelist){
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
            var title = queryData.id;
            var list = templateList(filelist);
            var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else if(pathname === '/create'){
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = templateList(filelist);
        var template = templateHTML(title, list, `
          <form action="http://localhost:3000/process_create" method="post">
            <p><input type="text" name="title" placeholder="title"></p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
        `);
        response.writeHead(200);
        response.end(template);
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }



});
app.listen(3000);

 

댓글

댓글 본문
  1. 별거
    + 리로드 안한거였어요
  2. 승뇽뇽
    ㅇㄹ
  3. labis98
    20210726 good!!
  4. 2021.07.18
  5. 해밀턴
    210707
  6. Jeong Il Haan
    20210419
  7. byoonn
    완료
  8. 21.02.27
  9. chimhyangmoo
    21.02.22
  10. 마아앙
    2021.02.09
  11. jeisyoon
    2021.02.09 완료
  12. 나그네
    Test
    완료~
    감솨~
  13. hanel_
    21.2.2 완료
  14. 뭄수
    완료
  15. ohhigo
    21/1/24
  16. 2021.01.05 완료!
  17. 손민철
    20/12/29 완료
  18. 생활둘기
    2020 12 26
  19. kkn1125
    20.12.22 완료~!
  20. 콜라
    20201015 완료
  21. Yong Hyun Lee
    완료 201002
  22. vampa
    2020.09.10
  23. 모라토리움
    post 방식으로 전달을 해도 이렇게 크롬 개발자도구를 사용해서 제출한 정보를 알아내면 말짱 도루묵 아닌가요??
  24. 코딩하는렌즈쟁이
    2020-07-28 (화)
    완료
  25. 코딩중독
    이고잉님 강의를 보고나면 항상 뿌듯하네요^^
  26. 불스택
    20.07.12 감사합니다 이고잉님 !
  27. Amousk
    좋은 강의 감사합니다.
  28. Katherine Roh
    완료 :)
  29. hibiki
    질문있습니다 ㅜㅜ..
    /create 디렉토리는 실제로 서버컴퓨터에 생성이되는건가요..?
    아니면 main.js 가 실행될 때만 존재하고 정지하면 사라지는 건가요..
    url의 path는 디렉토리로 알고 있는데
    우문현답해주실 분 ㅠ
  30. 김재익
    완료
  31. 김보미
    완료
  32. 바다의왕자
    완료
  33. 윤영훈
    감사합니다!
  34. 준바이
    감사합니다
  35. 심여수
    감사합니다
  36. 03.10 완료
  37. eddylee123456
    복습
  38. eddylee123456
    완료
  39. 스티븐잡숴
    완료
  40. 임은정
    완료
  41. 파이어뱃
    2019_12_06 complete
  42. codinginpain
    아 문제의 원일을 복습하다가 찾았습니다..
    이전강의는 어제 듣고 오늘 새로 들으면서 pm2 복습을 안해서
    --watch 를 안켜고 했네요..
    역시 나의 클라쓰..
    pm2로 실행시에 자동으로 적용 되는게 아니라 꼭 --watch 를 켜줘야,..
    후 속이 시원하네요
    대화보기
    • codinginpain
      완료쓰...
      pm2 켜놓고 (로그는 안켜놈) 했는데 코드 수정한 내용 반영 안되서 엄청 헤멨네요..
      뭔가 다른 에러가 있었던걸까요?

      pm2종료 하고 다시 실행했더니 갑자기 잘됐는데 분명 뭔가 잘 못 만진거겠죠 제가..

      힘든 1강 이었습니다..
    • 쑤우
      수강완료. 감사합니다.
    • 굼벵이
      완료
    • CronEB
      완료
    • YesterdayKite
      완료. 감사합니다!
    • youngjin.lee
      Completed
    • 허공
      190510 감사합니다.
    • 이루
      완료
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기