문제해결
1.npm 에러 해결
어제부터 갑자기 npm에 오류가 발생하기 시작했다.
2.Git personal access token
평소처럼 git push를 하는데 에러가 발생했다. 에러의 원인은 2021년 8월 13일부터 패스워드 기반 인증을 지원하지 않기 때문이다.
3.Recoil - Duplicate atom key ~~~ 에러 해결
Recoil에서 발생한 Duplicate atom key 문제를 해결해보자.
4.React와 Next.js의 Cors 에러 해결 (Proxy)
BackEnd Developer가 설계한 API에 요청을 보내려다 보니 CORS 가 발생했다. React Next 환경에서 Proxy를 이용하여 해결해보자.
5.useRouter 첫 번째 렌더링 undefined Bug
Next.js 에서는 query string값을 사용하고 싶다면 useRouter를 이용할 수 있다. 하지만 이 값을 이용하여 데이터를 요청하면 원하던 대로 동작하지 않을 수 있다.
6.Axios에서 HTTP request를 이용하여 에러 처리
Network 탭의 Response 값 가져오기
7.useRef의 파라미터에서 타입
TypeScript 환경에서 useRef를 사용하고 있었다. 그리고 이 ref값을 함수나 훅스에 넘겨주는 과정에서 문제가 생겼다.
8.useEffect의 실행 시점과 로딩 처리
뒤로 갔다가 다시 입장할 경우 로딩창이 나타나지 않고 깜빡거림이 나타나는 문제점
9.React Query에서 버튼 클릭시에 데이터를 요청하는 방법 (feat. useQuery)
프로젝트를 설계하다가 특정 이벤트를 발생할 경우 데이터를 요청하는 구조가 필요했다. useQuery를 이용하여 무지성으로 구현하는 방법과 정석으로 구현하는 방법을 알아보자.
10.ContextAPI에서 useState로 관리하는 값을 Provider로 내려주기
오늘은 간단하게 To fix this consider wrapping it in a useMemo hook 에러를 해결하는 방법을 알아보자.
11.타입스크립트에서 Object의 대괄호 표기법 허용하기
bracket notation property access (TypeScript)
12.Next.js(SSR)에서 nth-child 경고
nth-child 대신에 nth-of-type을 사용하기
13.Browserslist 에러를 해결하는김에 알아보자
오랜만에 실행한 프로젝트에서 Browserslist 에러 발생
14.Git, GitHub - branch, merge
이제 브랜치를 사용하며 개발해보자.
15.hover시 previous(이전) 요소에 스타일 부여하기
Element를 hover할 경우 다음(Next) Element도 hover한 효과를 구현하는 것은 css를 이용하여 쉽게 할 수 있다. 하지만 이전(previous) Element들에게도 hover 효과를 넣는 것은 다른 문제다...
16.반복되는 Catch 한 번에 처리
api 통신 로직 분리와 프로젝트 특성상 반복되는 예외 처리에 대한 고민
17.CSS Server Side Rendering
Next.js를 사용해 SSR을 설계했었는데, CSS도 SSR을 해줘야 한다는 사실을 알게되었다.
18.페이지 접근 제한할 때, URL에 직접 접근하는 유저는 어떻게 처리할까?
Custom Hook을 생성하여 사용 vs getServerSideProps(SSR)를 이용하는 방법
19.사파리 이벤트 동작 방식 다른 문제점
찝찝한 해결