오늘?
- 이력서 초안 다듬었음.
- 인프런 강의 (NodeBird) 공부 시작
공부한 내용들
- FE 개발자는 더미데이터를 적극 활용해서 API 서버가 갖춰지지 않은 상황에서도 페이지를 잘 만들 수 있어야 한다.
- next.js
_app.js에서 페이지들의 공통 부분을 처리하자. (ex: 헤더 or 푸터 등)
<head>
를 수정하고 싶다면? next.js가 제공하는 컴포넌트 <Head>
를 사용해보자.
- React
함수를 캐싱하는 useCallback
, 값을 캐싱하는 useMemo
는 성능 최적화에 도움을 줌.
자주 사용하는 handler -> custom hook을 활용하자.
- 리렌더링
리렌더링됨 => 함수 안 부분이 다시 실행됨 (ok)
but 다시 전부 그리는 것이 아닌, 바뀐 부분만 다시 그린다.
인라인 스타일을 적용할 경우, 리렌더링시에 객체가 다르다고 판단하여 스타일 부분을 계속 재렌더링함 -> 성능 저하
Styled-Component를 사용하거나, useMemo를 활용하자.
- ant-design
grid - 24등분
row, col - 반응형 가능
반응형 디자인을 할때 생각해야할 것
-> 가로 먼저, 그다음 세로로 자르기
-> 모바일 디자인(xs) 먼저! 그 후 태블릿(sm), 데스크탑(md) 순
-> <form onFinish>
-> e.preventDefault() 적용되어있음.
내일 할 것
- 오늘 공부한 CSR, SSR 동작 과정 그려보고 다시 이해하기
useCallback
, useMemo
간단 정리
- ch3 Redux 강의 듣기
- 에피소드 브레인스토밍