[DAY13] 간단한 프로그램 만들기 3

3일차

오늘은 글 내용을 수정할 수 있는 버튼과 홈 버튼, 뒤로가기 버튼을 만들고 중복된 코드들을 정돈하는 시간을 가졌다.

수정할 수 있는 버튼을 만들기 위해서는 먼저 사용자로부터 정보를 입력받아야 한다. 이 문제를 해결하기 위해서 폼 태그를 활용했다. 폼 태그 동작은 다음과 같이 이루어진다. 링크를 참고했다.

1. 폼이 있는 웹 페이지를 방문한다.
2. 폼 내용을 출력한다.
3. 폼 안에 있는 모든 데이터를 웹 서버로 보낸다.
4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘긴다.
5. 웹 프로그램은 폼 데이터를 처리한다.
6. 처리 결과에 따른 새로운 페이지를 웹 서버에 보낸다.
7. 웹 서버는 받은 페이지를 웹 브라우저에 보낸다.
8. 브라우저는 받은 페이지를 보여준다.
   

<form action="/update_process" method="post">
          <input type="hidden" name="id" value="${queryData.id}">  
          <p>
              <textarea name ="description" placeholder="수정할 내용을 입력하세요." style="width:500px;height:150px;font-size:15px;">${description}</textarea>
          </p><p>
              <input type="submit"> <a href = '/?id=${queryData.id}'>&nbsp뒤로</a>
          </p>
</form> 

위 코드처럼 작성을 했고, 수정하고 싶지 않은 경우 뒤로 버튼을 눌러 이전 페이지로 돌아오게 하도록 구현해냈다.

if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
        body += data;
      });
      request.on('end', function(){
        var post = qs.parse(body);  //post 형식으로 전달된 정보받기
        var id = post.id;
        var description = post.description;
        fs.writeFile(`data/${queryData.id}`,description, 'utf8', function(err){
          response.writeHead(302, {Location: `/?id=${id}`}); // 3xx으로 시작된 코드는 redirection
          response.end(); 
        })
      });  
    }

post형식으로 전달된 정보를 받아 파일을 읽어 설정한 페이지에 redirection해주도록 하였다.

`<a href='/update?id=${queryData.id}'>🙇‍♂️내용 수정하기🙇‍♂️</a> <a href = '/'>&nbsp홈으로🏠</a><br>Life is always finding its own way`

내용 수정하기 링크 옆에 홈 버튼도 하나 달아주고 밑에는 동기부여가 되는 문구 하나 적어주었다.

위 그림과 같이 버튼과 글이 잘 나오는 것을 확인할 수 있다. 내용 수정하기 링크를 클릭하면,

내용을 수정할 수 있는 텍스트 블럭이 나오게 된다. '준비 중입니다😂'를 대신해서 '22 Basic Challenge 완주하기!'를 작성하고 제출을 누르게 되면,

같은 쿼리스트링의 주소로 수정된 내용이 정상적으로 출력되는 것을 확인할 수 있었다. 이후 함수를 통해 코드들을 정돈하면서 3일동안의 작업을 마무리하였다. 작업한 코드들은 Github 사용에 익숙해지고 readme작성도 해볼 겸 Github에 올려놓았다.

https://github.com/m1njae/my_simple_website

느낀 점

3일동안 무척이나 간단한 프로그램을 만드는 것이었지만 느끼는 것이 너무나도 많았다. 첫번째로는 '문제를 어떻게 해결할 것인가?' 였다. 프로그램을 만들면서 마주한 문제들은 대부분 구글링을 통해 해결해냈다. 하지만 어떤 문제의 경우, 그 과정에서 미련하게 하루를 다 보내기도 하였다. 그러한 과정에서 주어진 작업량과 데드라인이 있을 때, 어떻게 접근해야 할지 충분히 고민해볼 필요가 있다는 것을 느꼈다.
두번째로는 '클린코드: 논리적으로, 이해하기 쉽게, 단순하게'였다. 작업을 하게 되면서 코드가 길어지는 것은 너무나도 당연한 일이었다. 그 과정에서 깔끔하게 코드를 정리하는 과정이 필요하다는 것을 몸소 깨달았다. 변수도 최대한 의미를 내포하도록 지정해주는 것도 중요하다는 것을 덤으로 얻었다. 그리고 작업을 하다 보면 하나의 기능을 구현하기 위해서 끼워맞추다가 복잡한 더러운 코드를 작성하는 경우도 있었는데 큰 틀을 가지고 로직에 맞게 작성하는 방법이 아직 많이 부족하다는 것을 알았다.
마지막으로는 '디버깅과 보안의 중요성'이었다. 물론 작업한 프로그램이 실제 서비스 환경에서 사용하려는 것은 아니었다. 하지만 상상력을 더해보면, 그런 환경에서는 여러가지 변수들을 통제할 수 있는 디버깅, 그리고 보안이 무척이나 중요하겠구나를 생각해보게 되었다.
간단한 프로그램이었지만 백문이 불여일타를 통해 이론과는 다른 경험을 해볼 수 있었다. 아직도 많이 부족하기는 하나, 앞으로 더 많은 배울 수 있다는 기대감과 약간의 걱정을 안고 열심히 해야겠다!