권용휘

React + Nginx + Spring API에서 401이 발생한 이유(Vite 로컬 환경과 Nginx Proxy의 차이 정리)이번에 React(Vite) 프로젝트를 개발 서버에 배포하면서 이상한 현상을 하나 만났다. 로컬에서는 잘 되던 API 호출이 nginx를 통해 배포하니 401이 발생했다ㅜㅜ 처음에는 단순 인증 문제라고 생각했다. 하지만 파고들어 보니, 단순한 문제가 아니었다.■ 상황 정리- 프론트엔드: React + Vite - 로컬 환경: Vite dev server 사용 - 개발 서버: Docker + nginx - API 서버: 별도 Spring 서버 로컬에서는 /v1/orgChrt 호출이 잘 된다. 하지만 nginx를 거쳐 호출하면 401이 발생한다. ■ 처음에 의심했던 것들- Auth..

■ 엣지 컴퓨팅이란?엣지는 브라우저도 아니고, 그냥 CDN도 아니다.사용자와 서버 사이, 가장 가까운 CDN 서버 안에서 실행되는 초경량 서버다. # 전통적인 웹 구조사용자 → Origin 서버 → DB → Origin 서버 → 사용자 모든 요청이 무조건 서버까지 도달로그인 실패, 봇, 캐시 가능한 요청도 전부 DB 접근# Edge 기반 구조사용자 → Edge 서버 → (필요할 때만) Origin 서버 → DBEdge 서버는 아래와 같은 작업을 Origin에 묻지도 않고 혼자 처리한다.로그인 토큰 검증국가 판별게시판 분기A/B 테스트캐시 처리 엣지 서버와 엣지 컴퓨팅은 다르다 엣지 서버는 장소, 엣지 컴퓨팅은 그 장소에서 무엇을 하느냐다. 엣지 서버 엣지 컴퓨팅 전 세계 CDN에 배치된 물리적인 서버그..

오늘 Next.js 프로젝트를 운영 서버에 올리기 전에 npm run build를 돌렸다. 빌드는 잘 되는데, 로그에 계속 눈에 걸리는 문구가 하나 있었다.Dynamic server usage: Route /admin couldn't be rendered staticallybecause it used `cookies`처음엔 “이거 오류인가?” 싶었다.페이지가 안 뜨는 것도 아니고, 빌드가 실패하는 것도 아닌데 계속 나온다.그래서 차분하게 원인을 정리해봤다. ■ Next.js는 기본적으로 정적 페이지를 만든다Next.js(App Router)를 쓰면서 한 가지를 다시 명확히 느꼈다.→ Next.js는 기본적으로 페이지를 정적으로 만들려고 한다.출처: Rendering: Server Components |..

■ 문제 상황: "수정했는데, 수정 전 값이 보임"Next.js 14에서 등록/수정 페이지를 개발하던 중 이상한 현상을 만났다.선물을 등록하거나 수정한 뒤, 다시 수정 페이지(/경로/update)에 들어가면 수정 전 값이 그대로 보이는 문제가 발생했다.심지어 데이터는 분명히 DB에 잘 저장되어 있었고, API도 문제없었음. ■ 구성: 서버 컴포넌트(RSC)해당 페이지는 **Next.js 13 이후 구조(App Router)**에서 작성된 서버 컴포넌트였고, 다음과 같았다// /app/update/page.tsximport GiftForm from '@/components/GiftForm';import { getLatestGiftData } from '@/lib/server/getLatestGiftData..

Next.js 13부터 도입된 App Router와 RSC (React Server Component) 개념은 처음 접했을 때 꽤나 헷갈립니다.저도 최근 작은 프로젝트를 하면서 "이걸 어떻게 구조화하지?", "fetch는 어디서 해야 하지?" 같은 고민을 정말 많이 했어요.그 과정에서 직접 부딪히며 느꼈던 시행착오들을 공유하려고 합니다. 아래의 폴더 구조를 파악해서 예시 코드를 보시면 이해 하기 수월합니다!## 폴더 구조/src ├── app # Next.js의 App Router │ ├── api/apiName # 서버에서만 동작하는 API Route (route.ts) │ └── pageName # 사용자에게 보여줄 페이지들 (page..

■ JWT란 무엇인가?- JWT (Json Web Token) 은 사용자의 인증 정보를 JSON 형식으로 인코딩하여 토큰 형태로 주고받는 방식으로 주로 로그인 이후 인증이 필요한 API 요청 시, 사용자를 식별하기 위해 쓰인다.- 즉,서버에 “누가 로그인했는가”를 저장하지 않고 토큰 자체에 인증 정보를 담아서 주고받는 구조. ■ Stateless란 무엇인가?Stateless(무상태) 의 뜻은 “서버가 클라이언트의 상태를 기억하지 않는다”는 것↔ 반대 개념: Stateful기존의 세션 기반 인증은 Stateful형식으로 동작함.[1] 로그인 요청 → 서버가 세션 생성 [2] 세션ID를 쿠키로 클라이언트에게 전달 [3] 이후 요청마다 서버는 세션ID로 사용자 정보 조회→ 서버가 사용자 정보를 “세션 저장소”..

■ 클로저(Closure)란?Closure - 사전적 의미: “닫힘, 폐쇄, 종결”- 프로그래밍에서는 “함수가 선언될 당시의 환경을 닫아서 보존한다”는 뜻. 즉, 함수가 선언될 당시의 외부 스코프(환경, lexical environment)를 기억하고, 그 함수가 외부 스코프 밖에서 실행되더라도 그 변수에 접근할 수 있게 해주는 기능.// 예시 코드function outer() { let count = 0; // 외부 스코프 변수 function inner() { count++; return count; } return inner;}const counter = outer();console.log(counter()); // 1console.log(counter()); // 2console..

Vue가 다시 주목받는 이유는 단순히 문법이 쉬워서가 아니다.Vue는 React와 다르게 MVVM 패턴을 따르고 있어서 View와 Model 사이의 연결이 자동화되어 있다. React사용자가 input을 입력하면 → onChange 이벤트 핸들러 실행상태(state)가 직접 업데이트되고 → 그 값이 view에 반영즉, 단방향 데이터 흐름 (Unidirectional Flow)Vue사용자가 input을 입력하면 → ViewModel이 자동으로 데이터(Model)와 View를 동기화v-model로 양방향 바인딩이 구현되어 있어, 상태 업데이트와 화면 반영이 자동즉, 양방향 데이터 흐름 (Two-way Binding)거기에 Composition API가 도입되면서 로직 분리, 재사용, TypeScript 지원..

JavaScript로 된 레거시 프론트를 Next.js 14버전으로 개발을 완료해서 배포 후 테스트 해보는데, API 서버에서 아예 응답을 해주지 않는 상황이 생겼습니다. 그래서 확인해 본 결과, 기존 시스템과 Next.js에서 API를 호출하는 방식이 다르다는 것을 알게 되었고, 이번 경험을 바탕으로 차이점과 이유를 정리하게 되었습니다.두 가지 API 호출 패턴패턴 A — 브라우저가 API 서버를 직접 호출User → Browser로 웹(https://sample.com) 접근 ─────▶ https://backend.com (API 서버)브라우저에서 API 서버 주소(https://backend.com/...)로 직접 요청 개발자도구 Network → Request URL이 API 서버 주소(http..

Next.js 기반 프로젝트를 개발하다가, **개발자도구(Network 탭)**에서 이상한 점을 발견했습니다.동일한 API 요청을 보냈다고 생각했는데, 어떤 요청은 한 번만,어떤 요청은 두 번 호출되는 것이었습니다.예를 들어 아래와 같은 두 가지 경로가 있었습니다:/api/r-auth/?paramList=A&paramList=B/api/r-auth?paramList=A&paramList=B슬래시 하나 차이인데, 서버 요청은 다르게 기록되고 있었고,심지어 HTTP 308 리디렉션까지 일어나는 걸 보게 됐습니다. ■ 원인 분석 – trailingSlash 설정저의 Next.js의 next.config.js에는 아래와 같은 설정이 있습니다:// next.config.jsmodule.exports = { t..