2024.01.23 TIL - 개인과제 트러블슈팅, 과제 후기

🏹 개인과제 트러블 슈팅 정리

1. 리스트를 working -> done으로 이동시키려는데 2개씩 이동되는 버그 발생

• 원인 : 중복되는 id값 생성

  • 처음에는 id: box.length + 1 로 했는데, 리스트를 삭제하면 length도 함께 변하므로 length에 단순히 1을 더하면 같은 id를 가진 리스트가 생성되기 쉬움

• 해결 : newId = box[box.length - 1].id + 1;

  • box.length -1 : box의 마지막 요소 index
  • box[box.length -1] : box의 마지막 요소('id' key를 가진 객체)
  • box[box.length - 1].id : box 마지막 요소(객체)의 id에 접근
  • 마지막 객체의 다음에 새로운 객체를 추가하는거니까 마지막 id에 +1 하면 됨
  
  

2. 기존 객체배열에 새로운 객체 요소를 추가하는 법?!

   객체배열에 요소를 추가하는 방법을 몰라서 헤맸는데, '얕은 복사, 깊은 복사'를 이때를 위해 배웠던 것이다!

• Tip : spread operator의 활용
• 방법

const obj = [{key1: value1}, {key2: value2}];
// 여기에 새로운 객체를 더해보자

const newArr = {key3: value3};
const newObj = [...obj, newArr];

3. filtering 한 값으로 map을 돌리고 싶은데 방법을 모름

• 메서드 체이닝 활용
• 메서드 체이닝 : 배열에 대해 연속적으로 여러 메소드를 호출하는 패턴
• ex) 배열.filter().map()
• box state에서 false, true값으로 filtering 한 후 그 값으로 map을 돌려서 할일 목록 리스트를 붙임
• 아쉬운 점 : 기준을 'idDone === false', 'idDone === true'로 잡는 바람에 map을 양쪽에서 두번 돌리느라 코드가 길어졌는데, '!isDone'을 활용하면 map을 한번만 쓰고도 목록을 분리해서 호출할 수 있을 것 같다. 이 점을 아직 코드에 반영하지 못했다.

📝 개인과제 후기

• 코드는 직접 구현하면서 크게 성장한다는 말이 맞는 것 같다. 강의만 들을 때보다 직접 내가 원하는 기능을 구현하기 위해 고군분투하는 과정에서 급격하게 실력이 느는것 같다.

• 아는게 점점 더 많아질 수록 과제를 끝냈을때 아쉬움도 더 커지는 것 같다. '이런 기능 구현하고 싶었는데... 코드를 더 깔끔하게 만들고 싶었는데... 이 부분은 수정하고 싶었는데...' 이런 생각이 꼬리에 꼬리를 물어 아쉬움이 배가 된다. 다음 과업을 향해 또 달려야 하기에 코드를 리팩토링할 시간이 있을까 싶지만... 과제 제출 이후에도 내가 원했던 기능을 구현해보는 리팩토링 시간을 가져보면 좋을 것 같다.

• 계속 앞만 보고 달리느라 내가 얼만큼 발전했고 어디에 와있는지 돌아보지 못할 때가 있다. 과제도 기한 내에 끝내는 것만 집중했는데 막상 코드를 마무리하고 나니 내가 이걸 작성한게 맞나 신기하기도 하고, 캠프를 시작할 때에 비해서 내가 이만큼이나 성장했다고? 싶은 생각도 들었다.

• 과제하는 매 순간이 트러블 슈팅이라 제대로 오류 해결과정을 제대로 정리하지 못했는데, 해결하는 순간마다 간략하게라도 정리해놓는 습관을 들이는게 중요할 것 같다.