전체 글

프론트엔드(Vercel + Next.js)와 백엔드(EC2 + Spring Boot)를 분리 배포하면서, WebSocket 기반 채팅 기능에서 인증이 되지 않는 문제가 발생했습니다. 다른 API 호출은 정상 동작했지만, 채팅 연결 시에만 Principal이 null이 되는 예외가 발생했습니다.[STOMP ERROR] Failed to send message to ExecutorSubscribableChannel[clientInboundChannel] 문제 정의REST API 호출은 모두 정상 인증됨 (쿠키 기반 JWT 전달).STOMP(WebSocket) 연결 시 No Principal found 에러 발생.서버 로그 분석 결과 Authenticated=false 또는 Principal=null 상태로 ..

프로젝트를 진행하면서 매번 API 호출을 작성할 때 반복되는 부분을 customFetch함수로 구현했습니다.credentials, BASE_URL, JSON 파싱, 에러 메시지 처리 같은 공통 로직을 중복해서 쓰다 보면 유지보수가 어렵고 비효율적인 구조가 되기 때문에 customFetch라는 fetch 래퍼 함수를 만들었습니다. 이 글에서는 그 배경과 구조, 그리고 활용 방식을 정리해보겠습니다. 1. customFetch 적용 배경이전 프로젝트를 진행할때 다음과 같은 코드들이 반복되어 불편함이 있었습니다. 따라서 이번 프로젝트에서는 처음 설정단계에 미리 구현을 하고 모든 팀원이 활용해 이런 일을 피하도록 했습니다.// 매번 반복되는 코드들const response = await fetch(`${proc..

Next.js SSR 전환 과정에서 만난 인증 에러와 중복 페칭 문제 해결기Next.js SSR 사용이유프로젝트 메인 페이지에는 사용자 자산 데이터와 이미지가 포함된 카드가 20~30장씩 한 번에 렌더링됩니다. 단순히 React CSR만으로는 첫 로딩이 느려지고, SEO 측면에서도 불리하다고 판단했습니다.Next.js는 이미지 최적화 기능을 자동 제공하고, 페이지 대부분이 정적 데이터 기반이어서 SSR(Server Side Rendering) 전환이 적합하다고 생각했습니다. SSR 전환 과정에서 두 가지 문제가 발생했습니다:인증 쿠키가 서버에서 전달되지 않아 발생한 인증 에러서버와 클라이언트가 동일 데이터를 중복 요청하는 중복 페칭 문제아래에서는 문제 원인과 해결 과정을 기록합니다. React Query..

진행 중인 프로젝트에서 useInfiniteQuery 훅과 useInview훅을 이용해서 무한스크롤을 간단하게 구현했다.const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = useInfiniteQuery({ queryKey: ['projectList'], queryFn: ({ pageParam }) => getProjectList({ pageStart: pageParam, size: SIZE_PER_PAGE }), initialPageParam: 0, getNextPageParam: (lastPage, allPages) => { const nextPage ..

"React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render." 최근에 리액트로 팀 프로젝트를 하면서 Invalid hook call 에러나 위와 같은 Eslint error를 종종 봤는데요.매번 아차차 하고 넘어갔던 에러이지만, 왜 훅이 렌더링 될 때마다 같은 순서를 유지해야 하는지 궁금해서 찾아보다가 좋은 참고 자료를 발견하고 이 글을 쓰게 되었습니다. 리액트 공식문서에는 훅의 규칙을 명시하고 있는데, 일단 훅이란 뭔지 간단히 설명해 볼게요. Hook 이란?함수 컴포넌트에서 상태와 생명주기 기능을 "연동"(hook)할 수 있게 해주는 특별한..

FSD 도입기올해 3월 초에 실 서비스를 목적으로 프로젝트를 하나 기획했다. 서비스를 장기 운영할 목적으로 기획했기 때문에 유지보수와 확장이 용이하도록 프로젝트를 설계해야겠다고 판단했다.계속 진행해 왔던 폴더 구조는 아래와 같이 화면 중심으로 설계를 했었다. 하지만 이 구조는 화면이 바뀔 경우 디펜던시가 많아 수정 작업이 많이 발생했고, 개발 도중 병합 충돌이 자주 발생하는 문제점도 있었다.따라서 기능을 중심으로 한 설계를 찾아보던 중 FSD(Feature Sliced Design)를 발견했다. FSD는 정형화된 구조가 있으며 객체지향프로그래밍의 개념을 프론트엔드에 적용해 볼 수 있는 설계였고 유지보수와 확장에도 좋은 설계라고 생각하여 도입하게 되었다. 하지만 개념이 너무 어렵고 당시에는 자료가 많지 않..

Vue3 + Vite + Typescript로 생성한 프로젝트에 Vue Router, Tailwind CSS, ESlint, Prettier를 적용해보자. 1. Vue Router 설정yarn add vue-router  router/index.ts 파일에 아래 코드를 작성한다.import { createRouter, createWebHistory } from 'vue-router';const router = createRouter({ history: createWebHistory(), routes: [ //경로 설정 { path: '/', name: 'main', component: //루트 경로에서 렌더링할 컴포넌트, children: [ /..

현재 사이드 프로젝트로 Chrome extension을 개발 중인데 React가 아닌 Vue를 사용하고 있다. Chrome extension 관련 프로젝트들을 조사하다가 Vue를 사용한 프로젝트가 드문드문 보였고 문득 '이번 프로젝트는 Vue를 한번 써볼까..?' 하는 호기심에 Vue에 대해 좀 더 알아보고 결정하게 되었다. 항상 프로젝트에 React만을 쓰다가 Vue를 도입하게 된 이유를 아래에서 설명하려고 한다. 먼저 vue를 조사하면서 React와는 다르다고 느꼈던 기술적인 특징들을 간단히 설명하면 아래와 같다. vue의 특징빠르고 효율적인 렌더링: React보다 작은 번들 크기를 가지고 있으며, 데이터가 변경될 때마다 이를 자동으로 감지하고 필요한 부분만 렌더링을 업데이트한다.HTML 베이스 템플..