Node.js & MySQL 03

m1njae·2022년 1월 27일
0

22 Basic Challenge

목록 보기
25/25
post-thumbnail

글 수정 구현

오늘은 글을 수정하는 과정을 구현하면서 마무리를 지었다.
홈페이지를 구현하는 과정과 마찬가지로 파일을 읽어오는 부분을 데이터베이스를 읽어오도록 코드만 수정하면 되었다. 아래 코드는 수정버튼을 눌렀을 때, 텍스트 박스와 수정할 내용이 나오도록 하는 부분이다.

// 수정한 코드
else if(pathname === '/update'){
      db.query(`SELECT * FROM topic`, function(error, topic){ 
        if(error){
          throw error;
        }
        db.query(`SELECT * FROM topic WHERE id=?`,[queryData.id],function(error2,topic){
          if(error2){
            throw error2;
          }
          var title = `${querytotitle(queryData.id)}`;
          var template = templateHTML(title,
          ` 
          <form action="/update_process" method="post">
          <input type="hidden" name="id" value="${topic[0].id}">  
          <p>
              <textarea name ="description" placeholder="수정할 내용을 입력하세요." style="width:500px;height:150px;font-size:15px;">${topic[0].description}</textarea>
          </p><p>
              <input type="submit"> <a href = '/?id=${topic[0].id}'>&nbsp뒤로</a>
            </p>
          </form>    
          `,
          `<br>Life is always finding its own way`)
         response.writeHead(200);  
         response.end(template); 
       });
     }); 
    }

그리고 본문을 수정했을 때, post방식으로 정보를 전달 받은 후, 지정된 id 쿼리스트링에 리다이렉션해주는 과정이다. 이전에는 파일로 저당하였으나, sql 쿼리를 사용해서 데이터베이스에 저장되어있는 데이터를 수정해준다.

// 수정 전 파일을 읽어드리는 코드
else if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
        body += data;
      });
      request.on('end', function(){
        var post = qs.parse(body); 
        var id = post.id;
        var description = post.description;
        fs.writeFile(`data/${id}.txt`,description, 'utf8', function(err){
          response.writeHead(302, {Location: `/?id=${id}`}); 
          response.end(); 
        })
      }); 
 }
///////////////////////////////

// 수정 후 데이터베이스를 읽어드리는 코드
else if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
        body += data;
      });
      request.on('end', function(){
        var post = qs.parse(body);  //post 형식으로 전달된 정보받기
        db.query(`UPDATE topic SET description=? WHERE id=?`,[post.description,post.id],function(error,result){
        response.writeHead(302, {Location: `/?id=${post.id}`}); // 3xx으로 시작된 코드는 리다이랙션
        response.end(); 
        })
    });
}


챌린지를 완주했으니, 내용을 수정해주도록 하겠다.

내용이 잘 수정된 것을 확인할 수 있었다. 기왕 수정하는 김에 2022년 목표도 하나 적고 가야겠다. 내 작고 소중한 코드도 github에 올려놓아야겠다!

https://github.com/m1njae/my_simple_website

느낀 점

Node.jsMySQL을 연동을 한다고 그래서 꽤나 어려운 작업이라고 생각했지만, 환경만 잘 설정해주면 그렇게 어렵지 않게 해결할 수 있었다. 조금씩 한 발씩 내딛는 과정이 흥미롭고, 내가 필요한 부분을 찾아나서는 것이 모험과도 같다. 물론 앞으로 거치고 배워야할 부분들도 많지만 챌린지를 완주했던 것처럼, 그리고 챌린지 그 이후에 나의 모습처럼, 조금씩 내가 할 수 있는 일을 하다보면 성장해있지 않을까라는 생각을 한다. 다음 스텝 업을 위해 또 여러가지를 찾아보고 공부해보아야겠다!

profile
할 수 있는 것부터 차근차근, 항해자의 공부 기록공간

0개의 댓글