본문 바로가기

분류 전체보기

 (262)
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 등)를 전송함으로써 ..
Programmers - Js - 2018 KAKAO BLIND RECRUITMENT - [3차] 압축 문제 설명 신입사원 어피치는 카카오톡으로 전송되는 메시지를 압축하여 전송 효율을 높이는 업무를 맡게 되었다. 메시지를 압축하더라도 전달되는 정보가 바뀌어서는 안 되므로, 압축 전의 정보를 완벽하게 복원 가능한 무손실 압축 알고리즘을 구현하기로 했다. 어피치는 여러 압축 알고리즘 중에서 성능이 좋고 구현이 간단한 LZW(Lempel–Ziv–Welch) 압축을 구현하기로 했다. LZW 압축은 1983년 발표된 알고리즘으로, 이미지 파일 포맷인 GIF 등 다양한 응용에서 사용되었다. LZW 압축은 다음 과정을 거친다. 길이가 1인 모든 단어를 포함하도록 사전을 초기화한다. 사전에서 현재 입력과 일치하는 가장 긴 문자열 w를 찾는다. w에 해당하는 사전의 색인 번호를 출력하고, 입력에서 w를 제거한다. 입력에서..

티스토리툴바