이전 포스팅에서는 Object.freeze()를 사용하여 객체의 불변성을 확보하는 방법에 대해 다루었습니다.2025.04.15 - [JavaScript] - 🔒 Object.freeze()로 안전하게 상태를 보호하는 법 — 불변성(immutability)의 모든 것 🔒 Object.freeze()로 안전하게 상태를 보호하는 법 — 불변성(immutability)의 모든 것안녕하세요! 복잡한 웹 애플리케이션을 만들다 보면 '상태 관리'라는 거대한 벽에 부딪히곤 합니다. 데이터가 어디서 어떻게 변하는지 추적하기 어렵고, 예상치 못한 버그 때문에 고생한 경험,cwnsgh.tistory.com freeze는 객체 상태 변경을 원천적으로 차단하여 데이터의 안정성을 높이는 효과적인 방법입니다. 하지만 개발 요구..

안녕하세요! 복잡한 웹 애플리케이션을 만들다 보면 '상태 관리'라는 거대한 벽에 부딪히곤 합니다. 데이터가 어디서 어떻게 변하는지 추적하기 어렵고, 예상치 못한 버그 때문에 고생한 경험, 다들 한 번쯤 있으시죠? 오늘은 핵심적인 개념인 불변성(Immutability)과, 이를 자바스크립트에서 쉽게 구현하도록 도와주는 Object.freeze()에 대해 알아보겠습니다. 🤔 데이터가 마음대로 바뀌면 왜 위험할까요? (양방향 데이터 바인딩의 함정)과거 또는 일부 프레임워크에서 사용되던 양방향 데이터 바인딩은 화면과 데이터가 서로를 직접 수정할 수 있어 편리해 보였습니다. 하지만 앱이 복잡해지면 데이터 변경의 원인을 찾기 어려워지고, 이는 예기치 못한 버그와 디버깅 지옥으로 이어지기 쉽습니다. 그래서 "상당히..

안녕하세요! 복잡한 웹 애플리케이션을 만들다 보면 '상태 관리'라는 거대한 벽에 부딪히곤 하죠. 많은 분들이 Redux 같은 라이브러리를 사용하며 이 문제를 해결하려 하지만, 때로는 라이브러리 사용법 너머의 근본적인 원리를 이해하는 것이 더 중요할 때가 있습니다. 왜 이런 상태 관리 방식이 등장했을까요? 그 해답의 중요한 열쇠 중 하나가 바로 Flux 패턴입니다.Flux는 단순히 오래된 기술이 아니라, 복잡한 데이터 흐름 문제를 해결하기 위해 고안된 핵심적인 디자인 철학입니다. 특히 기존 MVC 패턴이나 양방향 데이터 바인딩이 가진 한계를 극복하기 위해 등장했죠. 이번 포스팅에서는 Flux 패턴이 왜 필요했는지, 그 핵심 원리인 단방향 데이터 흐름은 무엇이며, 이것이 어떻게 오늘날 우리가 더 예측 가능하..

안녕하세요! Next.js와 NextAuth.js로 인증 기능을 구현을 해봤었는데요. 하지만 동시에 새로운 고민에 빠졌죠. 바로 최상위 레이아웃에 적용한 use client 와 그로 인한 성능상의 우려 때문이었습니다. "CSR(Client-Side Rendering)은 주로 React 같은 라이브러리에서 사용되는 방식으로, 브라우저가 초기에 빈 HTML과 JavaScript 번들을 받아와 클라이언트 측에서 화면을 그려나가는 방식입니다. 이 방식은 초기 로딩 시 사용자가 빈 화면을 보게 되는 단점이 있죠. Next.js에서는 "use client" 지시어를 사용하여 클라이언트 측 인터랙션이 필요한 컴포넌트를 만듭니다. 제가 Next.js를 선택한 가장 큰 이유 중 하나는 바로 서버 측 렌더링(SSR)과 정..

버전 충돌, 타입 오류, 어이없는 실수, 그리고 세션 전략 문제까지 해결하며 드디어 로그인 기능을 성공시켰는데요. 오늘은 그 과정에서 당연하게 사용했지만 정확히는 몰랐던 /api/auth/[...nextauth]/route.ts , 우리가 최종적으로 선택한 JWT 세션 전략에서 로그인 정보가 실제로 어떻게 저장되고 유지되는지 그 원리를 파헤치며 마무리하려고 합니다! 1. /api/auth/[...nextauth]/route.ts : NextAuth.js의 만능 접수 창구! ✨ Next.js App Router 프로젝트에서 우리는 /src/app/api/auth/[...nextauth]/route.ts 라는 특별한 경로에 파일을 만들었습니다. 이게 도대체 뭘까요? [...nextauth]의 의미: Next..

안녕하세요! NextAuth.js 인증 지옥에서 허우적대던 개발자입니다. 버전 충돌과 기본적인 타입 오류들을 해결하며 잠시 평화를 찾는 듯했으나... 그것은 착각이었습니다! 이번에는 정말 끈질기고 이해할 수 없는 오류가 제 앞을 가로막았죠. 이번 포스팅은 저를 가장 괴롭혔던 providers not iterable 오류와의 사투 그리고 결국 'database' 세션 전략을 포기하고 'jwt' 전략으로 전환할 수밖에 없었던 과정을 생생하게 기록합니다.   🚨 문제 발생 1: 코드는 멀쩡한데? 끝나지 않는 providers not iterable!버전도 맞췄고, 타입 오류도 다 잡았다고 생각했는데... 개발 서버를 실행하고 페이지에 접속하면 어김없이 이 오류가 터미널을 뒤덮었습니다. 오류 로그 (계속 반복..

안녕하세요! Next.js(v14)와 Prisma(v6)로 건물 관리 QR 코드 웹앱 만들기에 도전 중인 개발자입니다 😊.DB 스키마 정의까진 순조로웠는데, 사용자 인증을 위해 NextAuth.js(v4) 와 @auth/prisma-adapter 를 연동하려는 순간부터 험난한 여정이 시작되었습니다... (이때는 몰랐죠, 이게 시작일 뿐이라는 걸...) 이번 포스팅은 그 여정의 첫 단계를 기록합니다: 라이브러리 설치, 그리고 곧바로 마주친 버전 충돌과 초기 타입 오류들과의 사투! (저처럼 고통받는 분들께 위로와 힌트가 되길 바랍니다) 1단계: 인증 라이브러리 설치!가장 먼저, Next.js 인증의 국룰(?) 조합인 NextAuth.js와 Prisma 어댑터, 그리고 비밀번호 해싱을 위한 bcrypt를 설..

저는 React로 프론트엔드 개발 경험이 꽤 있었지만, 이번 프로젝트에는 Next.js를 선택했습니다! 왜 그랬는지, 만약 그냥 React만 썼다면 어땠을지, 그리고 "Next.js는 그럼 단점은 없나? 무조건 React보다 좋은 건가?" 하는 솔직한 생각까지 나눠보려고 합니다. 기술 스택 고민 중이신 분들께 제 경험이 조금이나마 도움이 되길..! (제 생각 + 경험 기반이니 참고만 해주세요 😉)🤷‍♀️ React vs Next.js : 뭐가 다른 건데? React (리액트): 웹 화면의 '보이는 부분'(UI)을 레고 블록처럼 조립해서 만드는 '라이브러리'(도구 모음)에요. UI 만들기에 집중! 하지만 페이지 이동 규칙(라우팅), 서버 기능 등은 따로 챙겨줘야 해요.Next.js (넥스트): Reac..