프리온보딩 12일차
오늘 한 일
- 15분 독서(IT좀아는사람)
- 인프런 알고리즘 강의 듣기
- 그립컴파니 과제제출 https://github.com/wkqkel/pob2-grip-task
- 면접질문 1개(THIS)
- 실시간 강의 수강
2. 일요일 실강 수강
2-1 그립컴파니 개인과제 몇몇 분 리뷰
1번 피드백
- readme 빡세게 gif까지 만듬
- axios 세줄이면 될 걸 장황하게, 거창한 것은 좋지않은 코드! => 심플한게 읽기 쉬운 코드
- 검색어 없으면 요청 안 날리게 처리해서 서버 헛수고 막기
- 드래그 앤 드랍시 마우스로 파란색 처리 user-select:none 으로 막기
- 섹션 태그는 h1같은 태그와 같이 사용
- import 노드 모듈스는 꼭대기에, 다른 애들은 아래로 내려주는 센스
- require쓰지말고 import쓰기
- 깃은 기본적으로 대소문자 구별 X => 파일명 변경시 따로 처리해줘야함 => 구글 검색
- scss mixin불러올때 @import는 그 자리에 코드가 다시 통째로 들어가는 것이니 @use사용하기 // 당장 적용 가능
2번피드백
- li태그에 onClick 달지말고 li 안에 버튼넣기 // 당장 적용 가능
- dt,dd는 dl로 감싸주기 // 당장 적용 가능
- 액시오스 자체가 promise라 async,await로 안감싸도 됨
- hook같은거 뺴는 기준은 위에서 정의해서 쓰다가 150줄 넘을 것 같으면 utils같은 곳에 파일 따로 빼서 사용
- backdrop-filter:blur(2.1px) 하면 그럴싸한 효과낼 수 있음.
3번 피드백
- css에 브라우저 대응 moz붙이는거 알아서 브라우저, 웹팩이 다 해줌.. // 당장 적용 가능
- 쿼리스트링 사용한 것 잘함_ 그러면 검색결과를 링크로 공유 가능 // 당장 적용 가능
- 바깥에 클릭했을 때 닫히는모달 처리 잘했음
- 루트에 슬래쉬빼기 잘했음
- async, await 사용시 then도 불필요
- text-align: start는 쓸 일 없을 것(다른 나라 언어 시 이상하게 보임), 그럴 땐 left,right 사용
- 스타일에서 어떤 태그인지 읽히지 않는 div 같은 태그는 클래스네임으로 적어주기
- 드래그앤드랍도 직접 깔끔
- 개인적으로 !length보단 length===0 선호
4번 피드백
- 인터넷에서 코드 참고하다보면 import 할 때 어떤 건(useState 같은 훅 등) 디스트럭처링해서 가져오고 어떤 건(FormEvent같은 타입, React.lazy, React.memo 등) 그냥 React만 불러오는 경우를 자주 봤는데 그냥 디스트럭처링 할 거면 전부 하는 게 좋을까요? 그냥 React로 불러와서 쓰는 건 그게 컨벤션인가 해서 그렇게 써왔거든요 => 본인같은 경우는 다 디스트럭쳐링해서 들고옴! // 누군가의 질문
- @use 'styles/mixin/typegraphy' 사용하기!
- @include typography.lineclamp(2,24) // 파라미터로 몇째줄까지, line-height 넘겨줌
- 포지션 sticky했다 상위에 overflow-hidden하면 난리남
- 네브바 링크 처리시 링크 클릭하는거 클릭드말고 네브 링크로 꼭 처리=> 주소창으로 입력시 onCLick으로 처리하면 먹지않음.
- 맵을 돌릴꺼면 ul을 써고 li로 감싸기 딱좋음.
- i는 보통 인덱스를 의미
- 리턴이없으면 맵이나 forEach,, 푸쉬를 할거면 리듀스를 사용
- 검색안했을때 페이지넘버 0으로 넣어놓지말고, 1 넣어야함 // 나도 잘못함
- 북마크를 처리할 땐 기존 배열에 속성을 추가하는 것이 아니라 새로 북마크된 배열을 만들고 거기에 포함되는지 체크하는 방식으로 구현해야함
- 섹션에 온클릭 넣지말고 버튼 넣기. 버튼이 거대하면 이상해보일 수 있어도 그게 낫다.
- import에 ../ 하는거 안붙여도 되게 셋팅! // 무슨 코드가 그렇게 한지 찾아보기
3. 과제 공지
- 팀 2개로 나눠서 공공기관 api를 이용한 검색어 추천 검색창 클론 코딩
- 로컬캐싱은 리액트 쿼리 => 입력마다 호출 X
- 인풋에 입력한 값 진하게 보여주는 처리는 mark태그 사용하기 (스팬X)
- 퍼지 검색 라이브러리 사용하기
4. 라이브 실습 강의
0. 리덕스 툴킷
1. 다크모드
- 마운트됐을 때 리덕스의 컬러테마를 가져와서 도큐멘트에 컬러테마에 집어넣어줌.
- 이렇게 투두리스트의 다크일때 배경색을 변할수있음.
2. 리액트쿼리 (서스펜스, 에러바운더리 적용까지)
3. 모바일 대응
- 픽셀 + 미디어쿼리로 작업
- 모바일퍼스트라해서 모바일을 먼저만들고, 데스크탑으로 키우는게 코드량이 훨씬 더 적다.
- 지금은 리액트쿼리랑 리코일 섞어쓰는중, 기술 스택으로 리액트, 리덕스툴킷, 리코일 약간, 액시오스, 빅넘버js,클래스네임스,date-fns,빅토리차트,스토리북,타입스크립트,es린트빡세게적용, 웹소켓으로 데이터를 받아옴.
- 이 POB를 하면서 여러 라이브러리나 스택들을 사용해볼텐데, 키워드 및 사용법 기록하기!
- 내일 공부할 내용 : 오픈API사용법정리, 리액트쿼리, 리덕스툴킷, 키보드만으로 검색이동, 퍼지문자열검색지원
- 뭔지, 장단점, 어떻게 쓰는지.
잘하고싶다...