Node.js

App - 글수정 - 수정할 정보 전송

수업소개

수정할 내용을 서버로 전송하는 법을 살펴봅니다.

 

 

 

강의

 

 

 

소스코드

main.js (변경사항)

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

function templateHTML(title, list, body, control){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${control}
    ${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}`,
            `<a href="/create">create</a>`
          );
          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}`,
              `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
            );
            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="/create_process" 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 if(pathname === '/create_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var title = post.title;
          var description = post.description;
          fs.writeFile(`data/${title}`, description, 'utf8', function(err){
            response.writeHead(302, {Location: `/?id=${title}`});
            response.end();
          })
      });
    } else if(pathname === '/update'){
      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,
            `
            <form action="/update_process" method="post">
              <input type="hidden" name="id" value="${title}">
              <p><input type="text" name="title" placeholder="title" value="${title}"></p>
              <p>
                <textarea name="description" placeholder="description">${description}</textarea>
              </p>
              <p>
                <input type="submit">
              </p>
            </form>
            `,
            `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

 

댓글

댓글 본문
  1. Jenny Song
    29th.JULY.2020 완료
  2. 코딩하는렌즈쟁이
    2020-07-28 (화)
    완료
  3. 영호팍
    이해 완료!!!
  4. Amousk
    좋은 강의 감사합니다.
  5. Katherine Roh
    완료 :)
  6. 김재익
    완료
  7. 김보미
    완료
  8. 바다의왕자
    완료
  9. 준바이
    감사합니다
  10. 심여수
    감사합니다
  11. 03.11 완료
  12. eddylee123456
    복습
  13. eddylee123456
    완료
  14. Gritter
    감사합니다.
  15. 스티븐잡숴
    완료
  16. 임은정
    ㅠㅠㅠ

    http://localhost......ipt 로 안들어오고
    // http://localhost......ipt 로 들어오는지 모르겠어요
    똑같이 적은것같은데....




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


    function templateHTML(title, list,body,control ){
    return `
    <!doctype html>
    <html>
    <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${control}
    ${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;
    var title = queryData.id;

    console.log(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}`,
    `<a href="/create">create </a>`
    );
    response.writeHead(200);
    response.end(template);
    })
    } else {
    fs.readdir('./data',function(error,filelist){
    fs.readFile(`data/${queryData.id}`,'utf8',function(err,description){
    var list = templateList(filelist);
    var title = queryData.id;
    var template = templateHTML(title, list,
    `<h2>${title}</h2>${description}`,
    `<a href="/create">create </a> <a href="/update/?id=${title}"> update </a>`);
    response.writeHead(200);
    response.end(template);
    });
    });
    }
    } else if(pathname === '/create') {
    fs.readdir('./data',function(error,filelist){
    var title = 'Welcome';
    var description = 'Hello, Node js';
    var list = templateList(filelist);
    var template = templateHTML(title, list,`
    <form action="/create_process" method="post">
    <p><input type="text" name="title"></p>
    <p><textarea name="desc"></textarea></p>
    <p><input type="submit" name="button"></p>
    </form>

    `,'');
    response.writeHead(200);
    response.end(template);
    })
    } else if(pathname === '/create_process'){
    var body ='';

    request.on('data',function(data){
    body = body + data;
    });
    request.on('end',function(){
    var post = qs.parse(body);
    var title = post.title;
    var desc = post.desc;

    fs.writeFile(`data/${title}`,desc,'utf8',function(err){
    response.writeHead(302,{Location : `/?id=${title}`});
    response.end();
    });
    });

    }else if (pathname === '/update/'){
    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,
    `
    <form action="/update_process" method="post">
    <input type="hidden" name="id" value="${title}">
    <p><input type="text" name="title" value="${title}"></p>
    <p><textarea name="desc">${description}</textarea></p>
    <p><input type="submit" name="button"></p>
    </form>

    `,`<a href="/create">create </a> <a href="/update?id=${title}"> update </a>`); // body에 넣을 내용 //쿼리 실렉터 앞에 / 붙으면 아예 다른주소가 붙는것입니당..
    response.writeHead(200); //200의 의미 : 파일을 성공적으로 전송했다.
    response.end(template);

    // Q. 왜 http://localhost......ipt 로 안들어오고
    // http://localhost......ipt 로 들어오는지 모르겠음
    });
    });

    }
    else {
    response.writeHead(404);//404의 의미 : 파일을 성공적으로 전송하지 못했다.
    response.end('Not Found');

    }


    });
    app.listen(3001);

    저렇게 들어오는걸 확인하고
    일단 조건문을
    pathname === '/update/'

    으로 바꿧더니 작동은 해요..

    혹은

    pathname = '/update'

    으로 해도 됩니다...

    ㅠㅠㅠ
    왜 제대로 작동 안할까욤
  17. codinginpain
    완료뜨
    강의를 많이 하셔서 강의력이 점점 느시는건지
    제가 쫓아가다보니 는건지 모르겠지만
    이해가 쏙쏙 되는 강의입니다
    너무 감사합니다 갓고잉님
  18. 홍콩돼지
    queryData.id 가 없는게 아닐까요
    그 말은 이코드에서 뭔가 잘못된게 아니라 상세페이지에 control로 넘겨주는 a tag 링크가
    <a href="/update?id=${title}">update</a>
    이렇게 안하고
    <a href="/update">update</a>
    이렇게 하시지 않았을까요

    9개월전이니 이미 해결 하셨겠지만.......ㅎㅎㅎ...
    대화보기
    • 강다리
      runn
    • 쑤우
      수강완료. 감사합니다~
    • 굼벵이
      완료
    • YesterdayKite
      완료. 감사합니다!
    • youngjin.lee
      completed
    • 허공
      190510 감사합니다.
    • 이루
      완료
    • 위준우
      완료
    • 자유로움
      완료
    • supernet
      감사합니다.
    • younhoso
      } else if(pathname === '/update'){
      fs.readdir('./data', function(err, filelist) {
      fs.readFile(`data/${queryData.id}`, 'UTF-8', function(err, description){
      var title = queryData.id;
      var list = templateList(filelist);
      var template = templateHTML(title, list,
      `
      <form action="/update_process" method="post">
      <input type="hidden" name="id" value="${title}">
      <p><input type="text" name="title" placeholder="title" value="${title}"></p>
      <p>
      <textarea name="description" placeholder="description">${description}</textarea>
      </p>
      <p>
      <input type="submit">
      </p>
      </form>
      `,
      `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`

      );

      response.writeHead(200);
      response.end(template);
      });
      });
      }
      이부분에서 value="${title}", ${description}를 똑같이 해줬는데. 왜 undefined가 나올까요??
      도와 주세요~
    • 호두
      고맙습니다
    • 1. 기존의 파일과 같은 이름으로 create시 기존의 파일에 덮어씌워짐
      2. 한글 깨짐
      과 같은 문제가 있습니다.
      create 상황일 때는, list와 비교해서 중복 검사 -> 기존의 파일들 중 똑같은 제목이 있으면 뒤에 _2 추가와 같은 방법으로 해결하시는지, 아니면 다른 좋은 방법이 있는지 궁금합니다. 그리고 한글 제목과 내용의 경우 글자가 깨지는데 qs.escape 방법을 써도 해결이 안돼서 막막하네요...
    • 일단시작하고본다
      이고잉님 사랑해요
    • 삼고잉
      첫번째 훑기
    • Gimme_Gsuit
      같은 ${title}값을 사용하지만, input 2개의 라인에 하나는 id 하나는 title에 값을 전달함으로써, id는 원래 기존값을 부여받고 title 값은 수정 됨으로써 데이터의 흐름을 알게 되었습니다.
    • moon
      감사합니다.
    • Seo Yun Seok Tudoistube
      크롬검사도구 네트워크에서 FormData 에 전송한 값이 모두 보이는거 보고 어떻게 이런 정보를 보안으로 지킬 수 있을지 궁금합니다.
      감사합니다!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기