6주차
기간 : 2023/10/04 - 2023/10/10
소감 :
직접 프로그램을 구현하다보면 생각지도 못한 에러와 버그들을 마주할 때가 태반이다. 기능 구현이 아닌 간단한 configure 혹은 css에서 다양하 에러가 생긴다. 이때 어떻게 에러를 해결해나가는 것이 개발자의 능력치인 것 같다. 단순히 구글링을 하는 것을 넘어 공식 문서를 찾아보고, 디버깅 툴을 이리저리 돌려보고 여러 가설을 세워 테스트를 해보는 등, 디버깅의 경험치를 키워야겠다는 생각이 들었다. 구현을 하며 마주하는 수많은 문제들에 답답하고 머리 아팠지만 정작 해결을 하고 나면 오는 뿌듯함이 너무 좋다. 그 문제 때문에 골똘히 하루종일 머리를 돌려 보는 것도 싫지 않다. 사소한 구현이지만, 내가 부딪힌 에러를 하루종일 고민하고 있다는 게 좀 특별하기도 하고 재밌게 느껴진다.
이번 주 목표
공식문서 자주 찾아보기
과제 복습 하기
일일 스프린트
2023/10/07
[] 리액트 마스터 9.7 - 9.15
[🍅] 리액트 졸업작품
2023/10/08
[🍅] 리액트 마스터 졸업작품 제출
2023/10/09
[🍅] Next.js 1.0 - 1.3 & 퀴즈
[🍅] 리액트 졸업작품 리뷰
2023/10/10
[🍅] NextJs #1.4 - 1.7
[🍅] 퀴즈 풀기
이번주 강의 요약
Next.js 라는 재미있고 획기적인 프레임워크를 배운다. framer-motion도 충격적이었지만, React router를 쓰지 않고 간단히 파일 선언만으로 라우터가 구현되는 것이 너무 편리하다. 요즘은 라이브러리들이라 패키지들이 너무 잘 나와서 편리하기도 하지만, 이렇게 의존을 하다간 옛날 코드를 보고 무슨 뜻인지 못 알아볼 것 같아 걱정이 되기도 한다. framer-notion을 배웠을 때 니코에게 이것을 pure CSS로 구현하는 것을 연습해야 할까요? 라고 물어본 적이 있는데, 그때 니코샘이 그래야한다고 답해주었다. 고로 프레임워크나 라이브러리 없이 pure한 자바스크립트로 구현하는 연습도 동행해야 할 것 같다.
주간회의
리액트 마스터 챌린지의 과제물이 다소 부족하다고 느꼈지만, 주체적으로 참여하는 자세를 통해 얻을게 더 많다고 생각됐기에 발표에 지원했다.
발표는 떨렸지만, 짧게나마 준비하면서 느꼈던 점과 깨달은 점들을 정리해볼 수 있어서 좋았다.
격려해주시는 스터디원 분들의 챗에 감사함을 느꼈다.
더불어 다른 분들의 과제 리뷰를 들으며 이렇게도 다양한 시각으로 문제를 풀어갈 수 있구나 싶었다.
인상적이었던 발표는 영진님의 발표! 공부기간 동안 습득하게 되신 모든 라이브러리들과 패키지들을 사용하여 과제에 모두 포함시킨 진정한 맥시멀리스트이심을 리스펙한다.
모달에 다양한 데이터들을 보다 다양한 방법으로 시각화하려고 하신 노력과 접근이 보여 대단하다고 여겨졌다.
주어진 과제를 뛰어넘어 무엇을 더 구현할 수 있을까하는 태도는 정말 볻받아야겠다고 생각한다.
더불어 주간회고를 읽으신 플린님께서 추천해주신 추상화에 관련된 블로그 글이 정말 재밌고 유용했다.
추상화된 코드가 무조건적으로 좋은 건 아니라는 점을 지적한 글에 큰 인사이트를 얻었다. 섣부른 추상화는 잠재적 괴물이 되어버린 코드를 만들게 된다!!!😂
이렇게 인사이트와 위트가 넘치는 글을 도대체 어떻게 쓰는 건지도 궁금하다.
고치거나 버려야 할 점!
회의감보단 자신감을!
잘한 점
아직도 챌린지를 이어나가고 있는게 사실 믿기지가 않는다. 매일 꾸준히 한 줄을 쓰더라도 코딩하고 있는 내가 뿌듯한 요즘 :)
이번 주 챌린지에서 배운 것
깨달은 점
🥲 “라이브러리와 패키지들을 꼭 업데이트하자” 처음에 configure가 잘 안 돼서 애를 먹었다. 3시간 동안 configure가 잘 되지 않아서 쩔쩔 매다가 도벨님이 힌트를 주셔서 풀어나갈 수 있었다. 얻은 교훈은 모든 dependencies들을 @latest로 다운로드 받을 것!
🥲 “같은 문제를 다양한 각도에서 풀어보자” React-master 강의 Nomflix 클론 코딩에서 Modal을 다룰 때 nest 했던 라우트를 응용해서 챌린지를 풀려고 하니, 여러 에러들이 발생하였다. Nomflix와는 다르게 챌린지는 라우트가 다수였고, 그 안의 중복되는 nest route가 들어가게 되면서 과제 초안에서는 에러가 발생한 것 같다. Modal을 계속 useNavigate과 PathMatch로 띄우려고 하기보단 단순히 useState를 쓸 생각을 못했다. 다시 작성해본 코드에서는 useMatch 메서드를 사용하지 않고 const [detailOpen, setDetailOpen] = useState(false); 을 사용하니 너무도 간단하게 Modal을 띄울 수 있었다.
개선할 점
🔥 “DRY code 하자” 코드 작성 중 드라이 코드를 하고 싶었으나 그 순간 귀찮아서 하지 못한 것이 이후 똑같은 코드를 세 번 작성해야 하는 번거로움을 만들었다. 차라리 깔끔하게 components들을 나누고 props들을 전달하는 방식을 처음부터 채택했다면, 에러가 발생했을 때 3가지 파일을 똑같이 수정해야 하는 일은 없었을 것…😞
해결한 점
😊 라우트가 세개 있고, 중복되는 영화들이 있다는 점과, framer-motion을 사용하고 있는 것 때문에, 페이지를 넘길 시 영화 카드들이 id 중첩때문에 연결되어서 이동하는 이슈가 있었다. 이것을 해결하려고 layoutId를 라우트마다 다르게 주는 방법을 써서 문제를 해결하였다.