[Node.js_4기] Today_I_Learn : Project_4 (23/12/27)

목차

 

1. 문제

2. 시도

3. 결과

4. 배운점

 

1. 문제 

 

페이지에서 db쓰는 부분의 마지막. modal에 기존 데이터 남겨두는 작업.

그런데 기존 데이터 가져와서 input에 value로 주는건 굉장히 쉽게 끝나버렸다.

 

 

2. 시도 

 

늘 그래왔듯 gpt와 함께 코드를 짜는 것 부터 시작.

  // Get the input element
  const mbtiInput = document.getElementById('update_mbti');

 

일단, input의 밸류를 document의 Id가 update_mbti인 부분에 할당해 주었다.

근데 이거 순서가 반대가 아닌가? 싶어서 반대로 시도했더니

document.getElementById('update_mbti').value = mbti;

원하던 결과가 도출되었다.

이걸 다른 input value들에도 적용하고,

for문을 돌려 id를 돌려보면

 

3. 결과 

 

결과 코드

for (let i = 0; i < tabContainer.children().length; i++) {
  $(`#${i} button`).click(function () {
      // Set the form values based on the clicked card's data
      document.getElementById('update_image').value = image;
      document.getElementById('update_name').value = name;
      document.getElementById('update_role').value = role;
      document.getElementById('update_content').value = content;
      document.getElementById('update_tmi').value = tmi;
      document.getElementById('update_mbti').value = mbti;
      // Update the ID input field with the correct document ID
      document.getElementById('update_id').value = i;
    });

edit 버튼을 눌러 db의 내용을 받아온 모습

이로써 일주일간의 미니 프로젝트에서 맡은 db사용한 데이터의 RU구현은 모두 끝났다.

 

 

4. 배운점 

 

일단 CRUD중 가장 많이 하게될 RU의 구현을 NoSQL로 구현해 보면서 마주친 오류들을 해결하면서 문제해결 능력을 기를 수 있었다고 생각한다.(다른 분들도 마찬가지겠지만...)

 

사전캠프에서 배웠던 내용을 활용해 웹페이지를 만들어 보며 제 실력(또는 인내심)을 점검해볼 수 있었습니다.

협업과정에서 일어나는 다양한 상황(commit간의 충돌, 줄 차이로 인한 pull안됨 등등...)을 겪어보며 git reset 등으로 이전 커밋으로도 돌아가보면서 git에 익숙해질 수 있었던 시간이였습니다.

다만, 사전에 프로그래밍 룰을 정해두지 않아 팀원들 끼리의 스타일이 제각각 꼬여 어느부분을 건드리면 다른 부분이 뭉게지거나 하는 스파게티 코드가 되어버린게 아쉽게 느껴집니다.