study_record

오늘은 다양한 React 상태 관리 라이브러리 중 Context API에 대해 알아보겠습니다. [React] 상태 관리 라이브러리, 어떤 것을 선택해야 할까?React로 애플리케이션을 개발하다 보면 상태 관리는 필수적인 과제입니다. 현재 사용되고 있는 React 상태 관리 라이브러리는 제일 많이 사용하는 Redux를 시작으로, Zustand, Jotai, Recoil, Context API, Reami-dairy.tistory.com  React에서 부모 → 자식 → 자식의 자식... 순으로 데이터를 전달할 때 보통 props를 사용합니다.하지만 이 방식은 트리 구조가 깊어질수록 문제가 발생할 수 있습니다.데이터를 실제로 사용하지 않는 중간 컴포넌트들까지도 props를 계속 물려주어야 하는, Props ..

React로 애플리케이션을 개발하다 보면 상태 관리는 필수적인 과제입니다. 현재 사용되고 있는 React 상태 관리 라이브러리는 제일 많이 사용하는 Redux를 시작으로, Zustand, Jotai, Recoil, Context API, React Query 등 다양합니다. 상태 관리 라이브러리를 선택하기에 앞서, 이런 생각이 들 수도 있습니다. “어차피 Redux가 제일 많이 쓰이니까 그냥 Redux를 사용하면 되지 않을까?”  물론 Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나입니다. 그러나 Redux에도 단점이 존재하며, 모든 상황에서 적합한 것은 아닙니다.따라서 본인의 프로젝트와 요구 사항에 적합한 상태 관리 라이브러리를 선택하는 것이 더 중요합니다. 그래서 오늘은 React의 다..

Recoil, Redux, Zustand와 같은 상태 관리 라이브러리를 두고 왜 React Query를 사용하는 것일까?React Query를 사용하는 이유는, 서버 상태를 효율적이고 일관되게 관리하기 위해서이다. React 자체는 클라이언트 상태를 다루는 데는 강력하지만,서버에서 데이터를 가져오고 이를 유지, 갱신, 캐싱하는 등의 기능은 기본적으로 제공하지 않기 때문에 별도의 도구가 필요하다. React Query는 이러한 서버 상태를 자동으로 관리해 주는 훌륭한 라이브러리이며,React Query를 사용하면 데이터를 요청할 때마다 수동으로 로딩 상태, 에러 처리, 데이터 갱신 등을 구현하지 않아도 된다. 내부적으로 자동 캐싱, 요청 중복 제거, 실패 시 재시도, 포커스 복귀 시 자동 리페치 등의 기능..

React는 여러 개의 컴포넌트로 구성되어 웹 페이지를 만든다.이렇게 컴포넌트를 나누다 보면, 컴포넌트 간에 상태(변수)를 공유해야 하는 상황이 자주 발생하는데,이때 보통 props, Context API, 혹은 Redux와 같은 상태 관리 도구를 사용한다. 그중 Redux는 가장 널리 알려진 상태 관리 라이브러리로, 전역 상태를 정의하고 이를 여러 컴포넌트에서 공유할 수 있게 해준다.하지만 Redux는 초기 설정이 복잡하고, 문법이 다소 어렵다는 단점이 있다. 그래서 최근에는 Redux와 비슷한 기능을 제공하면서도, 더 간단하고 직관적인 API를 가진 상태 관리 도구들이 많이 사용된다.그 중 하나가 바로 Zustand이다. 이번 글에서는 Redux와 비슷한 기능을 제공하면서도 훨씬 사용하기 쉬운 Zus..

UI 응답성을 개선하기 위한 성능 최적화 기법에는 Web Worker과 Debounce, Throttle가 있다.적용 대상과 역할이 조금 다르기 때문에 이 글을 읽고, 상황에 맞게 적용해 성능을 개선해보자! 1. Web Worker (웹 워커)무거운 연산이나 백그라운드 작업을 별도의 스레드에서 수행하는 기법을 말한다.JS는 싱글 스레드라 무거운 연산이 메인 스레드를 막아 UI 렌더링이 멈출 수가 있기 때문에 웹 워커는 별도의 스레드에서 작업 수행시켜 메인 스레드의 부하를 줄여 UI의 렌더링이 끊기지 않도록 유지하기 위해 사용한다. 1.1 사용 예시// App.jsfunction heavyCalculation(n) { let result = 0; for (let i = 0; i { const r..

React 환경에서 성능을 개선하는 방법은 다양하게 있다.그 중 번들 크기를 감소시켜 초기 로딩 속도를 최적화 하는 방법 몇 가지를 자세하게 알아보자. 1. Tree Shaking사용되지 않는(dead) 코드를 제거하여 최종 번들 크기를 줄이는 기법이다.불필요한 코드를 제거해 번들 크기를 축소하고, 로딩 시간을 단축시키기 위해 사용한다. 1.1 사용 예시import _ from 'lodash'; // lodash 전체를 가져옴function MyComponent() { const arr = [1, 2, 3]; const newArr = _.shuffle(arr); // 실제로는 shuffle 함수만 필요 return {newArr.join(',')};}export defaul..

세션과 JWT을 다루기 전에 먼저 인증(Authentication)과 인가(Authorization)에 대해서 알아야 한다. 1. 인증(Authentication)과 인가(Authorization)  인증은 쉽게 말해 로그인이라고 생각하면 된다.내가 이 사이트에 가입된 회원임을, 즉 특정 서비스에 일정 권한이 주어진 사용자임을 아이디와 패스워드 등을 통해 인증하는 것이다. 인가는 이렇게 한 번 인증을 받은 사용자가 이후 서비스의 여러 기능들을 사용할 때,예를 들어 구글 이메일에 로그인한 후 보낸 메일함이나 스팸 메일함 등을 보는 것처럼,내 계정으로만 할 수 있는 활동을 할 때, 서버가 이 사용자가 로그인되어 있음을 식별하고 허가해주는 과정이다.즉, 로그인이 유지되는 상태에서 일어나는 동작이라고 보면 된다..

1. ESLintESLint란 JavaScript 코드의 문제를 발견하고 수정하는 데 사용되는 정적 분석 도구이다.정적 분석 도구란 소스 코드를 실행하지 않고, 의미를 분석하여 잠재적인 결함을 찾아내는 도구를 말한다.  1.1 정적 분석 도구를 왜 사용해야 할까?개발자는 코드를 작성하는 과정에서 잠재적인 버그, 안티패턴, 오타, 사용되지 않는 코드 등의 문제를 발생시킬 수 있다.이러한 문제가 발생할 수 있는 코드를 코드 스멜(Code Smell)이라고 하며,이는 코드가 동작하더라도 유지보수성과 가독성을 저하시킬 수 있는 비효율적인 코드 패턴을 의미한다. 이러한 코드 스멜은 런타임 환경에서 쉽게 발견되지 않기 때문에 코드 리뷰 등의 과정이 필요하지만,수동으로 모든 문제를 찾아 수정하는 것은 많은 리소스가 ..

Virtual DOM은 React를 공부하면 자주 들을 수 있는 용어입니다.Virtual DOM에 대해 자세히 알아보기 전, 먼저 DOM에 대해 알아보겠습니다.  1. DOM (Document Object Model)사용자가 브라우저를 통해 어떤 웹사이트에 접속하면 버튼, 리스트, 제목 등 다양한 요소가 화면에 표시됩니다.이러한 개별 요소를 Element라고 하며, 이 모든 요소를 포함하는 웹페이지 전체를 문서, 즉 Document라고 합니다.  브라우저는 웹페이지의 HTML을 해석하여 이를 화면에 렌더링합니다.이때 DOM이란 웹페이지의 HTML 요소(Element)들을 트리 형태의 구조로 표현한 것입니다.DOM은 자바스크립트 객체는 아니지만 API를 가지고 있기 때문에 자바스크립트 조작이 가능합니다. ..

GraphQL이란 클라이언트와 서버가 소통하는 API용 쿼리 언어이자, 데이터에 대해 정의한 유형 시스템을 사용하여 쿼리를 실행하기 위한 서버 측 런타임을 말합니다.  2023년 Postman이 4만 명의 개발자를 대상으로 실시한 API 프로토콜 현황 조사에 따르면,REST의 사용률은 2년 동안 92%에서 86%로 감소한 반면, GraphQL의 채택률은 29%로 증가하는 추세를 보였습니다. 그렇다면 GraphQL이 점차 사랑받고 있는 이유는 무엇일까요?  1. 하나의 엔드 포인트와 단일 POST 메소드RESTful API의 경우, 다양한 메소드를 사용하며 전송에 사용된 HTTP 메소드, URI를 통해 각 작업을 구분합니다.이러한 방식은 요청의 내용을 직관적으로 알 수 있다는 장점이 있으나, 많은 엔드포인..