상황 목표 삭제 시 낙관적 업데이트가 이루어지도록 설정한 상황이다.따라서 목표를 삭제하고 삭제가 성공적으로 이루어졌다면 왼쪽 네브바에서 목표가 깔끔하게 사라져야 하는데 ,낙관적 업데이트가 적용된 것처럼 바로 없어졌다가 다시 생겼다가 없어졌다. 해결많은 시도 끝에 원인은 mutateFunc가 onError를 거쳐 previousData를 보여주고 onSettled를 거쳐 삭제된 상황을 다시 보여주기 때문이었다.진짜 에러가 났다면 사실은 다시 생긴채로 유지가 되어야 하는데, onSettled를 통해 삭제가 적용된 것을 보면 삭제 자체는 잘 이루어진 것을 알 수 있다.-> 정답은, 삭제는 잘 이루어졌다. 그래서 204응답이 왔다. 그런데 이때 mutateFunc에서 return res.json()을 했기 때문..

export const THEME_COLORS = [ { id: 'blue', primary: 'bg-[#60A5FA]', secondary: 'bg-[#DBEAFE]' }, { id: 'green', primary: 'bg-[#34D399]', secondary: 'bg-[#D1FAE5]' }, { id: 'pink', primary: 'bg-[#F472B6]', secondary: 'bg-[#FCE7F3]' }, { id: 'purple', primary: 'bg-[#A78BFA]', secondary: 'bg-[#EDE9FE]' },] as const; 해당 파일을 constants에 만든 다음에 import { THEME_COLORS } from '@/constants/thems'; imp..

현재 진행하는 프로젝트에서는 custom fontsize랑 custom color를 사용하고 있는데,twMerge에서 계속 색이 입혀지면 글자크기가 안입혀지는 문제가 나타났다. 이 문제는 chatgpt도 해결 못해주었다^^Stack Overflow가 아직 살아있음에 매우 감사하다.https://stackoverflow.com/questions/78185697/why-custom-tailwind-font-size-is-overwritten-by-text-colour-classㄴ 여기 답변에 의해 답을 얻었다. 이게 twMerge가 제대로 custom color, fontsize를 제대로 구분못하고 병합하는 문제 때문인데, twMerge는 뒤에 나오는 class를 더 우선순위를 둔다. tailwind에서 t..

멘토님이 tailiwind.config.ts에 정의한 사용자 스타일들 많아지면 presets폴더의 color.ts, fontSize.ts와 같이 빼라고 하셔서 빼서 import했는데tailwind에서 계속 인식을 못하는 오류가 떴다 ^^ 이유alias사용해서 import했기 때문에 .. claude 왈tailwind는 next애플리케이션이 완전히 빌드 되기 전에 빌드될 수 있어서,별칭을 제대로 해석 못할 수 있다. 해결 방법상대 경로 사용import fontSize from './src/presets/fontSize'; 원인이 alias때문인지도 모르고, 객체에 타입을 붙여보고 별 시도를 다 해봤다!! ㅎㅎ이번 문제에 있어서는 chatgpt   참고로 fontSize코드는 다음과 같다.const font..

문제나는 지금 웬만한 요청은 routeHandler 방식을 사용하고 있는데, 이번에 깨달은 게 있다.클라이언트에서 '/api/country' 로 fetch요청은 가능하지만,서버에서 '/api/country' 로 fetch요청은 불가능하다.일단, 내가 요청하는 주소가 현재 상대경로이다.클라이언트의 경우 브라우저는 현재 호스트를 기반으로 해서 api를 요청하는데,따라서 상대경로로 fetch요청을 하면, 알아서 현재 호스트를 앞에 붙여서 요청한다.결국, 'use client'를 붙인 컴포넌트에서 해당 fetch요청을 하면 문제가 없다.그러나, 서버의 경우는 현재 호스트정보가 없기 때문에 상대경로로 fetch요청을 하면 INVALID_URL 에러가 발생한다.클라이언트 컴포넌트와 서버 컴포넌트에서 같은 api요청..

1. root directory에 .env 파일 생성❗️무조건 root directory❗️src 밑에 안됨 2. REACT_APP_ + 원하는 이름 = 으로 변수 생성 ❗️뒤에 세미콜론 붙이면 안됨💡만약 next라면 아마도 NEXT_APP_ 이런식으로 ! 3. (create react app은 생략 가능)npm install dotenv❗️만약 create react app으로 프로젝트 생성했다면 이미 자동으로 설치되어 있음 4. 원하는 파일에서 process.env.REACT_APP_이름 으로 환경 변수 접근 ⭐️ 5. 실행중인 local 서버를 껐다 키기 ⭐️원래 실행중이던 localhost에서는 적용 안됨 Ctrl + c로 종료 시키고 다시 npm run start 해야함 5번 방법을 몰라서 계..

최근에 스니펫에 대해서 알게 되었다.약간 단축키 만드는 거라고 생각하면 이해하기 쉽다. 1. VSCode 내에서 command + shift + p 를 통해 VSCode 검색창을 연다.2. snippets: Configure User Snippets를 클릭 3. 이 프로젝트만 설정할게 아니라 앞으로 다른 프로젝트에도 쓰고 싶기 때문에 global-snippet을 추가해준다. 4. 이제 파일을 설정해주면 된다이건 내가 설정한건데, 파일 이름에 따라서 컴포넌트를 자동으로 생성해주는 스니펫이다. ⭐️ 5. scope에 사용하는 언어나 프레임워크를 넣어준다. ⭐️ex) react를 사용한다면 javascriptreact, typescript도 사용하면 typescriptreact 넣어줘야 함! 대충 설명하자면 ..

현재 노마드코더 - nextjs 강의 수강하면서 듣고있는데,예상치 못한 곳에서 난관에 부딪혔다. 일단, 처음으로 nextjs 프로젝트 git에 올리는데 이상하게 용량이 커서 push가 너무 느렸다.그래서 gitignore에 node_modules등 추가해서 올리는데, 문제는 git push할때File node_modules/@next/swc-darwin-arm64/next-swc.darwin-arm64.node is 109.62 MB; this exceeds GitHub's file size limit of 100.00 MB해당 오류가 뜬다는 것이다.file node_modules/로 에러가 뜬 것을 보면 gitignore에 node_modules를 넣었음에도 제대로 적용되지 않은 것을 알 수 있다. 문..