생활코딩

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. 콜라
    20201015 완료
  2. Yong Hyun Lee
    완료 201002
  3. 2020.09.10
  4. 모라토리움
    post 방식으로 전달을 해도 이렇게 크롬 개발자도구를 사용해서 제출한 정보를 알아내면 말짱 도루묵 아닌가요??
  5. 코딩하는렌즈쟁이
    2020-07-28 (화)
    완료
  6. 코딩중독
    이고잉님 강의를 보고나면 항상 뿌듯하네요^^
  7. 불스택
    20.07.12 감사합니다 이고잉님 !
  8. Amousk
    좋은 강의 감사합니다.
  9. Katherine Roh
    완료 :)
  10. hibiki
    질문있습니다 ㅜㅜ..
    /create 디렉토리는 실제로 서버컴퓨터에 생성이되는건가요..?
    아니면 main.js 가 실행될 때만 존재하고 정지하면 사라지는 건가요..
    url의 path는 디렉토리로 알고 있는데
    우문현답해주실 분 ㅠ
  11. 김재익
    완료
  12. 김보미
    완료
  13. 바다의왕자
    완료
  14. 윤영훈
    감사합니다!
  15. 준바이
    감사합니다
  16. 심여수
    감사합니다
  17. 03.10 완료
  18. eddylee123456
    복습
  19. eddylee123456
    완료
  20. 스티븐잡숴
    완료
  21. 임은정
    완료
  22. 파이어뱃
    2019_12_06 complete
  23. codinginpain
    아 문제의 원일을 복습하다가 찾았습니다..
    이전강의는 어제 듣고 오늘 새로 들으면서 pm2 복습을 안해서
    --watch 를 안켜고 했네요..
    역시 나의 클라쓰..
    pm2로 실행시에 자동으로 적용 되는게 아니라 꼭 --watch 를 켜줘야,..
    후 속이 시원하네요
    대화보기
    • codinginpain
      완료쓰...
      pm2 켜놓고 (로그는 안켜놈) 했는데 코드 수정한 내용 반영 안되서 엄청 헤멨네요..
      뭔가 다른 에러가 있었던걸까요?

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

      힘든 1강 이었습니다..
    • 쑤우
      수강완료. 감사합니다.
    • 굼벵이
      완료
    • CronEB
      완료
    • YesterdayKite
      완료. 감사합니다!
    • youngjin.lee
      Completed
    • 허공
      190510 감사합니다.
    • 이루
      완료
    • 위준우
      완료
    • 자유로움
      완료
    • 0cool
      파이어폭스에선 폼 데이터를 POST 요청으로 보내는걸 어떻게 확인 가능하나요?
      (패킷캡쳐를 해야하나...)
    • supernet
      감사합니다.
    • 지미츄
      감사합니다
    • 호두
      고맙습니다
    • 에델
      웅 카렌 에델
    • 삼고잉
      잘읽었습니다
    • flyhoon
      감사합니다
    • moon
      감사합니다.
    • Seo Yun Seok Tudoistube
      아톰편집기에도 블록 접히기가 되는거 첨 알았습니다.
      감사합니다^^!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기