2주차는 유튜브 뷰어 만들기, 일명 유튜브 클론코딩이었다

피드백 받은 내용은 다 수정사항...잘한 점이라고는 하나도 없다^^

죄다 고쳐야할 내용들 뿐...

피드백

git msg 관련

• 내용에 맞는 commit msg 쓰기
• 과제 한번에 커밋하지 말고 조금씩 자주 나눠서 올리기
  • 만약 어쩔 수 없이 여러가지 내용을 한번에 올려야 할 경우 수정된 내용 사항 다 쓰기
• 안쓰는 라이브러리는 지우기
• console.log 관련한 커밋은 따로 예외사항으로 두고 올리지 않거나 git rebase를 통해 병합하여 다른 내용에 덮어쓰여지도록 올린다
• 올리고 항상 마지막에 깃헙 올린 화면에서 뭔가 이상한 점이 없는 체크하고 해선 안되는 실수가 있다면 그건 rebase해서 병합해서 안보이도록 할 것!

code 관련

• react component가 아닌 일반 js는 JSX를 리턴하는 것은 어색하다
• useCallback: debounce, throttle 같은 함수는 거의 다 감싸주는 것이 좋다
  (debouce, throttle의 경우 이전 값을 기억해야하는데 useCallback을 쓰지 않을 경우 이전 값을 기억하지 못해 오류가 날 수 있다)
• useEffect는 쪼갤수록 좋다: if문 하나 단위라도 좋으니 세세하게 나눌 수록 좋다.
• 관련 없는 함수끼리 useEffect 안에 묶는 것은 불필요하고 오류를 일으킬 수 있기 때문이다.
• 기본적으로 코드의 논리가 유저의 행동을 따라갈 수 있도록 하는 것이 좋다
  (그게 코드를 이해하기에도 훨씬 쉽고 논리적으로 맞다)
  • 내 코드: 유저 첫 방문 시 보이는 웰컴 모달을 isSearched isShownModal 이 두개의 상태에 따라 조절을 하였는데 이는 코드 흐름 상 굉장히 어색한 코드이므로 isFirstVisit 이런 식으로 유저가 첫 방문인지 아닌지로 구분하여 웰컴 모달창을 띄우는 것이 더 바람직하다
• 컴포넌트 재활용성을 위해서 컴포넌트의 역할은 단순화시키고 쪼개는 것이 좋다
  • 내 코드: appheader는 로고, input을 가지고 있는데 검색을 담당하는 input부분에서 일어나는 이벤트는 appheader에 영향을 주지 않게 하는 것이 좋은 코드이다. appheader는 말그대로 홈페이지의 맨 위에 메뉴바를 보여주고 검색창을 포함하고 있는 역할이 다 이기 때문이다.
• Modal 템플릿은 mui.com(Material.UI 라이브러리 사이트)을 참고해서 만들면 좋다

code style

• 아무리 짧은 CSS요소만 들어가더라도 CSS inline 스타일은 지양할 것, 쓰기 편하다는 것 말고는 장점이 하나도 없다

• JSX에서

<
/>

줄 잘맞추기

• 외부 API를 통해 자료를 받아올 경우 try catch는 그 API를 받아오는 함수를 쓰는 컴포넌트에 직접 쓰는 것이 낫다. API를 불러오는 곳에 쓰는 것은 어색하다.

---

이번주는 월요일에 모든 이론을 보고 과제를 시작했던 1주차와 달리,
과제 기간에 쫓겨서 이론을 거의 보지 않고 하면서 조금조금씩 찾아가면서 했다.

기능 구현은 어찌어찌 주변의 동기들 도움과 요일별로 오시는 멘토님의 도움을 받아 다 하긴 했다.
하지만 과제를 하는 중에도 너무 개념이 부족하다는 느낌이 들어서 과제를 제출한 후 일요일에 따로 친한 사람들과 리액트 스터디를 했다.

스터디를 하면서 useState, useEffect, useCallback, useMemo, React.memo같은 개념을 좀 더 깊게 공부하면서 내가 얼마나 코드를 멍청하게 짰는지 그제서야 이해가 갔다.
다 수정하기에는 이미 피드백 시간이 코앞이라서 결국 하나도 고치지 못했고...또 피드백에서도 수정이 많이 필요하다는 코멘트를 받았다.
피드백 받은 내용을 꼭 다 수정해보고 다음주 과제도 열심히 해야겠다...
씁쓸한 한주....ㅠ