본문 바로가기

study

 (80)
React - Tanstack-Query(React-Query) v5 와 IntersectionObserver를 이용한 무한스크롤(useInfiniteQuery) Next.js App Router를 이용하여 개발한 개인 블로그에 적용한 무한스크롤에 대한 내용에 대해 적어보려고 합니다.개발한 블로그 링크는 아래에 있습니다.https://www.siklog.shop/blog   위의 이미지처럼 검색어를 통해 게시글을 조회하는 페이지에 무한스크롤을 적용하였으며, useInfiniteQuery와 IntersectionObserver를 이용하여 구현하였습니다. 무한 스크롤을 적용한 이유는 아래와 같습니다.게시글이 많아질수록 한 번에 데이터를 조회하면 조회 속도가 늦어져 UX가 좋지 않다. (로딩 UI가 너무 긿어짐)페이지네이션으로도 구현이 가능하나 모바일 유저의 UX까지 생각한다면 무한 스크롤이 더 적합하다. 1. 무한 스크롤이란?무한 스크롤은 웹 페이지에서 리스트나 테이..
React - Error Boundary, React-Query와 사용하기 React Query에 React Error Boundary를 사용하는 방법을 작성해보고자 합니다.React Query는 v5를 사용할 것이며, Error Boundary의 경우 직접 구현하는 것이 아닌 react-error-boundary 라이브러리를 사용하였습니다.  Error BoundaryError Boundary란 React v16에 도입된 에러를 핸들링할 수 있는 React 합성 컴포넌트입니다. Error Boundary는 하위 컴포넌트 트리의 어디에서든 자바 스크립트 에러를 기록하고, 에러가 발생한 컴포넌트 트리 대신 fallback UI를 보여줄 수 있습니다.fallback UI란?어떤 기능이 제대로 동작하지 않을 때, 이에 대처하는 기능 또는 동작을 말하며, 실패에 대해서 후처리를 위해 ..
Next.js - App router Error Handling(오류 처리) error.js 파일 컨벤션은 중첩 라우트에서 발생하는 예상치 못한 런타임 에러를 우아하게 처리할 수 있도록 도와줍니다.자동으로 라우트 세그먼트와 자식 세그먼트를 리액트 에러 바운더리로 감싸줍니다.세분성을 조절하기 위해 파일 시스템 계층 구조를 사용하여 특정 세그먼트에 최적화 된 에러 UI를 생성할 수 있습니다.나머지 기능은 그대로 유지한 채로 에러가 발생한 세그먼트만 분리할 수 있습니다.전체 페이지 로딩을 하지 않고 에러를 핸들링 할 수 있는 기능을 추가할 수 있습니다.error.js 파일을 라우트 세그먼트에 위치하고 리액트 컴포넌트를 export 하면 에러 UI를 생성할 수 있습니다.  공식 문서에서 제공하는 error.js의 기본 예시 코드는 아래와 같습니다.'use client' // 에러 컴포넌..
React Native - ios 실행 시 explicit dependency.... 나오고 멈추는 오류 해결책 React Native App을 실행시킨 후 "i" 키 입력을 통해 ios 시뮬레이터를 실행 시켯을 때 아래 이미지와 같이 터미널에 "explicit dependency...." 라고 나오며 멈추는 오류가 발생하였다. 이를 해결한 방법을 기록하고자 한다. 1. 수정해야할 파일로 접근react native프로젝트에 root 디렉터리 -> ios -> Pods -> Flipper -> xplat -> Flipper -> FlipperTransportTypes.h 파일로 접근한다.  2. FlipperTransportTypes.h 파일에 include 추가FlipperTransportTypes.h 파일 상단에 아래 코드를 추가해준다.#include   위에 보여준 과정을 진행하면 해당..
React Native - Execution failed for task ':app:installDebug' 오류 해결 react-native앱을 실행시킨 뒤 run on Android를 실행 시켯을 때 아래와 같은 오류메세지가 나타낫다..Execution failed for task ':app:installDebug'.> cohttp://m.android.builder.testing.api.DeviceException: No connected devices! 이 문제를 해결한 방법에 대해 기록하고자 한다. 1. Virtual Device Manager로 접근  2. Device Manager에서 현재 등록되어있는 디바이스를 삭제한다.  3. create device를 통해 새로운 기기를 등록한 후 실행시킨다. 위와 같은 방법으로 진행하니까 오류가 해결되었다.
React프로젝트 Github Action으로 배포 자동화 구축하기(AWS S3, CloudFront) 이전 포스트(https://sikk.tistory.com/276 React App을 S3와 CloudFront를 이용한 배포)를 이어 Github Action을 이용하여 배포자동화 하는것을 기록하려고 한다. AWS - S3, CloudFront를 통한 React 배포 CloudeFront란? CloudeFront란 AWS에서 제공하는 글로벌 콘텐츠 전송 네트워크(CDN) 서비스입니다. CloudFront는 사용자에게 콘텐츠를 더 빠르게 제공하기 위해 전 세계에 분산된 서버(에지 로케이션) 네트 sikk.tistory.com IAM 사용자 생성 IAM -> 사용자 -> "사용자 생성" 버튼 클릭 "직접 정책 연결" 선택 후 AmazonS3FullAccess, CloudFrontFullAccess 추가 ->..
AWS - S3, CloudFront를 통한 React 배포 CloudeFront란? CloudeFront란 AWS에서 제공하는 글로벌 콘텐츠 전송 네트워크(CDN) 서비스입니다. CloudFront는 사용자에게 콘텐츠를 더 빠르게 제공하기 위해 전 세계에 분산된 서버(에지 로케이션) 네트워크를 활용합니다. 사용자가 콘텐츠를 요청하면 CloudFront는 사용자에게 가장 가까운 에지 로케이션에서 콘텐츠를 제공하여, 대기 시간을 줄이고 다운로드 속도를 향상시킵니다. 웹 사이트의 주요 데이터를 원본 데이터가 있는 서버에서 직접 가져온다고 했을 때 사용자가 있는 위치에 따라서 데이터 전송 시간이 다를 수 밖에 없습니다. 하지만 CloudFront를 사용하게 되면 사용자와 가장 가까운 위치에 있는 서버에 저장된 캐시 데이터(HTML, CSS, IMG 등)를 전송함으로써 ..
Next.js 13 - [next-auth][error][CLIENT_FETCH_ERROR] 오류 Next.js 13.3.1 버전으로 개인프로젝트를 진행하던 중 Google OAuth로그인시 문제가 발생하였다. run dev로 실행한 상태에서는 오류가 발생하지 않았는데 실제 환경과 비슷한 환경에서 테스트 해보기위해 build 후 start시켜 next/auth에 설정해둔 signIn 페이지에서 OAuth로그인을 하려고 하니까 아래와 같은 오류가 발생하였다...... [next-auth][error][CLIENT_FETCH_ERROR] https://next-auth.js.org/errors#client_fetch_error fetch failed { error: { message: 'fetch failed', stack: 'TypeError: fetch failed\n' + ' at Object.fe..

티스토리툴바