프로젝트 기록
1.axios interceptor 적용해보기
이전 프로젝트에서는 axios를 잘활용하지 못했다는 피드백을 받았다. 아래 코드와 같이 모든 곳에서 headers를 넣어주고 있고, content type이 application/json인 경우는 "Content-Type"="application/json"이렇게 일일히
2.[nextjs] title 적용 / hoc 패턴활용하기
이렇게 할 경우, 일일히 페이지에서 html에 Seo컴포넌트를 추가하고 props로 title을 넣어줘야한다. 이에 대해서 묶어서 어떻게 해결할 수 있을까 ? SSR getServerSideProps함수 > pageProps에다가 넘겨준다. 적용해보니 SEO 컴포넌
3.[next js] 리다이렉트 시 깜빡임 문제 > 미들웨어 적용하여 페이지별 접근 제어하기
Client에서 직접 router를 통해 redirect를 할 경우, 페이지가 깜빡임 (실제로 해당 페이지에 한번 접근해서 잠깐 보여졌다가 곧바로 redirect 되는 동작) Server 환경을 이용해서 위 문제 없이 곧바로 redirect 할 수 있음.
4.[React] React-Query 무효화, React Query Devtools 이용
React Query Devtools를 사용해보았다. 오늘의 할일을 넣어주면1\. 오늘의 할일 리스트에 추가된다.2\. 달력에서 12월 8일에 일정이 있음으로 o이모티콘이 추가되어야한다. 이렇게 두가지가 이루어져야한다. 달력에서 데이터를 불러올 때의 쿼리키\["plan
5.[nextjs] Portal 사용해서 Modal띄우기
React portal을 이용하면 UI 를 어디에 렌더링 시킬지 DOM 을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해줄 수 있다. 즉, DOM 의 계층구조 시스템에 종속되지 않으면서 컴포넌트를 렌더링 할 수 있게 된다. 프로젝트를 진행하면서 부모 컴
6.[React] react-hook-form React.forwardRef 에러 해결
이 전에 컴포넌트 분리가 잘 안되었던 것 같아서 이번에는 재사용 가능한 컴포넌트들을 최대한 분리해보려고 한다. 그래서 이번에 원티드 프리온보딩에서 라벨, 인풋, 에러메시지를 하나로 묶어서 하나의 컴포넌트로 만들고 여기서 input 유효성 검사를 편리하게 하기 위해서 r