[프리온보딩] 220515 개인과제 #1 종료

개인과제 #1 종료

https://github.com/chichoon/wanted-movie-app

GitHub - chichoon/wanted-movie-app: 원티드 프리온보딩 개인과제 #1 영화 검색 앱

공식적인 내생각

어지간한건 어제 완성을 해놨어서 오늘은 라이브러리 위주로 정리하고 리드미 작성했다

깃허브 페이지로 배포하려 하니 하위 링크에서 404 에러가 걸려버려서 찾아보니 깃허브 페이지는 싱글페이지 어플리케이션 지원을 안 해서 그런 것이었다

404 리디렉션용 html 파일이랑 index.html 파일 수정해서 404 에서 우회해주고... 그와중에 마감시간 직전에 let이랑 const를 안 쓰고 var를 쓰는 걸 var견해버려서 허겁지겁 올린 것 정도...

컴포넌트가 아닌 단순 변수명이 파스칼케이스로 되어있는 것도 카멜케이스로 슬-쩍 수정했다

내 코드 리뷰 요약

이번엔 저번보다 많이 발전한 것 같아서 혼자 의기양양하고 있었는데 역시 나는 허접이 맞다 (ㅋㅋㅋㅋ)

혼자서 코드 작성하면서 놓쳤던 부분이 생각보다 많았다 ㅡ.,ㅡ;;

• 리드미 작성 굿
• 하단 탭에 현재 어느 탭이 열려있는지 디자인 디테일 추가하기
• 맨 처음에 input이 비어있는데도 컴포넌트 렌더링되면서 데이터를 요청하는 현상 수정하기 (중요)
• section 태그를 일반 컨테이너로 사용하지 않기 (MDN 참고)
• Route path prop 맨앞에 슬래쉬 제거하기
• require은 정말 정말 어지간하면 쓰지말자
• 에러문구 꼭꼭 잘 읽어보자
• 드래그앤 드랍 할 때 글자 드래그되는 현상은 user-select: none으로 막아버리자
• return null; 하는 컴포넌트는 차라리 hook으로 분리해서 라우터 등 최상위 요소에서 불러오자
• axios() 함수에 변수를 길게 넣는 것보다 axios.get() 을 쓰는게 더 간결하다
• axios 자체가 Promise이므로 async, await 필요없음
• any를 보면 거부감부터 느끼자 (타입 꺾쇠 안에라도 any는 지양하기)
• scss에서 import 대신 use를 쓰는 것이 코드 트리를 아끼는 차원에서 적합하다
• import 할 때 라이브러리 임포트를 최상위에 적자
• 깃허브 대소문자 인식안됨 ⇒ scss 파일 적용이 안되는 문제가 있었다 ㅠㅡㅠ; 캐시삭제하기
• 거창하게 짜는 건 못짜는거다 (명심)

다른 분들 코드 리뷰 인상깊었던 것

• image 태그에서 이미지 불러오기 실패하면 onError 이벤트로 콜백 함수를 걸 수 있다
• 회색 계열 색상은 아주 진하거나 연한 회색 아니면 애지간하면 사용하지 말자 (칙칙하다)
• 웹팩 자체기능인 auto-prefix가 브라우저별 최적 스타일링을 다 해준다 (moz 필요없다, CRA 짱)
• map ⇒ 새로운 배열을 반환하고자 할때 사용, forEach ⇒ 각 요소별로 함수 등 동작해볼때 사용
• map, forEach, push 세 개 메서드를 조합하지 말고 reduce 메서드로 해결가능하다
• !length 보다는 length === 0

이번 주에 할 것

리액트쿼리랑 리덕스 적용한 프로젝트를 보긴 했는데 내가 작성한 게 아니라 남이 작성한걸 구경만 했어서.. 써보는건 이번이 처음이다

벌써부터 매우 두렵다 솔직히 ‘쿼리' 두글자 나오면 동공지진오는거 인정? 왜 SQL 같은것만 생각이 날까

• react-query와 친구먹기 (중요)
• redux (+ redux-toolkit) 과 친구먹기 (중요)
• 브랜치 새로 파서 오늘 리뷰내용으로 코드 리팩토링 해보기
• 팀과제 시작

오늘 정리한 내용

react-beautiful-dnd

react-beautiful-dnd

React-Beautiful-Dnd

gh-pages로 리액트 프로젝트 배포 + 404에러 우회하기

gh-pages

gh-pages로 리액트 프로젝트 배포 + 404 에러처리

 

react-portal

react-portal

react-portal 사용해보기