![포스트 배너](/static/f96908f4901562b83e282ac4074045a9/f635c/react.png)
[React] Reference
React에서 DOM에 접근하기 위해 사용되는 것이 ref입니다. ref는 <div ref={divRef}>...</div>와 같이 속성처럼 사용되지만 속성과는 다른 의미를 가지고 있습니다.
![포스트 배너](/static/cb717359c504b77270ce069247bfe5d1/f635c/forward_proxy_reverse_proxy.png)
[ETC] Forward Proxy와 Reverse Proxy
Proxy는 사전적 의미로 대리, 대리인이라는 의미를 가지고 있습니다. 프록시 서버는 사전적 의미 그대로 아래 그림과 같이 대리로 통신을 하는 서버입니다.
![포스트 배너](/static/4fda5f70bb7ed7df9c12d984bb68bb88/f635c/tanstack-query-v5.png)
[React] TanStack Query v5 (React Query) API 레퍼런스
2023년 10 월 TanStack Query v5가 정식 버전으로 릴리즈 되었습니다. 이번 포스터에서는 TanStack Query v5의 React Query를 멋있게 사용할 수 있도록 React Query의 API를 살펴보도록 하겠습니다.
![포스트 배너](/static/f96908f4901562b83e282ac4074045a9/f635c/react.png)
[React] Suspense
Suspense는 컴포넌트가 화면에 노출하기 위해 필요한 데이터가 아직 준비되지 않았다고 알려주는 기능으로 React 16.6 버전에서 실험적 기능으로 등장해 18 버전에서 정식 지원을 시작한 기능입니다.
![포스트 배너](/static/f96908f4901562b83e282ac4074045a9/f635c/react.png)
[React] Concurrent Rendering - 동시성 렌더링
React 18에서 추가된 기능 중 가장 중요한 것이 사용자 경험을 향상할 수 있는 동시성 렌더링입니다. 이번 포스트에서는 동시성이 무엇인지 그리고 동시성을 위해 추가된 startTransition 함수와 useTransition, useDeferredValue 훅을 살펴보도록 하겠습니다.
![포스트 배너](/static/87a4e0728b9e9c145d14b73e57276758/f635c/react-hook-form.png)
[React] react-hook-form API 레퍼런스
사용하고 있는 외부 라이브러리 API를 자세히 알면 그 라이브러리에서 제공하는 다양한 기능들을 인지하고 사용할 수 있기 때문에 라이브러리를 더 멋있게 사용할 수 있습니다. 이번 포스트에서는 React Hook Form을 좀 더 멋있게 사용하기 위해 React Hook Form에서 제공하는 API들을 살펴보도록 하겠습니다.
![포스트 배너](/static/87a4e0728b9e9c145d14b73e57276758/f635c/react-hook-form.png)
[React] react-hook-form으로 폼 관리하기
React Hook Form은 사용자 입력을 받고 검증하는 것을 도와 주는 라이브러리로, React에서 폼을 관리하는 가장 유명한 라이브러리 중 하나입니다. React Hook Form을 사용하면 사용자에게 입력을 받고 검증하는데 드는 시간을 줄일 뿐만 아니라 더불어 성능까지 두 마리 토끼를 모두 잡을 수 있습니다.
![포스트 배너](/static/f96908f4901562b83e282ac4074045a9/f635c/react.png)
[React] react-hook-form, formik, rc-field-form 폼 관리 어떤걸로 해야 할까
FrontEnd 개발을 하다보면 사용자 입력을 받고 입력 받은 값을 검증하는데에 많은 시간을 쓰게 되는데, 폼 관리 라이브러리를 사용하게 되면 사용자에게 입력을 받고 검증하는데 드는 시간과 노력을 줄일 수 있습니다.
![포스트 배너](/static/9d3d841a44138a630a99a88aa0b7a5b5/f635c/start-up-blog-writing.png)
[책 리뷰] Start up 블로그 글쓰기 나만의 콘텐츠로 성공하기
내가 책에서 원했던건 목차를 나누는 팁, 의미를 잘 전달하는 방법 같은 글을 잘 쓰는 디테일한 기술들이었다. 하지만 이 책은 디테일 보다는 큰 밑그림을 그려주는 책이다.
![포스트 배너](/static/127597a6d50133942a27d4cfa84dd09d/f635c/tanstack-query.png)
[React] TanStack Query v4 (React Query)
TanStack Query는 비동기 작업 처리를 돕는 라이브러리입니다. v3까지는 React Query라는 이름으로 React만 지원했는데, v4 부터 React 이외의 프레임워크(Vue, Svelte, Solid)에서 사용할 수 있도록 업데이트 되며 TanStack Query로 이름이 변경되었습니다.
![포스트 배너](/static/dd214e6c1aab7e34210b9f0644856a40/f635c/monorepo.png)
[ETC] Monorepo - Yarn Berry
이번 포스트에서는 Yarn Berry를 사용하여 모노레포를 구성해 보도록 하겠습니다. 이번에 구성할 모노레포는 Emotion와 React, TypeScript를 사용한 서비스 프로젝트와 디자인 시스템 프로젝트입니다.
![포스트 배너](/static/dd214e6c1aab7e34210b9f0644856a40/f635c/monorepo.png)
[ETC] Monorepo - 개념
하나의 저장소(Repository)에서 여러개의 프로젝트를 관리하는 방식을 모노레포라고 합니다. 이번 포스트에서는 모노레포가 무엇인지 모노레포가 등장하기까지 어떻게 프로젝트 구성이 발전되어 왔는지 살펴보도록 하겠습니다.
![](/static/0ece3df65186856cc539d9190ef2d96e/f635c/yarn_berry.png)