프리온보딩 6일차
1. 팀과제 todo 마무리
-창열기 애니메이션 구현
버튼 클릭시 우측 하단에 나타난 원이 점점 커지다가 꽉 차게 되면 요소 별로 시간차를 둔 fadeInDown 애니메이션 구현 => keyframe 및 scss의 @for 반복문 활용
-addTodoList 커스텀 훅으로 빼서 관리
todoList를 건드리는 로직을 따로 훅으로 분리시켜 뷰와 로직을 분리함으로써 가독성 향상 및 유지보수 용이
-Input값 미입력시 커스텀 alert창 구현
린트에서 브라우저의 기본 alert창은 사용자 눈에 잘 띄지 않아 커스텀 alert 권장 => 라이브러리 sweetAlert2 사용하여 구현. // 기본 alert창 동작동안 자바스크립트 동작이 멈춘다.
-카테고리 선택기능 구현
버튼 클릭 시마다 배열을 순회하며 해당 값과 컬러를 state로 관리하고 이를 화면에 표시_ 배열이 추가되도 동작하도록 확장성 고려
-로컬스토리지에 새항목 추가
브라우저를 닫아도 추가한 목록을 유지하기 위해 로컬스토리지에 저장기능구현
-list의 id값 난수화
기존 id에 인덱스 처럼 번호를 부여했는데, 삭제,수정 시 id값 충돌발생. 아예 난수값을 부여해 각 id값의 의존성 제거 => 라이브러리 uuid 사용
2. 개인과제 리팩토링
잘 한 분들 깃헙 구경하면서 이번에 배운 sccs를 이용해서 구현.
평소 코드를 길고 복잡하게 짰는데, 조금이라도 더 단순하고 짧게, 또 div이외의 태그를 사용해려고 노력.
3. 일요일 실강 수강
3-1팀과제리뷰
- slick.js 로 캐로셀 carousel 마우스로 드래그해서 넘어가는거 구현가능
- 코드 200줄 넘어가면 150줄 끊어주기
- onClick같은 이벤트 바로 setState하지말고 위에 함수로 따로 빼주기
- if, else문 각 끝에 중복 있으면 마지막에 하나만 써주기
- 린트 에러 노란줄 및 빨간줄 절대 무시 하지말기! // 해당 내용 기록
- store.js를 사용하면 로컬스토리지 json변환을 쉽게 구현가능
- setCategoryInLocalStorage 함수 이름 잘 지었음
- 검색 기능 구현시 퍼지서치 이용하기
- useMemo는 어떤 값을 저장, useCallback은 어떤 함수를 저장한다. useMemo나 useCallback을 감싸주면 디펜더시가 변하지 않는 이상 메모리에서 기억해서 사용. 이 때 퍼포먼스에 비해 메모리가 많은 경우가 있어 빡센 작업 이외는 X
- setTimeout을 사용할 땐 반드시 clearTimeout도 같이 사용. 그렇지 않으면 다른페이지로 이동하는 등 타임아웃이 걸린 상황에서 언마운트되면 리액트 에러가 발생
- 로컬스토리지로 받아온 값 같은 경우 바로 map돌리지말고 위에서 변수로 따로 빼주고 아래에서 사용
- state에 객체 웬만하면 넣지않기(특히 토글값들)
- useCallback은 캐시에 대한 거고 useEffect는 실행을 못하게 하는거
- 리코일 짤 때 키값 처음에 #을 넣으면 겹치지 않아 좋음
- before태그에 버튼의 텍스트를 넣었는데, 버튼 자체의 텍스트니 html단에 존재해야 맞음\
- npm, yarn 큰 차이없음. 하지만 프론트엔드들끼리 같은 거 사용!
3-2 html, css
- 다양한 html요소 잘 섞어 사용하기
- 헤더, 푸터, 네브, 어사이드..
- h1, h2같은 헤딩 ul,ol,li,dl,dd, dt,time 등의 양념
- form, data-list 같은 필수적인 것도 공부하기
3-3 질문, 검색하는 방법
- 한글보다 영어로 치는게 검색결과가 20배는 잘 나옴. 무조건 구글!
- 에러가 나면 로그가 나올거고 해당 에러 로그 검색하기.
- 오픈소스라이브러리는 깃헙 이슈 탭보면 실시간에 가짜운 자료 있음
- 커뮤니케이션을 잘하는 것은 핑퐁이 아니라 최대한 한방에 원하는 내용을 전달하고 답변받을 수 있는 것
3-4 이미지최적화
- https://squoosh.app/ 에서 실제 사이즈에서 차이가 있는지 확인하면서 용량 줄이기
- 색많은건 jpg 적은건 png로 압축
- jpg는 손실압축으로 원본을 뭉개가면서 줄임
- gif는 뭔짓을 해도 png파일 보다 용량이 큼
잘하고싶다...