권용휘

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

■ 내가 겪은 문제게시판 형태의 페이지를 Next.js 14로 개발하던 중, 검색 기능을 구현하면서 이상한 문제를 만났다. 화면 구성은 다음과 같다:왼쪽: 고정된 사이드바상단: 헤더중앙: 검색 필드와 결과 리스트가 있는 메인 영역문제👉 검색어를 입력하고 검색 버튼을 누르면 전체 페이지가 새로고침된다.사이드바, 헤더까지 전부 리셋되면서 React 상태도 초기화되어버린다.처음엔 "React Query 캐시가 문제인가?" 싶었지만, 아니었다. ■ 원인 분석: form 태그의 기본 동작 때문HTML에서 태그는 기본적으로 submit 이벤트 발생 시 페이지를 새로고침하고 서버로 데이터를 전송하는 구조를 가지고 있다. React에서도 을 사용하면 이 기본 동작이 그대로 유지된다.즉, onSubmit 이벤트가 발..

에디터를 선택하기 위해 다양한 옵션을 검토해보았습니다.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, ..