React 무한 스크롤 기능 구현해 보기 React를 공부하면서 "코딩 알려주는 누나"라는 유튜브 채널에서 React 무한 스크롤 기능을 잘 설명해 준 내용이 있었다. 무한 스크롤이 어떠한 형식으로 구현되는지 공부하고 다시 한번 반복 학습하기 내용을 정리하며 복습하려고 한다. 무한 스크롤그렇다면 무한 스크롤은 대체 어떤 기능일까? 처음 말만 들었을 때는 무한으로 스크롤을 한다? 라고만 이해되었다. 이게 무엇일까? 고민하던 찰나에 페이지 네이션 기능과 무한 스크롤의 차이를 알게 되었는데 너무 쉽게 이해되었다. 특히나 인스타그램, TicTok 등 다양한 애플리케이션에서 무한스크롤을 지원하면서 사용자 경험을 향상시킨다고 볼 수 있다. 페이지네이션 : 사용자가 직접 페이지를 이동하면서 데이터를 볼 수 있다.무한 스크롤 : 페이지가 특정 하단에 도달했을.. react-error-boundary 사용해서 함수형 컴포넌트 에러 처리하기 이 전의 글에서 React의 ErrorBoundary를 사용해서 에러 처리하는 방법을 알아보았다. 아쉬운 점은 함수형으로 만들 수 없다는 것이었는데 React 공식 문서에도 클래스 형 ErrorBoundary의 대안으로 react-error-boundary를 제안하고 있다. 이 글에서는 react-error-boundary의 사용방법에 대해 알아보고 프로젝트에서 어떻게 사용했는지에 대해 작성해 보려고 한다. react-error-boundaryreact-error-boundary는 클래스 형 ErrorBoundary의 함수형으로 사용할 수 있는 대안으로 함수형 컴포넌트를 사용해서 리액트 프로젝트를 작업하는 경우 클래스 형을 사용해서 ErrorBoundary를 사용하는 것보다 일관되게 함수형으로 사용할 수.. React, ErrorBoundary 사용해서 에러 처리하는 방법 공부를 시작하면서 여러 강의들을 혼자 들으며 공부를 시작했던 나에겐 에러 처리가 사소했다. console.log(error) 혹은 setError(error)와 같은 사용자에게 피드백을 줄 수 없고 기본적인 로그 처리 정도로만 그쳤던 에러 핸들링이었는데 ErrorBoundary를 공부하면서 좀 더 나은 방법으로 에러를 처리할 수 있다는 것을 알게 되었고 공부했던 내용을 다시 한번 정리하려고 한다. ErrorBoundaryErrorBoundary는 React16에서 도입된 기능이다. React로 개발하다가 에러가 발생했을 때 적절한 에러 핸들링을 하지 않은 상태에서 보면 화면에 아무것도 보이지 않게 되었던 경험을 종종 한 적이 있다. React는 렌더링 중에 에러가 발생하면 전체 UI를 제거한다. 이는 불.. React 웹 폰트 최적화하기(2) 웹 폰트 최적화하기(1)에 이어서 그렇다면 웬 폰트를 어떻게 최적화해야 할까? 이번 포스팅에서는 웹 폰트를 최적화하는 다양한 방법에 대해 알아보고 이해하기 위해 포스팅을 작성한다. 웹 폰트 적용하는 방법1. CDN을 활용한 웹 폰트 적용 방법CDN을 활용해 프로젝트 내에서 웹 폰트를 적용하는 방법이다. 태그를 통해 간단하게 적용할 수 있다는 장점이 있지만 서버의 상태에 따라 적용되는 시간이 달라질 수 있다는 단점이 있다. Google font를 적용한 간단한 예시이다. CSS내에서 import를 사용해서 CDN을 적용할 수 도 있다. @import url('https://fonts.googleapis.com/css2?family=Jersey+15&family=Noto+Sans+KR:wght@100.... React 웹 폰트 최적화하기(1) 다양한 브라우저, 다양한 환경, 많은 사용자가 동일하고 일관된 폰트를 볼 수 있도록 웹 폰트를 적용할 수 있다. 이러한 웹 폰트를 사용하면 다양한 환경에서 사용자들이 동일한 사용자 경험을 가질 수 있다는 좋은 장점이 있지만 잘못 사용하게 되면 사용자 경험을 해칠 수 있기 때문에 최적화하는 과정이 필요하고 그러한 방법을 알아보려 한다. 웹 폰트의 종류 브라우저에서 사용되는 웹 폰트의 종류는 다양하게 있다. 또한 브라우저 별로 지원되는 폰트의 종류도 여러가지가 있으므로 사용자 경험을 고려하여 사용하여야 한다. TTF/OTFTrueTypeFont는 Mac OS, Windows 운영체제에서 가장 일반적으로 사용되는 폰트 형식이지만 레거시 한 기술로 점차 다른 폰트 형식으로 교체되어 가고 있다. OpenTypeF.. React 이해하기 React를 공부하면서 리액트를 왜 사용해야 하는지 리액트가 정확히 무엇인지, 특징은 무엇인지 한번 정리하는 시간을 가지려고 한다. 이러한 이유들을 알고 나면 좀 더 리액트를 이해하는 데 도움이 될 거라고 생각한다. React란 무엇인가? React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다. 주로 인터렉션(상호작용)이 많은 웹 앱을 개발할 때 사용된다. 리액트는 주로 UI 렌더링에 관여하며, 그 외의 라우터, 상태 관리와 같은 기능들은 리액트 생태계에서 사용되는 여러 라이브러리들의 도움을 받는다. 즉 리액트는 UI를 렌더링 하는데 사용되는 라이브러리이다. React의 특징 1. 컴포넌트 개념을 사용하여 UI를 구성한다. React는 컴포넌트 개념을 사용하여 UI를 구성한.. useEffect 정리하기(2) useEffect 사용 시 주의사항 useEffect의 의존성 배열 관리 useEffect의 두 번째 인자로 전달되는 의존성 배열은 이 배열의 유무, 배열의 값 존재 유무, 배열의 값 변경 여부에 따라 effect를 재 실행하기 때문에 의존성 배열의 잘못된 지정, 누락 등과 같은 실수가 있다면 컴포넌트가 렌더링 될 때마다 실행될 수 있는 문제가 발생한다. 무한 루프 방지 function Counter() { const [count, setCount] = useState(0); useEffect(() => { const intervalId = setInterval(() => { setCount(count + 1); // You want to increment the counter every second.... useEffect 정리하기 (1) React를 공부하면서 useEffect에 대해 알고 있다고 생각했는데 간단한 프로젝트를 진행하면서 막혔던 부분 중 하나가 바로 useEffect였다. 그래서 다시 한번 정리하고 정확히 알아보려고 한다. 문제 그렇다면 왜 useEffect를 다시 공부하는가? 어떤 부분에서 막혔는가?에 대해 말하자면 react-router-dom의 createBrowserRouter를 사용하면서 막혔다. 사용자 인증 여부를 검사하는 AuthenticatedRoute를 만들면서 사용자 인증이 있다면 outlet을 통해 children에 접근이 가능해야 하는데 계속 Navigate 로 리다이렉션 되는 문제가 발생했다. import { Navigate, Outlet } from "react-router-dom"; import .. 이전 1 다음
