하루살이 개발일지

프론트엔드 개발의 역사는 단순히 UI를 구성하는 수준을 넘어서며, 점점 더 복잡하고 체계적인 상태 관리와 아키텍처의 필요성을 만들어냈다. 특히 2010년대 초반, 자바스크립트의 역동성이 증가하면서 기존 서버 중심의 렌더링 방식에서 벗어나 클라이언트 사이드 애플리케이션의 필요성이 대두되었다. 이에 따라 자바스크립트를 좀 더 구조적으로 활용하기 위한 시도로 MVC, MVVM 같은 디자인 패턴이 대두되었으며, Backbone.js, AngularJS 등이 그 대표 주자였다. 이후 React가 등장하며 기존 양방향 바인딩 구조의 복잡성을 해결하고자 하였고, Flux 패턴이라는 단방향 데이터 흐름 기반 구조가 탄생하였다. 현재는 React 중심으로 컴포넌트 기반 아키텍처와 다양한 상태 관리 도구가 결합된 구조로 ..

😀 해당 포스팅은 React 애플리케이션에서 오류를 처리하기 위해 react-error-boundary 라이브러리를 사용하여 에러 바운더리를 구현하는 방법과, 이를 통해 동기 및 비동기 오류를 효과적으로 관리하는 방법을 설명하고자 합니다. React Error Handling With React-Error-Boundary  React에서 에러를 핸들링하는 방법 중 하나는 오류 경계(error boundaries)를 사용하는 것이다. 이 글에서는 react-error-boundary를 사용한 React 오류 처리에 대해 알아보았다. React에서의 오류 경계  React 에러 바운더리는 React 애플리케이션에서 오류를 처리하는 데 중요한 부분이다. 에러 바운더리는 자바스크립트 오류를 자식 컴포넌트 트리..

CSR, SSR먼저 Hydration 개념 이해에 필요한 CSR과 SSR 개념을 간단히 정리하면 다음과 같다.  클라이언트 사이드 렌더링 CSR에서 서버는 빈 HTML 페이지와 JavaScript 번들을 반환한다. 브라우저는 JavaScript 번들을 받아 클라이언트 단에서 페이지를 렌더링한다. 즉 모든 로직, 데이터 패칭, 라우팅 등은 서버가 아닌 클라이언트에서 처리된다.이는 서버의 부하를 줄이고 첫 페이지 로드 후 다른 페이지를 로드하는 속도가 빨라지지만, 초기 빈 HTML을 전달해주기 때문에 검색 엔진 최적화(SEO)에 불리하며 초기 로드 시간이 길어지게 된다.  서버 사이드 렌더링 SSR은 서버에서 웹 페이지를 생성해 클라이언트로 전달한다. 이미 렌더 준비가 완료된 HTML을 전달해주기 때문에 H..

Jotai는 Daishi Kato에 의해 만들어졌으며, React 상태 관리의 단순성과 효율성을 개선하려는 목적에서 만들어졌다. Recoil과 MobX와 같은 기존 상태 관리 솔루션들이 제공하는 강력한 기능을 유지하면서도, 단순하고 직관적인 API를 제공하여, 개발자들이 쉽게 상태 관리를 할 수 있도록 설계되었다. Jotai는 일본어로 '상태'를 의미하며, Jotai는 그 사용성과 유연성으로 인해 빠르게 인기를 얻었고, 다양한 규모와 유형의 프로젝트에서 사용되고 있다. npm trend에서 recoil과 비교하면 recoil을 역전한 것을 볼 수 있는 꽤 핫한 라이브러리이다. 1. jotai의 기본 개념과 atom 생성 방법 Jotai는 atom개념을 사용하며, atom은 작은 데이터를 담고 있다. us..