WIL - 개인 회고

원티드 시작한지, 벌써 1주일이 지났다.

처음 3일간 사전과제에 대한 리팩토링, 몹프로그래밍을 경험하며 좋은 코드란 무엇인가에 대해 생각해보았다. ( 남이 봐도 이해가 될 수 있는 코드!)
다음 일주일간 영화정보 사이트를 기능을 분리하여 작업하며 git에 대해 정말많은 conflict를 해결하며 gitflow방식에대해 이해하게되었다.

코드리뷰 -> 팀원들에게 내코드를 설명함에 있어서 어려움이 없어야하고, 조금 더 나은 방향으로 함수를 분리해보고 컴포넌트를 분리해보는 경험을 가졌다.
몹프로그래밍 -> 한명의 화면으로 나머지가 얘기하며 서로 왜 이런 생각을 하고 코드를 썼는지에 대해 얘기를 나누며 편협한 생각에서 벗어나 볼 수 있던 기회였다.
또한 같은 문제에대해 여러 사람의 코드를 다같이 보니 빠르게 이해할 수 있는 힘을 짧고 굵게 길렀던것같다.

영화정보사이트 & 검색어 추천 프로젝트
1. Json.server를 통하여 Mock data를 통신할 수 있고
2. 라우팅을 사용하며 페이지 전환을 해보고,
3. 데이터를 가져와서 화면에 영화정보를 보여주고,
4. 클릭시 모달창 구현하여 상세 설명 페이지를 보여주고,
5. 검색시 DB에 있는 데이터 찾고 검색어값과 DB의 정보가 같으면 렌더링해고
6. Fuse.js를 활용한 검색어 추천 기능 구현을 구현하였다.

나는 Movie컴포넌트를 주로 담당하여 메인페이지에 데이터를 가져와서 보여주는 역할을 하였다.
이번에 리코일을 도입하였는데, 제대로 공부해보지않아서 어떤것을 전역으로 빼야하는지에대한 고민보다는 일단은 전역에서 다 관리해보자! 라는 생각이였는데,
멘토님께서 리코일을 왜 사용했고, 왜 그 값이 전역으로 빼야했는지 생각해보라하셔서 전역상태관리에대한 고민을 해보며 공부를 다시해보아야겠다.
또한, 검색기능과 추천기능은 다른 팀원이 담당하여 시간이 될때 다시 직접 구현해보고싶다. 무한스크롤, 페이지네이션, 필터링 기능도 구현해보고싶다!

트러블 슈팅 : 이벤트캡쳐링 발생
문제 : 한개의 영화 포스터에 모달, 즐겨찾기 버튼 2개의 기능으로 즐겨찾기 onClick 이벤트시 모달이 열리는 문제
해결 : 즐겨찾기 버튼을 모달보다 상위 계층의 컴포넌트로 이동하여 해결

트러블 슈팅 : 포스터 중 일부 이미지 깨짐 현상 발생
문제 : API로 부터 받아온 이미지중, error코드 404로 패칭 실패
해결 : Img onError 속성으로 error 이미지 변경

다음 트러블 슈팅에는 사고의 흐름을 더 기록해봐야겠다!!

프로젝트를 진행하며 너무 모르고 있던 부분을 많이 만났고, 하면 할 수록 기초가 부족함을 느껴 리액트 스터디에 들어가게되었다.

공식문서를 읽고 설명할 수 있을 수준의 깊이있는 학습을 프로젝트와 동시에 진행해보아야겠다.

바로 내일부터 새로운 프로젝트에 다시 들어가게되는데, TS도 안써봣고, 상태관리도 제대로 모르는것같아서 이번엔 더 깊이있는 공부를하며 프로젝트에 임해야겠다. 생각이되었다.

또한 급급하여 어떤에러처리를 하였는지 정리가 안되었는데, 리드미를 작업하며 시간별로 어떤 작업을 했는지 보면서 어떤 트러블슈팅을 어떤사고로 했는지 적는것도 좋을것 같다는 생각이들어서 기록용으로 블로그를 꾸준히 적어야겠다고 생각이 들었다.

🙋🏻‍♀️ 내 생각
하고싶은게 너무많은데... 아직 할 줄아는게 많이 없어서 너무 속상하고 답답했다. ㅠㅠ
그래도 1주일 전의 나와 비교하면 남의 코드를 이해할 수 있게되었고, 확실한 것은 많이 배웠다.!

🔥 얻게 된 인사이트!
오브젝트 코드로이해하는 객체지향설계 읽어봐야겠다. 객체지향에대해 공부해보고싶다.
트러블슈팅의 전제조건은 문제를 발견해야하고 내가 뭘해야하는지 아는것이다!
사고의 흐름을 다 적기
새로운 개념을 알게되었을 때 단어 하나하나 조차도 알아보기

💚 다음주에 체크해야할 액션플랜
✅ 키워드학습을 하였는지
✅ 이벤트캡쳐링 블로그 글 작성
✅ 함수 호이스팅과 변수 호이스팅의 차이점 글 작성,
✅ 스코프 체인 블로그 글 작성
✅ 개인프로젝트를 시작하였는지

1-1. 사전과제 리팩토링 과제
https://github.com/Wanted-Pre-Onboarding-FE-Team5/pre-assginment-refactoring

1-2. 영화정보사이트 구현과제
https://github.com/Wanted-Pre-Onboarding-FE-Team5/WMovie5