[문제 해결]
1.React-query mutation 함수의 매개변수 타입 에러 (문제 해결)
react-query의 useMutation 훅을 사용하여 API 호출을 처리하려고 할 때, 에러가 발생하는 것을 발견했다. 이 에러는 mutation 함수의 매개변수에서 발생했다. 에러메세지를 보기 이전에 코드를 살펴보자. 우선, react-query 라이브러리로 a
2.React-query와 useState 상태관리 간의 비동기 타이밍 이슈 (문제 해결)
리액트를 활용해 admin 페이지를 개발하던 도중이었다. react-quill을 통해 이미지 업로드 기능을 추가하려고 할 때, 고유한 ikey 값을 리액트 쿼리를 이용해 비동기적으로 서버로부터 받아와야 했다. 이 ikey는 이미지 저장 위치의 고유 식별자로써 활용되었다
3.split 메소드를 이용해 YouTube 링크를 Embed 형식으로 변환하기 (iframe) (문제 해결)
개요 > 페이지에서 props로 받은 각각의 데이터에 해당하는 유튜브를 iframe 태그를 이용해 삽입해야하는 상황이다. 하지만 어째서인지, 해당 페이지에서 오류 메세지가 나오는 것을 발견했다. 코드를 살펴보자. 문제상황 부모 컴포넌트에서 youtubeData를
4.Data URL과 Blob: 이미지 데이터 처리 (문제 해결)
개요 > admin 페이지 개발 중, React-quill 에디터를 통해 붙여넣은 사진을 파일 형태로 서버에 업로드해야 했다. 이때 발생한 에러와 그를 해결하는 과정을 함께 살펴보자. (quill-image-drop-and-paste 공식문서를 참고하였다.) htt
5.전역 상태 관리 Zustand state update 지연 문제 (문제 해결)
Zustand를 통해 사용자의 로그인 정보를 전역적으로 관리하고 있었다. 로그인이 성공한 후, 사용자의 이메일 정보를 전역 상태에 저장하여 다른 컴포넌트들이 접근할 수 있도록 계획했다. 그러나 무언가 문제가 있었는지, 로그인 후에도 사용자의 이메일이 바로 브라우저 창에
6.커스텀 훅과 상태관리: state(상태) 끌어올리기 (문제 해결)
UserContentsContainer 컴포넌트 내에서 useCheckAll 커스텀 훅을 사용하여 AllCheckbox 컴포넌트를 선택하면 UserContent 내부의 모든 Checkbox 컴포넌트들이 선택되는 기능을 구현하였다. 그러나 페이지네이션을 통해 페이지를 전
7.HTTP 409 error Conflict: 단순한 해결 (문제 해결)
사이드 프로젝트를 진행하면서 회원가입 기능을 추가하고 있었다. 'useSignUpForm'이라는 커스텀 훅을 이용해 서버에 요청을 보내고 있었다. 코드를 살펴보도록 하자.코드 설명폼 제출 이벤트를 방지:e.preventDefault(); 호출을 통해 폼이 기본적으로 페
8.모바일 환경에서의 하단 고정 컴포넌트 브라우저 넘침 문제 (문제 해결)
반응형 디자인으로 제작한 웹을 배포하였다. ChatGPT와 같은 인공지능 채팅 서비스로, 사용자가 원하는 변수명을 추천해주는 기능을 가지고 있다. 사용자의 스크롤 위치가 어디든 항상 하단 고정을 해야 했다. 웹사이트에서는 마우스 휠로 화면을 스크롤하는 반면, 모바일에
9.Zustand persist: 페이지 새로고침 시 전역상태 초기화 방지 (문제 해결)
로그인에 성공하면, 응답 데이터로 access token과 userId를 받는 상황이다. userId는 글을 포스팅 하기 위한 body의 인자로 사용되며, 글을 포스팅 하는 페이지는 로그인 페이지와는 다른 페이지이기 때문에 나는 이 userId 값을 zustand로 전
10.Typescript 제네릭으로 커스텀 훅 재사용성 강화하기 (문제 해결)
useOnChange라는 커스텀 훅이 있다. 이 커스텀 훅은 input혹은 textarea와 같은 사용자 입력 컴포넌트의 onChange속성에 할당될 것이다.코드를 살펴보도록 하자.ICommonAuthValues라는 인터페이스 객체 타입의 inputValues를 제어하
11.Next.Js Server Action: API 응답 데이터 캐시 Revalidate (문제 해결)
블로그에 글을 포스팅하고, 포스팅된 전체 글을 조회할 수 있는 기능을 Next.Js 13 버전으로 개발하고 있었다. 기존의 React 기반 프로젝트 같은 경우에는, React-query의 invalidateQueries(쿼리 무효화)를 이용하여 손쉽게 해결할 수 있었다
12.React의 무한 루프 문제 해결: 조건부 상태 업데이트로 성능 최적화하기 (문제 해결)
https://velog.io/@dpldpl/%EB%B6%80%EB%AA%A8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-width-%EA%B0%92%EC%97%90-%EB%A7%9E%EA%B2%8C-%EC%9E%90%E
13.모달창 애니메이션 문제 해결 (문제 해결)
모달창 컴포넌트를 만들었고, 나는 이 컴포넌트가 나오고 사라질 때 애니메이션 처리를 주고 싶었다. 코드를 먼저 살펴보도록 하자.Modal 컴포넌트ModalHeader 컴포넌트Modal SCSS 모듈Zustand store를 이용하여 isShowModal의 상태를 전역적
14.CSS 애니메이션과 미디어 쿼리: 화면 크기 변화에 따른 애니메이션 문제 해결하기 (문제 해결)
현재 개발중인 웹의 레이아웃에 사이드바가 있다. 이 사이드바는 반응형으로 넓은 화면에서만 렌더링 하고 있으며, 사이드바 우측의 버튼을 클릭할때마다 사이드바를 부드럽게 열고 닫기 위해 keyframes를 이용해 애니메이션 처리 하고 있는 상황이었다.코드를 살펴보자.Sid
15.Next.Js Hydration: SSR과 CSR 간의 class 불일치 문제 해결하기 (문제 해결)
Next.Js를 이용하여 간단한 미니 블로그 프로젝트를 진행하고 있었다. 사용자가 게시글에 좋아요 버튼을 누르면 화면상에서 좋아요 버튼의 배경색을 변하게 만들어야 했었고, 이를 React에서 하던 방식대로 동적 class를 할당함으로 구현하고 있었다. 기존의 코드를 보
16.useState 대신 useRef로 React 애플리케이션 성능 최적화하기 (문제 해결)
스크롤 방향에 반응하여 작동하는 애니메이션을 구현하였다. 구현에 큰 문제는 없었지만, 너무 많은 리렌더링을 유발하는 이슈가 있었다. 이 글에서는 불필요한 리렌더링을 방지하여 성능을 최적화 하는 과정에 대해서 다룰 것이다. 이전 글https://velog.io/
17.JWT access token 전역으로 저장하지 않고 다른 요청 헤더로 보내기 (문제 해결)
Next.Js를 활용해 로그인 기능을 개발하는 과정에서, 사용자가 입력한 이메일과 비밀번호를 서버에 전송하고, 서버로부터 access token을 받아오는 기능을 성공적으로 구현했다. 이 글에서는 access token을 처리하는 기존 방식과 이를 더욱 안전하게 다룰
18.React에서 input 한글 입력시 onKeyDown 이슈 (문제 해결)
input에서 입력한 문자열 값을 배열로 관리하여 화면에 렌더링하는 기능을 구현 중이었다. input의 onKeyDown 속성을 사용해 엔터 키 입력을 감지하여 처리하고 있다. 코드를 살펴보자.Keyword 컴포넌트useKeyword 훅영어는 별 문제가 없었는데 한글로
19.framer-motion과 transform 중앙 정렬 (문제 해결)
개요 > React를 이용하여 전화 번호 복사 붙여넣기 기능을 구현하고 있었다. 유저가 복사 아이콘을 누르면 작성자의 전화 번호를 복사하고, 복사됨을 알리는 UI의 애니메이션을 구현하였다. 코드를 살펴보도록 하자 (Chakra UI 라이브러리를 이용하였다.) 문제
20.React 이벤트 처리 순서 (문제 해결)
내가 개발 중인 지도에는 검색창이 포함되어 있다. 사용자가 이 검색창에 특정 지역을 입력하면, 그 지역에 해당하는 상세 지역 목록이 드롭다운 형식으로 화면에 나타나게 되고, 사용자가 드롭다운 목록 중 하나를 선택하면, 선택된 상세 지역으로 지도가 이동하고 드롭다운은 사
21.리액트 컴포넌트의 리렌더링과 state (문제 해결)
React를 이용하여 네이버 지도에 텃밭들을 표시하고, 텃밭에서 찜하기 버튼을 누르면 해당 텃밭을 찜하는 기능을 구현하고 있었다.리액트 컴포넌트에서 garden?.gardenLikeId를 기반으로 isGardenLiked 상태가 계산되며, 이는 사용자가 정원을 "좋아요
22.Maximum update depth exceeded: ResizeObserver를 활용한 성능 최적화 (문제 해결)
더보기 버튼을 렌더링 시키는 커스텀 훅이 있다. 댓글(혹은 답글)의 내용이 컴포넌트의 높이를 넘칠때에만 더보기 버튼을 렌더링 시켜줘야하는데, 유저가 브라우저의 가로 길이를 늘리거나 줄이는 등 변하게 할 수 있기 때문에 이를 대응하기 위해 동적으로 컨텐츠의 높이를 계산해
23.NPM 의존성 문제 해결: @rollup/rollup-linux-x64-gnu 이슈 (문제 해결)
React-Native와 React를 이용해서 웹뷰 어플을 개발하고 있었다. React로 개발한 웹과 React-Native로 패키징하고 있는 두 개의 프로젝트를 기존의 멀티레포 식으로 관리하는 것보다, 하나의 레포 안에서 관리해주는 것이 효율적이라고 생각이 되어 ve
24.React Native Webview: URL 상태 관리를 통한 안드로이드 뒤로 가기 동기화 (문제 해결)
React-Native와 React를 이용해서 웹뷰 어플을 개발하고 있었다. 웹 뷰 어플은 안드로이드의 물리적 뒤로가기 버튼을 누르더라도 웹뷰 웹 내의 페이지 뒤로가기가 작동하지 않기 때문에, 이와 관련된 작업을 하였었다. 또한, 메인 화면에서 뒤로가기 버튼을 누르면
25.React-Native (expo) firebase fcm 푸시 메세지 디바이스에서 나오지 않는 이슈 해결 (문제 해결)
React Native(expo)와 firebase의 fcm을 통해서 푸시 메세지 기능을 구현하고 있었다. https://docs.expo.dev/push-notifications/fcm-credentials/ <= 공식문서와 https://yo
26.쿠키 서버로 전송하기: credentials (문제 해결)
개발중인 서비스에서 로그인과 로그인 연장 기능(JWT 토큰 갱신)을 구현하고 있었다. access token의 만료기간은 10분이었기 때문에, 페이지가 새로고침 될 때와 9분에 한번씩 access token의 갱신이 필요한 상황이었다. access token은 resp
27.React Native(expo) 빌드 실패 문제 해결: Node.js 버전 충돌 (문제 해결)
현재 프리랜서로 외주를 받고있는 스타트업의 플랫폼(웹 서비스)을 웹뷰 앱으로 패키징 해달라는 요청을 받아 React Native (expo) 프로젝트를 초기화하고, 안드로이드 에뮬레이터를 실행시키려고 하던 도중이었다.안드로이드 빌드를 하려던 도중, 에러 메세지가 발생했
28.React-Native(expo) Bare Workflow에서 앱 아이콘 설정: 네이티브 설정 (문제 해결)
React-Native(expo)를 사용하여 모바일 웹뷰 앱을 구현하고 있었다. 나는 회사의 기획에 맞게 앱 아이콘을 수정해야했고, expo 공식문서 https://docs.expo.dev/develop/user-interface/splash-screen-an
29.React Native WebView에서 커스텀 userAgent 사용 시 뒤로 가기(goBack) 이슈 해결 (문제 해결)
개요 > React-Native 웹뷰를 이용하여 앱을 구현한 상황이다. 모바일 웹에서 헤더 상단에 앱 홍보 UI를 넣기위해 웹뷰 앱에 커스텀된 userAgent를 전달하는 상황이었다. 문제 상황 안드로이드 웹뷰 앱은 안드로이드 기기의 물리적 뒤로가기 버튼에 대응할