권용휘

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

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가 화면을 업데이트즉, 데이터 요청이 클라이언트(..

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

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..

React Query의 useMutation은 서버와의 데이터를 변경하는 작업(POST, PUT, DELETE 등)을 처리하는 데 강력한 도구입니다. 이 글에서는 useMutation의 매개변수 타입이 한 개인 경우와 두 개 이상인 경우를 비교하며, 어떤 상황에서 어떤 방식이 더 적합한지 설명합니다.(매개변수 처리 방식은 useMutation뿐만 아니라 함수 설계 전반에서 고려해야 할 중요한 요소입니다.) ■ 매개변수가 두 개인 경우return useMutation { sendData: RouteData; user: UserFormData }>({   mutationFn: ({ sendData, user }) => route(sendData, user),   onSuccess: (data) => {   ..

함수나 메서드를 설계할 때, 매개변수를 어떻게 받을지는 코드의 가독성, 유지보수성, 확장성에 큰 영향을 미칩니다. 이는 특정 라이브러리나 프레임워크를 넘어 모든 프로그래밍 언어와 설계에서 공통적으로 고려해야 할 중요한 요소입니다. 이번 글에서는 매개변수를 직접 받는 방식과 객체로 받는 방식을 비교하며, 각 방식의 장단점과 적합한 상황을 설명합니다. ■ 매개변수를 직접 받는 방식매개변수를 함수의 인자로 하나씩 나열하여 전달하는 방식입니다.호출부와 정의부에서 매개변수의 순서가 정확히 일치해야 하며, 매개변수가 적을 때 가장 간단하고 직관적입니다.# 코드 예제function calculateRectangleArea(width: number, height: number): number {   return wid..

React Query를 사용할 때, 한 페이지에서 여러 mutate를 사용하다 보면 코드가 복잡해지고 가독성이 떨어질 수 있습니다.저 역시 page.tsx에서 useMutation을 직접 사용하던 초기 방식에서, 이를 hooks 폴더로 분리하여 관리 효율성을 높였습니다.이번 글에서는 제가 겪었던 문제와 이를 해결하기 위한 과정을 소개합니다. ■ 기존 폴더 구조처음에는 src/api 폴더에서 API 호출 로직만 분리하고, page.tsx에서 직접 useMutation을 사용했습니다.src/ ├── api/ │ ├── map.ts # 경로 관련 API │ ├── user.ts # 사용자 관련 API │ ├── index.ts # API 묶음 관리├── app/ │ ├── page.tsx # 페이지 컴포넌트 ..