[WIL / KPTF] : 4주차 바닐라 자바스크립트 팀 프로젝트 기능 구현.

https://github.com/Yooonzero/2-team-project-movie-detail-page

GitHub - Yooonzero/2-team-project-movie-detail-page: 2. 팀과제-개인페이지에서 영화를 클릭하면 상세페이지

이번주 내가 한 일

• 바닐라 자바스크립트로, 영화 리스트 및 조회 구현하기.
  
  
• 바닐라 자바스크립트로, 영화 상세페이지 및 댓글기능 구현하기.

---

Keep

• 모르는 부분은 최대한 오류부분을 복사해서 구글링
  
  
• 메서드나 문법의 사용 방법은 mdn 문서 참조
  
  
• 다른 사람들의 코드에서 어떻게 구현되는지 궁금한 부분은 물어보기
  
  
• 다른 기능 추가할 때 같은 기능도 여러 문법을 사용해서 시도해보기
  
  
• 처음 구현하는 기능에서 console.log()로 하나하나 찍어가면서 기능 실현시키기

---

Problem

1). 문제

• 예를 들어, '삭제'라는 기능을 구현시키고 싶을 때, 버튼 누르면 '삭제'가 되는것이 아니라, 버튼을 눌렀을 때, 데이터가 어떻게 이동하고, 이동한 데이터를 뽑아내기 위해 어떤 메서드를 써야하고, 수정한 데이터를 어떻게 다시 저장시킬지 데이터의 흐름을 파악해가면서 해당 기능을 구현시키는 로직을 작성해야 하는지 감이 안잡힌다.
  
  
• localStorage의 데이터를 수정한 값을 문자열로 변환시키는데 있어 JSON.stringify is not a function 오류 해결이 안됨.

2). 해결

• task 해석에 관한 강의를 들으며, 구현시키고 싶은 기능에 대해 어떤식으로 로직을 짜야하는지 계속 완성된 코드를 확인하면서, 데이터의 흐름 파악하기.
• localStorage에서 수정한 데이터를 새로운 배열에 담아서 그 값을 문자열로 변환시켜야 JSON.stringify in not a function의 오류를 피할 수 있음. (내가 사용한 toSpliced 메서드는 순환참조 이기 때문에, 얕은복사를 통해서 문제를 해결 할 수 있다.)

---

Try

 

• javascript 문법 강의 전체 다시 들어보기 (다시 듣는 과정에서 같은 내용을 공부할지라도 새롭게 보이는 부분들이나 그제서야 이해가 되는 부분들이 상당히 많이 발견됨.)
  
  
• UX에 관한 부분을 개선시키기.
  
  
• semantic하게 코드를 작성할 수 있도록 <header> 태그라던지, <form>태그 라던지, 변수명을 camelCase로 어느정도 의미가 통하게 선언하기.
  
  
• 모든 구역을 <div>로 남발하지 않기.
  
  
• 파일을 가독성이 좋게 정리해두는 습관 기르기.
  
  
• 협업할 때 .prettierrc 사용하기.

---

Feel

 

• 이번 팀 프로젝트를 진행하면서, 처음으로 github를 통해서 커밋 또는 머지와 같은 협업을 진행했다. 각자 브랜치 생성을 잘하고 항상 본인의 브랜치에서 작업을 이어가는 습관을 꼭 들여야 서로 협업간에 효율도 오르고, 오류를 줄일 수 있다는걸 느꼈다.
  
  
• 백엔드인 node.js를 공부하고 있으나, 프론트에 대한 기본지식 정도는 나도 쌓아두고 어느정도 다룰줄 알아야 여러 프로젝트나 개인과제를 수행함에 있어서, 보다 더 간결하고 깔끔하게 결과물을 뽑아낼 수 있다는 걸 알았다.
  
  
• 기능별로 js 파일을 정리하던, 메인과 상세페이지로 나누어서 js 파일로 정리하던, import와 export 모듈을 사용해서 파일정리를 해야 가독성 및 협업을 진행하고 나중에 코드리뷰를 할 때 본인뿐만 아니라 다른사람들의 이해 및 가독성을 올려줄 수 있다는것을 알아냈다.

---

#자바스크립트 #KPTF_회고 #4주차_마무리