새 프로젝트를 시작했는데, 콘솔에 계속 이상한 요청이 찍혔다./sw.js, _next/static/chunks/... 등등 404 오류가 반복적으로 발생했다.심지어 내가 명시적으로 서비스워커를 등록하지도 않았는데 말이다.왜일까? 처음엔 .next 폴더 캐시 문제인 줄 알았다Next.js 프로젝트에서 정적 파일이 404 나는 경우는 대부분 .next/ 폴더 때문이라고 알고 있어서, 바로 이렇게 지웠다.rm -rf .nextyarn dev그런데도 sw.js, _next/static/... 이런 요청들이 계속 404 Not Found로 찍히는 거다.심지어 새 프로젝트인데다가 없는 파일인데도 말이다.그래서 처음에는 “아 이거 Vercel 캐시인가?” “정적 경로 꼬였나?” 별의별 생각을 다 했는데… 원인은 다음..

Next.js에서 Image 사용방식대로 사용을 했는데,계속 경고가 발생한다. Next에서 Image 태그는 이렇게 alt와 width, height를 필수로 명시해줘야한다.근데 계속 콘솔에서 width: "auto", height: "auto"를 설정하라고 뭐라한다.그래서이런식으로도 해봤는데 오류가 발생한다.어떻게 해결하냐? width와 height를 둘다 style에서 props로 넘겨주면 된다.이렇게 작성하면 경고없이 깨끗하게 사용할 수 있다.

먼저 에러가 발생한 문제는 다음과 같습니다. App Router 기반에서 MUI 사용 시 발생하는 Hydration failed 에러발생 시점: AppBar, Typography, Button 등 MUI 컴포넌트 사용 시에러 메시지: "Hydration failed because the server rendered HTML didn't match the client..."  왜 문제가 발생했냐면, Next.js App Router는 SSR을 기본으로 하기 때문에 서버/클라이언트 렌더가 다르면 mismatch 발생했습니다.MUI는 @emotion/react를 사용해 동적 스타일 삽입하고있습니다.서버에서 렌더된 CSS와 클라이언트에서 렌더된 CSS가 일치하지 않으므로 → 오류가 발생한 상황입니다. MUI 공..

개발하다가 에러 너무 많이 봐서 미쳐버릴 것 같아서 이 글 씀.나중에 또 같은 거 디버깅하면서 구글링 하기 싫어서, 정리해둔다.HTTP 상태 코드 중에서 특히 에러 코드(4xx, 5xx) 중심으로.실제 어떤 상황에서 왜 뜨는지, 어떻게 해결할지 간단하게 적음. 4xx: 클라이언트 잘못 (Client Error)클라이언트가 뭘 잘못해서 생기는 에러. 주로 프론트에서 API 호출할 때 많이 뜬다.요청 자체가 틀렸거나, 권한이 없거나, 잘못된 URL 요청 등.상태코드의미설명400 Bad Request잘못된 요청요청 포맷 이상하거나, 필수 값 빠졌거나.401 Unauthorized인증 필요로그인 안 했거나 토큰 누락. Authorization 헤더 빠졌을 확률 높음.403 Forbidden접근 금지권한 있어도 ..

안녕하세요! 오늘은 Next.js 프로젝트에서 JWT 토큰을 이용해서 API를 호출하는 방법에 대해 이야기해보려고 합니다.저도 처음 해보는 거라 엄청 떨리고, 뭐가 잘 안 되면 어쩌나 걱정도 많았는데요,어찌저찌 하다 보니까 결국 성공해서 기분이 너무 좋더라고요!그래서 저처럼 처음 도전하는 분들을 위해 정리 겸 공유하려고 합니다.토큰 기반 API 호출이 뭔가요?프로젝트를 만들다 보면, 서버와 데이터를 주고받을 때 "너 누구냐?"를 꼭 물어봐야 할 때가 있어요.그럴 때 쓰는 게 바로 JWT (JSON Web Token)인데, 이걸 Authorization 헤더에 붙여서 보내면,서버는 "오, 네가 맞네~" 하고 요청을 받아주는 거죠.헤더에 붙이는 방법Authorization: Bearer 근데 이걸 매번 넣어..

Axios가 뭐야?Axios는 REST API랑 통신할 때 쓰는 라이브러리야.쉽게 말해서 클라이언트(프론트엔드)가 서버로 데이터를 보내거나 받을 때 쓰는 도구지.기본적으로 HTTP 요청을 보내는 데 쓰이는 함수 모음집이라고 보면 돼."야 서버야! 나 이거 좀 줘!" 혹은 "야 서버야! 이거 좀 저장해!" 같은 걸 쉽게 할 수 있게 해주는 거야.REST API가 뭐야?REST API는 서버랑 클라이언트가 데이터를 주고받는 규칙이야.서버는 데이터를 주고받을 때 상태를 기억하지 않아서 무상태성을 가지지."한 번 요청하고 끝! 다음 요청 올 때는 몰라~"이게 바로 무상태성이라는 건데,그래서 매번 서버한테 "나 진짜 맞아, 이거 내가 요청하는 거야!"라고 증명해야 돼.그걸 하기 위해서 JWT 토큰을 쓰는 거야.근..

Next.js에서 뷰포트(viewport)를 설정하려다가 "Unsupported metadata viewport" 오류를 만난다면?최근 Next.js 업데이트로 인해 기존의 metadata.viewport 방식이 더 이상 지원되지 않기 때문!지금부터 오류 원인과 해결 방법을 정리해보겠습니다. 😊export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", viewport: "width=360, height=800, initial-scale=1, user-scalable=no",};Next.js layout.tsx에서 위처럼 metadata.viewport을 설..

약 40분 전, ‘커플팰리스’라는 예능을 보면서 흥미로운 생각이 들었다.출연한 부자 남성들이 이상형을 이야기하는데, 연봉? 직업? 모아둔 재산?그런 건 전혀 중요하지 않았다.그들의 선택 기준은 단 하나."예쁜가, 안 예쁜가."처음엔 좀 황당했다.“아니, 결혼인데 외모가 전부야?”그런데 가만히 생각해보니, 이건 단순한 취향 문제가 아니었다.사람들은 왜 예쁜 사람을 좋아할까?이유는 간단하다. 예쁜 사람이 드물기 때문이다. 희소성이 곧 가치다.그럼 이걸 이렇게도 생각해볼 수 있다.우리는 왜 선한 사람을 칭찬할까?그것도 선한 사람이 드물기 때문이 아닐까?만약 세상 모든 사람이 선하다면, 굳이 선을 특별하게 여기지 않을 것이다.마치 우리가 숨 쉬는 걸 당연하게 생각하듯이.여기서 문득 궁금해졌다."그렇다면 인간의 ..