Front-end

벌써 몇 번을 이 문제를 가지고 시간낭비를 해놓고서 또 삽질을 해버린 삽질 전문가... {expenses.map(({ date, desc, amount, payer }) => { {date} {desc} {payer} {parseInt(amount)}원 ;})} 아무리봐도 코드에 문제도 없고 콘솔에 찍어봐도 깨끗한데 동작이 되질 않는다.입력한 값을 콘솔로 찍어보면 나오는데 저장된 상태를 불러오려고 하니 undefined가 반환되서 상태관리를 잘못했나? 싶어다른 곳에서 한참 시간을 낭비했다.  이유는?간단했다. 냅다 {} 를 사용해버려서 생긴 문제. ()로 바꿔주니 간단하게 해결됐다.  이 둘의 차이를 정리해보자. { } {expenses.map(({ date, desc, amo..

🚨 에러 발생중간 배포를 하기위해 vercel에서 배포를 해주니 이러한 에러 폭탄이 날아왔다. 읽어보니 useSearchParams()를 사용하는 페이지는 suspense로 감싸줘야 한다고 한다.  공지사항페이지에서 탭마다 경로를 쿼리파라미터로 설정해주기 위해서 useSearchParams를 사용했는데 이것때문에 에러가 발생한것 같다.  💡 에러 해결 문제는 그리 어렵지 않게 해결할 수 있다. useSearchParams를 사용해준 컴포넌트를 suspense로 감싸주기만 하면 된다.  }> {children} {pathname !== "..

매번 팀프로젝트를 진행할 때마다 팀 레파지토리를 클론해와서 프로젝트를 진행하는데 끝난뒤에는 내 개인 레파지토리에 옮기고 싶어서 로컬에 있는 소스들을 한꺼번에 개인 레파지토리에 푸쉬하곤 했다. 이렇게 하니 그동안 쌓아두었던 커밋기록들이 없어져서 아쉬움에 방법을 찾아보니 아주 간단하게 해결할 수 있었다.  개인 레파지토리를 만들고 로컬에서 원격저장소를 추가해주면 된다!  1. 개인 레파지토리 생성내 깃허브에 가서 새로운 레파지토리를 생성한다. 2. 로컬에 새로운 원격저장소 추가 git remote add 새로운저장소이름 https://github.com/yourusername/레파지토리주소.gitex) git remote add personal https://github.com/yourusername/my-..

🚨 에러 발생 회원가입 완료 페이지에서 로그인하러 가기 버튼을 눌렀을 때 로그인 페이지로 경로 이동을 하기 위해import { useRouter } from 'next/router';const router = useRouter();const handleLoginRedirect = () => { router.push("/login"); }; useRouter를 사용했는데   NextRouter was not mounted 에러가 발생했다. 1차적인 해결방법은 "use client"를 최상단에 명시해주는 것이다. 하지만 나는 이미 Page에 "use client"를 명시해준 상태이기 때문에 따로 적어줄 필요가 없었다.  💡 에러 해결찾아보니 13버전 이상의 app 라우터에서는 "use client"를 사..

🚨 에러 발생 목데이터 서버를 구축하기 위해 MSW를 사용하려고 설치를 한 뒤 mockServiceWorker.js를 생성하기 위해npx msw init public/ --save 로 를 설치하고 생성하려고 하는데 ES Module 에러가 발생함.  처음에는 당연히 노드 문제라고 생각하고 찾아서 한참 헤맸다. 찾아도 안나오길래 노드문제가 아니라 다른 문제인거 같아서 방향을 다르게 해서 찾아보니 내가 사용하고 있는 패키지 관리자가 yarn 인데 yarn 1의 의존성 문제라는 걸 찾아냈다.  💡 에러 해결yarn cache clean --allrm node_modules/ yarn.lock package-lock.jsonyarn 패키지 관리자 캐시를 지우고 현재 프로젝트의 yarn.lock package..

이번 프로젝트의 필수 사항 중 하나인 리덕스툴킷! 확실히 리덕스의 아키텍처를 먼저 이해하고 보니 리덕스 툴킷이 훨씬 사용하기 쉽고 편리하다는 걸 알 수 있었다.    우선 Redux, React Redux, Redux toolkit 각각의 역할에 대해 알아보자.Redux : 상태 관리자, 프로그램이 동작하는데 필요한 데이터를 체계적으로 관리해주는 도구리덕스 자체는 리액트에 최적화되었다기 보다 자바스크립트로 된 프로젝트에 최적화된 도구라고 할 수 있다. 리액트에서 사용하기 쉽게 등장한것이 react redux이다.React Redux : 리덕스와 리액트를 연결시켜주는 도구그럼에도 불구하고 리덕스는 많은 설정을 해줘야한다는 것과 코드의 양이 방대해지는 단점들이 생김 이러한 단점들을 보완하기 위해 나온것이 R..