Render Props 패턴은 JSX 엘리먼트를 props를 통해 컴포넌트에게 전달하는 방식으로 컴포넌트를 재사용 가능하게 할 수 있는 방법입니다.Render proprender prop은 컴포넌트 prop으로 JSX 엘리먼트를 리턴하는 함수를 전달합니다. 컴포넌트 자체는 아무 것도 렌더링하지 않지만 render prop 함수를 호출합니다. 은 render prop을 변경하며 재사용할 수 있습니다.const Title = props => props.render()// prop 이름이 꼭 render일 필요는 없다. ✨ First render prop! ✨} /> 🔥 Second render prop! 🔥} /> 🚀 Third render prop! 🚀} />render prop 함수를 호출할 때 ..
최근에 디자인 시스템에 관심이 생겨서 관련 정보를 찾아보다가 Storybook을 알게 되었습니다. 호기심이 생겨 공식 문서를 통해 학습하여 정리했습니다. 잘못된 내용이 있거나 조언할 내용이 있다면 댓글로 작성해주시면 감사하겠습니다.StorybookStorybook은 데이터, API 또는 비즈니스 로직으로 벗어나 UI 컴포넌트와 페이지를 독립적으로 구축할 수 있는 프론트엔드 워크샵으로 UI 개발, 테스트 및 문서화를 제공해준다.내구성이 뛰어난 UI를 개발할 수 있다.팀이 재사용할 수 있도록 UI를 문서화할 수 있다.스토리를 통해 UI가 실제로 어떻게 작동하는지 공유할 수 있다.CI 단계에 추가하여 UI 테스트를 자동화할 수 있다.스토리를 한번 작성하면 다양한 개발 환경에서 재사용할 수 있다.프론트엔드 워크..
폰트 최적화 알아보기에서 설명한 폰트 preload를 실제로 구현해봤습니다.Vite 기반 리액트 프로젝트폰트 파일, CSS 파일, JS 파일 등 정적 파일은 빌드되면 BMYEONSUNG-94085197.woff2 같이 파일 이름 뒤에 해쉬값이 붙습니다. 이는 빌드 전에는 어떤 해쉬값이 붙을지 알 수 없습니다. 따라서 폰트 Preload를 할 때 아래와 같이 단순히 파일명만 지정하면 프로덕트에서 해당 폰트 파일을 찾을 수 없습니다.관련 Vite 플러그인을 설치빌드된 HTML 파일에 를 삽입하기 위해 관련 플러그인을 설치합니다.npm i -D vite-plugin-inject-preload플러그인 설정vite.config.ts 파일에 설치한 플러그인을 등록합니다. match 속성에 preload하고 싶은 ..
모던 리액트 Deep Dive 12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표를 읽고 정리한 내용입니다. 사용자가 웹사이트에 접속했을 때 공통적으로 기대하는 사항방문한 목적을 손쉽게 달성할 수 있어야 한다.목적을 달성하는 데 걸리는 시간이 짧아야 한다.개인정보가 누출되는 등의 사고 없이 보안이 철저해야 한다.즉, 아무리 좋은 기술 스택을 쓰더라도 사용성이 불편하면 사용자는 해당 서비스를 사용하지 않습니다. 따라서 개발자는 웹사이트의 성능에 주의를 기울여야 합니다. 과거 웹사이트의 성능은 단순히 웹사이트의 로딩 속도, 방문이나 결제 같은 실제 목표로 이뤄지는 전환율 등으로만 지엽적으로 판단했습니다. 그러나 몇 년전부터 구글은 핵심 웹 지표(Core Web Vital)라고 하는 웹사이트의 우수한 사..
Redux는 "action"이라는 이벤트를 사용하여 애플리케이션 상태를 관리하고 업데이트하기 위한 패턴이자 라이브러리입니다. 전체 애플리케이션에서 사용해야 하는 상태를 위한 중앙 집중식 저장소 역할을 하며, 예측 가능한 방식으로만 상태를 업데이트할 수 있도록 하는 규칙을 사용합니다. 애플리케이션 전역 또는 컴포넌트 간 공유하고 있는 상태가 있다고 무조건 Redux가 필요한 것은 아닙니다. 상황에 따라 Context를 사용해 충분히 해결할 수 있을 수 있습니다. 공식 문서에서는 다음과 같은 상황에서 Redux 사용을 고려해 보라고 말하고 있습니다.앱의 여러 위치에 필요한 대량의 애플리케이션 상태가 있는 경우앱 상태가 시간이 지남에 따라 자주 업데이트되는 경우해당 상태를 업데이트하는 로직이 복잡할 수 있습니..
인프런 강의 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2의 폰트 최적화를 학습하고 정리한 내용입니다. 폰트를 최적화하지 않으면 다음과 같은 현상이 발생할 수 있습니다. 웹 폰트도 하나의 리소스로 네트워크를 통해 서버에서 다운로드해야 합니다. 그렇기 때문에 폰트가 적용된 텍스트를 브라우저 화면에 출력할 때 깜빡이는 현상이 발생합니다. 깜빡이는 현상에는 FOUT와 FOIT가 있다. FOUT(Flash of Unstyled Text)는 처음에는 기본 폰트로 출력하다가 다운로드가 완료되면 폰트가 적용되는 방식입니다. IE와 엣지 등의 브라우저에서 기본적으로 이 방식을 사용하고 있습니다.FOIT(Flash of Invisible Text)는 처음에는 텍스트를 보여주지 ..
1. React Hook Form폼 관리와 데이터 수집을 용이하게 해주는 라이브러리복잡한 상태 관리 없이 폼 상태(필드값, 에러, 제출 상태 등)를 쉽게 추적하고 제어할 수 있다.기본적으로 비제어 컴포넌트 방식으로 불필요한 리렌더링을 최소화하고, 필요한 경우에만 업데이트를 수행하여 애플리케이션 성능을 유지한다.설치npm install react-hook-form2. ZodTypeScript-first 스키마 선언 및 유효성 검사 라이브러리TypeScript와 함께 사용할 수 있도록 설계되어 데이터 구조의 정적 타입스크립트 타입을 자동으로 추론할 수 있다.타입과 유효성 규칙을 하나의 객체로 통합하여 유지보수성을 높이고 코드의 가독성을 향상시킨다.npm install zodornpm install zod@c..
