작심삼일 개발이야기

client.js:2 The above error occurred in the component: at Header at LoginContainer at Login at div at eval at main at eval at LoginLayout at AuthProvider at RoutePathProvider at Root at ThemeProvider at QueryClientProvider at RecoilRoot_INTERNAL at RecoilRoot at MyApp at I18nextProvider at AppWithTranslation at PathnameContextProviderAdapter at ErrorBoundary at ReactDevOverlay at Container at Ap..

Justit을 사용해 Lighthouse를 돌려보았는데 접근성 점수가 엉망진창이다... 알려주는 대로 하나씩 고쳐보았다. Buttons do not have an accessible name 프로젝트 에러 상황 버튼 내 아이콘만 존재하는 경우에 스크린 리더가 접근 했을 때 해당 버튼이 어떤 동작을 하는지 알 수 없었다. 중요한 이유 스크린 리더는 접근 가능한 이름이 없는 role="link", role="button", role="menuitem"이 있는 요소의 용도를 식별할 수 없다. 규칙 버튼에는 스크린리더 사용자를 위해 distination, purpose, function, action을 명확하게 설명하는 식별 가능한 텍스트가 있어야 한다. Name Button label Name 1. 각 버튼 ..

useQuery로 프로필 데이터를 가져온 뒤 useMutate를 사용해 프로필 이미지를 업데이트했을 때 프로필 이미지가 변경되지 않는 이슈를 발견했다. const queryClient = useQueryClient(); // 프로필 데이터 GET useQuery const { data: profile } = useQuery(); // 프로필 이미지 수정 useMutate const { mutate: usePostProfileMutate } = useMutate(); // 프로필 수정 핸들러 const handleUpdateProfile = () => { usePostProfileMutate(imageFile, { onSuccess: () => queryClient.invalidateQueries(["프..

Form submission canceled because the form is not connected form안에서 submit용으로 버튼을 사용하지 않으니 위와 같은 경고가 발생했다. button의 기본 타입은 submit이어서 button용도로 사용하려면 type을 button으로 명시해줘야 한다. (button에 type="button"을 사용하는 이유) button에 type="button"을 사용하는 이유 다른 사람의 코드를 읽다 보니 을 본 적이 있다. 한 번도 button에 type을 사용해본 적이 없던 나로서는 뭘까 싶었다. 솔직히 아무 문제없이 잘 사용하고 있어서 별로 관심이 없었던 것도 있다. button choisuhyeok.tistory.com 해결방법 1 버튼 해당 버튼에게 t..

react-draggable 라이브러리를 사용하다 warning 발견 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode. Instead, add a ref directly to the element you want to reference. react-draggable에서는 아래와 같이 말하고 있다. If running in React Strict mode, ReactDOM.findDOMNode() is deprecated. Unfortunately, in order for to work properly, we need raw ..

const router = useRouter(); console.log(router); 단 2줄로 에러가 발생했다. console.log가 안된다 ㅋㅋㅋ const router = useRouter(); console.log("", router); console.log 첫 번째 인자로 빈 문자열을 넣어서 해결 가능하다. 해결해주겠지...

배열을 sort 하려는데 에러 발생... 해결방법 [...배열].sort() 스프레드 문법을 이용해서 새로운 배열로 만들어준 다음에 sort를 했다... 꼭 스프레드 문법이 아니라 map같이 새로운 배열로 만들어 주는 것도 하나의 방법일 듯 아직 원인 파악을 하지 못했다. 아시는 분 알려주세요. read only property라서 그런가...

Cookies.set을 하는 도중에 해당 에러를 만났다 const parseJwt = (token) => { const base64Url = token.split(".")[1]; const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/"); const jsonPayload = decodeURIComponent( atob(base64) .split("") .map(function (c) { return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2); }) .join(""), ); return JSON.parse(jsonPayload).expires_in; }; Cookies.set("refreshToken..

터미널에서 git commit을 하다가 강제로 종료 후에 다시 커밋하려니 아래와 같은 에러가 발생하였다. E325: ATTENTION Found a swap file by the name "~/.git/.COMMIT_EDITMSG.swp" 해결 방법 // 해당 폴더 터미널에서 .git 폴더 접근 cd .git // 모든 폴더 검색 ls -a // .COMMIT_EDITMSG.swp 파일 삭제 rm .COMMIT_EDITMSG.swp 참고 https://stackoverflow.com/questions/14513349/e325-attention-found-a-swap-file-by-the-name-git-commit-editmsg-swp/14529150

props로 받아온 값을 useState의 초기값으로 사용하여 렌더링 할 때 값이 분명 변경되었는데 useState에 들어간 값이 변하지 않는 문제가 생겼다. 이유는 useState의 초기값으로 props를 사용했기 때문이다. const Box = ({ num }) => { const [boxState, setBoxState] = useState(num); return box State ${boxState}; }; const App = () => { const [parentState, setParentState] = useState(); return ( parent state: {parentState} ); ); 이렇게 Box컴포넌트에서 전달받은 num이라는 props를 useState의 초기값으로 할당..