front-end/react

Waku라는 프레임워크에 대한 문서를 읽고 직접 프레임워크를 써보며 가볍게 소개해보려고 한다. 큰 프로젝트 외에도 간단한 프로토타입이나 토이 프로젝트를 만들 일이 종종 생기곤 한다.그럴 때마다 Next.js가 익숙해 자주 집어 들기는 하지만 너무 무겁다는 생각이 들 때가 있다. 이런 생각을 하던 중 Waku의 존재를 알게 되었고 딱 나의 니즈에 맞는 가치관을 가지는 프레임워크였기 때문에 문서를 천천히 읽고 번역하고 사용기를 적어 보려고 한다. 주요 기능사용해 보기 전 문서에서 소개하는 피쳐들을 먼저 간단히 요약하자면 아래와 같다.렌더링- 프레임워크 내에서 서버 컴포넌트, 클라이언트 컴포넌트 모두 만들 수 있음- weaving patterns을 통해 두 컴포넌트를 혼용해서 사용할 수 있음.- SSR, S..

원문: https://mobileappcircular.com/where-is-the-virtual-dom-stored-in-react-41724bc09f4f 글을 읽다가 너무 좋은 글이 있어 번역 및 정리를 해보려고 한다. React를 공부하다 보면 Virtual DOM에 대한 얘기를 지겹도록 듣는다. jquery가 중심인 프론트엔드 판에서 React가 파이를 가져갈 수 있었던 건 Virtual DOM 덕분이다. 그렇기 때문에 React를 공부하거나 사용할 때 기술에 대한 언급을 자주 듣는 건 어찌 보면 당연하다. Why Virtual DOM? 기존에는 직접 DOM에 접근했기 때문에 수정할 때마다 리렌더링 되었다. 하지만 Virtual DOM을 사용해 수정사항을 모아서 최소한의 리렌더링으로 프론트엔드를..

React의 다음 버전은 18.3이 아니라 19라고 한다. React 19에서는 새로운 훅이 추가되는데, 이 훅은 data fetching, form 생산성 향상에 대한 내용이다. 이 두 주제는 프론트엔드에서는 굉장히 중요한 주제인데, React에서는 이 주제애 대한 생산성 향상을 위해 어떻게 접근했을지 알아보자. use(Promise) Suspense는 이제 리액트와 뗄 수 없는 기술 스택이 되어가고 있다. React-Query에서 제공하는 useSuspenseQuery라는 훅이 있긴 했지만, React에서 제공하는 Suspense를 관리 훅이 따로 없었다. 이름을 왜 'use'로 지었는 지는 모르겠지만, 훅은 심플하고 강력해 보인다. import { use } from 'react'; async fu..

리액트는 매우 자유로운 라이브러리로 꼽힌다. 그렇기 때문에 리액트가 나온 이후로 다양한 패턴들이 등장하였고 연구되고 있다. 다양한 패턴들이 있지만, 최근 많이 사용하고 있는 패턴인 Compound Components Pattern에 대해 소개해보려고 한다. 예시 import type { ReactNode } from 'react'; import Buttons from './Buttons'; import Comment from './Comment'; import Title from './Title'; interface Props { children: ReactNode; } const Post = ({ children }: Props) => { return {children}; }; Post.Title = ..

https://vercel.com/blog/vercel-storage 이번 Vercel Ship에서 Storage에 대한 발표를 진행했다. 이번 발표에서 소개한 내용은 아래와 같다 - KV: Serverless Redis Solution - Postgres: Serverless SQL Database - Blob: S3와 같은 Cloud Solution 여기서 KV, Postgres, Blob에 대해 소개했지만 가장 관심 가는 부분은 Postgres였다. 유저 정보, 금융 거래와 같이 무결성이 중요한 데이터를 저장할 때는 RDB를 사용해야 한다. 하지만 인스턴스 구성을 필요로하는 MySQL은 부담될 때가 있다. 이런 상황을 Vercel도 알았는 지 프론트엔드와 호환성이 좋은 Serverless Datab..

농담반 진담반으로 리액트로 프론트엔드를 구성할 때 다른 스택은 양보해도 React-Query는 절대 양보하지 않는다.. 그래서 React-Query 소개와 함께 내가 사용하는 노하우를 공유하려고 한다. 개요 대부분의 프론트엔드는 비동기 상태 관리가 필요하다. 각자 다양한 방식으로 구성하겠지만 현재 가장 많이 사용되는 방식은 Redux일 것이라고 생각이 든다. 분명 Redux도 좋은 상태 관리 툴이지만 나는 비동기 상태 관리 스택으로 채택하지 않는다. 두 가지 정도 이유가 있는데 이유를 간단히 설명하자면 우선 Redux는 비동기에 특화된 스택이 아니기 때문에 비동기 처리에 도움을 크게 주지 못한다. 예를 들어 비동기 요청을 일정한 텀마다 보내야 한다면 Redux에서는 직접 구현해야 하지만 React-Que..

React에서 css in js를 다루는 여러 가지 방법이 있다. 그중 가장 선호되는 스택 두 개는 Tailwind CSS와 Styled-components이다. 항상 프로젝트를 시작할 때면 이 두 개를 고민하고는 한다. 각 스택의 장단점을 먼저 소개해보자면 Tailwind CSS Tailwind CSS는 클래스를 활용해 css를 적용시키는 방식으로 아래와 같이 코드를 짤 수 있다. // made by tailwind css 안녕하세요 // made by vanilla 안녕하세요 처음 보는 사람은 스타일 인라이닝보다 조금 간결하다는 점을 제외하면 장점을 잘 못 느낄 수도 있다. 하지만 :hover, @media와 같은 요소들은 인라이닝이 안되고 스타일시트를 따로 작성해야 한다. 이 경우 장점이 드러나게 ..