웹개발

먼저 에러가 발생한 문제는 다음과 같습니다. 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는 React 기반의 프레임워크로, 웹 개발자들에게 파일 기반 라우팅을 제공합니다. Next.js 13에서는 새로운 라우팅 시스템인 App Router가 도입되었으며, 기존 Page Router와 함께 사용 가능합니다.이 글에서는 App Router와 Page Router의 차이점, 각각의 특징, 그리고 어떤 상황에서 어떤 라우팅 방식을 선택해야 하는지 명확하게 설명하겠습니다.1. App Router와 Page Router란?App Router (Next.js 13 이상)기반 디렉토리: app/React의 서버 컴포넌트(Server Components)를 기본으로 사용.더 나은 레이아웃 재사용과 중첩 라우팅을 제공.서버 사이드 데이터 패칭과 클라이언트 컴포넌트를 혼합하여 효율적인 UI 구축 ..

React는 SPA(Single Page Application) 구조를 지원합니다. 그런데 일부 웹 애플리케이션은 MPA(Multi-Page Application)구조를 가집니다. 이번 글에서 React Router DOM을 사용하여 SPA구조를 어떻게 구현할지, 그리고 MPA구조와 어떻게 비교할 수 있는지를 다뤄봤습니다.React Router DOMReact Router DOM은 리액트 애플리케이션에서 패이지 간에 네이게이션을 관리하는 라이브러리라고 생각하시면 됩니다. 이를 사용해서 클라이언트(사용자)쪽에서 페이지를 새로 고침하지 않아도 다른 페이지로 전환할 수 있습니다.React Router DOM은 SPA구조에 적합하며 페이지 이동시에도 브라우저가 새로고침되지 않고, 필요한 컴퓨넌트만 렌더링하여 성..

JavaScript에서 비동기 작업을 처리할 때 콜백 함수는 유용합니다. 하지만 콜백 함수를 여러번 사용하면 중첩이 발생하여 콜백 지옥에 빠질 수 있습니다.이때 Promise를 이용하면 코드를 깔끔하게 짤 수 있습니다.Promise란?Promise란 비동기 작업을 처리할 때 그 작업이 성공하거나 실패할 것에 대해서 결과를 알려준다고 약속하는 것입니다. Promise를 이용하여 비동기 작업이 성공하면 resolve를, 실패하면 reject로 반환 값을 전달합니다.const myPromise = new Promise((resolve, reject) => { // 비동기 작업을 수행 let success = true; if (success) { resolve("작업이 성공적으로 완..

JavaScript에서 undefined가 발생하는 경우는 대표적으로 3가지가 있습니다.이 3가지에 대해 다뤄보도록 하겠습니다. undefined가 나타나는 세 가지 경우 1. 빈 객체일때객체를 선언만 하고 속성 값을 정의하지 않은 상태에서, 해당 객체의 속성을 호출하면 undefined가 반환됩니다.const obj = {};console.log(obj.name); // undefined여기서 객체 obj에는 { }로 속성이 정의되어 있지 않기 때문에, name이라는 key의 value를 호출해도 undefined가 반환됩니다. 2. 함수에 return이 없을 때함수에서 값을 반환하지 않으면, return이 없으면, 함수 호출의 결과가 자동으로 undefined가 됩니다.const text = () ..