권용휘

에디터를 선택하기 위해 다양한 옵션을 검토해보았습니다.Toast UI, Editor.js, CKEditor 등 여러 에디터가 있었지만, 결국 Tiptap을 선택하게 되었습니다.그 이유는 무엇보다 커스터마이징이 자유롭고 확장성이 뛰어나며, React 환경과의 호환성이 매우 우수했기 때문입니다. 초기에는 이미지를 업로드할 때 FileReader를 사용하여 이미지를 base64로 인코딩한 후 에디터에 삽입하는 방식을 사용했습니다. 하지만 실제로 작성 중에 WYSIWYG → HTML → WYSIWYG으로 모드를 전환하는 과정에서, 이미지의 base64 인코딩 문자열이 너무 길어지면서 이미지 태그가 사라지는 문제가 발생하였습니다. 이 문제를 해결하기 위해, 이미지 선택 시 백엔드 서버에 S3 업로드를 요청하고, ..

Next.js로 개발한 프로젝트를 배포하려면 Docker와 Node.js를 사용해서 배포하는 게 가장 일반적이다. 특히 대규모 서비스나 클라우드 환경에서는 Docker가 거의 표준이기 때문에 이 방식을 익혀두는 게 좋다. 하지만 꼭 Docker만 있는 건 아니다. 다른 방식도 있으니 한 번 정리해보자. ■ Next.js 배포 시 Node.js가 필요한 이유Next.js는 기본적으로 React 기반의 프레임워크이지만, 정적 사이트가 아니라면 서버 환경에서 실행될 필요가 있다. 이때 Next.js의 서버사이드 렌더링(SSR)과 API Routes 기능을 사용하려면 Node.js가 필수적이다.Node.js가 필요한 이유:Next.js의 SSR(Server-Side Rendering) 기능을 실행하기 위해 필요..

Next.js 14를 사용하면서 상태 관리(useState)에서 setDto와 같은 업데이트 함수에 다양한 DTO 객체를 넘겨줘야 하는 상황이 있었다.예를 들어, 배너 관리, 팝업 관리, 공지사항 관리 등 각기 다른 DTO가 존재했기 때문에, 이를 재사용 가능한 컴포넌트로 만들고 싶었다.처음에는 setBannerDto, setPopupDto, setNoteDto 등 개별적인 상태 업데이트 함수를 각각 넘겨줘야 했기 때문에,"이거 그냥 any 쓰면 되지 않나?" 하는 생각이 들었다.하지만 TypeScript에서 any를 사용하는 것은 권장되지 않는 방법이었다.실제로, TypeScript 공식 문서에서도 any를 사용하면 타입 안전성이 사라지기 때문에 최대한 피하라고 권고하고 있다.📌 출처:- TypeSc..

ReferenceError: sessionStorage is not definedNext.js에서 sessionStorage.getItem("myKey")를 사용하면, 값은 정상적으로 가져와지지만 위와 같은 오류가 발생할 수 있습니다. 이게 왜 그런 걸까요?이유는 간단합니다. Next.js는 서버에서도 실행되지만 sessionStorage는 브라우저에서만 동작하는 API이기 때문입니다.그렇다면 이 문제를 어떻게 해결할 수 있을까요? 함께 알아보겠습니다. ■ sessionStoragesessionStorage는 브라우저(Web API)에서 제공하는 기능입니다.즉, HTML을 띄우는 브라우저에서만 사용할 수 있고, 서버에서는 사용할 수 없는 객체입니다.const value = sessionStorage.ge..

Next.js를 처음 배우면 "Next.js는 서버를 거쳐서 데이터를 가져온다" 라는 개념이 헷갈릴 수 있습니다.그렇다면 일반 React와 Next.js의 요청 흐름을 비교하면서 차이점을 살펴보겠습니다.■ 일반 React (CSR) 요청 흐름React는 기본적으로 CSR(Client-Side Rendering) 방식입니다.즉, 브라우저에서 HTML을 먼저 띄운 후, 필요한 데이터를 백엔드에서 가져와서 화면을 업데이트하는 방식이에요.브라우저 (React 앱) → 백엔드 (API 서버)📌 CSR 방식 요청 흐름사용자가 페이지에 접속브라우저가 React 앱을 실행React가 fetch 또는 axios로 백엔드 API를 호출백엔드가 데이터를 응답하면, React가 화면을 업데이트즉, 데이터 요청이 클라이언트(..

Argument of type '(prev: string[]) => string[]' is not assignable to parameter of type 'string[]' React에서 useState로 상태를 관리하다 보면,setState 함수를 다른 컴포넌트로 props로 넘겨야 하는 상황이 자주 발생합니다.그런데 setState를 props로 넘긴 후, 이전 상태 값을 활용해 업데이트하려고 하면 위와 같이 TypeScript 오류가 발생할 수 있습니다.■ setState를 props로 넘길 때 발생하는 오류// 부모 컴포넌트const Parent = () => { const [user, setUser] = useState([]); return ;};// 자식 컴포넌트const Child = ..

오늘은 React Query에서 queryKey가 변경될 때 자동으로 API가 호출되는 원리에 대해 알아보려고 합니다.처음에는 useEffect로 refetch()를 직접 호출해야 한다고 생각했는데, 알고 보니 React Query가 알아서 감지하고 API를 호출하더라고요!그 이유를 코드와 함께 쉽게 설명해 보겠습니다. ■ queryKey란?React Query에서 queryKey는 캐싱된 데이터를 구분하는 고유한 식별자 역할을 합니다.즉, 같은 queryKey를 가진 쿼리는 동일한 데이터 그룹으로 취급되며, queryKey가 변경되면 React Query는 새로운 데이터가 필요하다고 판단하여 자동으로 API를 다시 호출합니다.const useManagers = (reqDto: mngrGrdeData, ..

아래 글은 Spring Cache를 Redis와 함께 사용할 때, **::(콜론 두 개)**가 등장하는 이유와, 이를 어떻게 다뤄야 하는지에 집중해 정리했습니다. 캐싱 구현에서 흔히 겪는 혼동을 줄이는 데 도움이 되었으면 합니다. ■ @Cacheable(value = "cacheName")와 실제 Redis 키Spring Cache 추상화(예: @Cacheable)를 통해 Redis를 사용하면, 실제 Redis 키는 자동으로 아래와 같은 형태로 생성됩니다."캐시이름::캐시 키"예: @Cacheable(value = "routeCache", key = "#routeNo")라면캐시 이름: "routeCache"캐시 키: routeNo실제 Redis 키: "routeCache::{routeNo}"이는 Spri..

Next.js에서 로그인 여부에 따라 특정 URL로 리디렉션을 처리하는 방법을 공유합니다. 이번 포스팅에서는 Middleware를 사용해 로그인 여부를 확인하고, HTTP-only 쿠키에서 JWT를 추출해 유저의 접근 권한을 관리하는 방법을 설명합니다. ■ 요구사항 로그인한 유저는 /, /login, /signup 경로로 접근 시 /share로 리디렉션합니다.로그인하지 않은 유저는 /, /login, /signup 경로 외의 다른 경로에 접근하면 /로 리디렉션됩니다.JWT는 HTTP-only 쿠키에 저장되어 있으며, 브라우저는 이 쿠키의 내용을 직접 읽을 수 없지만, Next.js는 서버 측에서 동작하므로 이를 추출하여 사용할 수 있습니다. ■ 코드 구현아래는 middleware.ts 파일에 작성한 코드..

이 전 포스팅에서 웹소켓이란 무엇이고, Java로 웹소켓 통신 구현하는 글들을 포스팅 했었는데 이번 글에서는 React로 클라이언트에서 어떻게 WebSocket을 구현하는지 소개하려고 합니다. ■ 필요한 라이브러리 설치해당 구현에서는 다음 두 가지 라이브러리가 필요합니다:SockJS: WebSocket 연결을 위한 폴백(fallback) 라이브러리로, 브라우저 호환성을 보장합니다.@stomp/stompjs: STOMP 프로토콜을 기반으로 WebSocket 메시징을 쉽게 구현할 수 있게 해줍니다.npm install sockjs-client @stomp/stompjs ■ 코드 구현WebSocket 통신을 관리하기 위한 서비스 클래스입니다. 주요 코드 설명은 아래에 기술하였습니다.## WebSocketSer..