React와 React NativeReact와 React Native를 같이 사용하면 React Native를 기반으로 한 iOS와 Android용 모바일 애플리케이션을 구축할 수 있습니다. React는 인터페이스 구축을 위한 자바스크립트 라이브러리로 기본적으로 react-dom 라이브러리와 함께 웹 애플리케이션을 개발할 때 사용됩니다. 주의할 점은 React는 상태를 관리하고 가상의 컴포넌트를 구축하는 도구일 뿐 플랫폼에 구애받지 않습니다. React Native는 모바일 애플리케이션을 구축하기 위한 react-dom의 대안입니다. 컴파일 시 iOS 및 Android 네이티브 UI 요소로 변환되는 특별한 컴포넌트를 제공하고 자바스크립트 코드에서 카메라 등 네이티브 플랫폼 API를 사용할 수 있도록 지원..
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)는 처음에는 텍스트를 보여주지 ..
해당 아티클을 읽고 요약한 내용입니다. 기술적인 관점에서 HTTP/1.1과 HTTP/2를 구분하는 가장 중요한 특징 중 하나는 인터넷 프로토콜 스택에서 애플리케이션 계층의 일부로 생각할 수 있는 바이너리 프레이밍 계층입니다. 모든 요청과 응답을 일반 텍스트 형식으로 유지하는 HTTP/1.1과 달리 HTTP/2는 바이너리 프레이밍 계층을 사용하여 모든 메시지를 바이너리 형식으로 캡슐화 합니다. 이때 메서드, 헤더 등 HTTP 시맨틱은 그대로 유지합니다.일반 텍스트 형식의 HTTP 메시지GET /index.html HTTP/1.1Host: www.example.com애플리케이션 수준의 API는 여전히 기존 HTTP 형식으로 메시지를 생성하지만, 이후 바이너리 프레이밍 계층에 내재된 멀티플렉싱의 도움으로 메시..
계정이 존재하지 않거나 일부 정보가 틀렸을 때 사용자에게 안내 메시지를 제공하기 위해 애플리케이션 전역에서 사용할 토스트 메시지를 구현했습니다. 모든 컴포넌트에서 토스트 메시지를 설정할 수 있으며 토스트 메시지 관련 상태값이 변경되었을 때 이를 구독하고 있는 가 호출될 수 있게 리액트의 Context를 사용했습니다. 이 글에서는 리액트의 Context를 사용해서 토스트 메시지를 구현하는 방법과 Context를 사용했을 때 불필요한 렌더링이 발생하지 않도록 최적화하는 방법을 다루고 있습니다.ContextContext는 리액트 컴포넌트간 어떠한 값을 공유할 수 있게 해주는 기능입니다. 어떠한 값이란 원시 타입의 값일 수도 있고 객체일 수도 있습니다. 리액트에서 Context를 사용하는 이유는 대부분 애플리케..
이 글은 24.04.13 기준으로 작성되었습니다. 따라서 이후에는 NextAuth가 업데이트 되었을 수 있습니다. Next.js 공식문서 튜토리얼을 통해 처음 NextAuth를 알게 되었고 이를 활용하여 로그인 인증을 구현했습니다. 이후, NextAuth 없이도 로그인 인증을 구현했습니다. NextAuth Next.js 애플리케이션에서 사용할 수 있는 인증 및 인가 솔루션입니다. 이를 사용하면 다양한 인증 공급자(예: Google, Facebook, GitHub 등)를 통해 사용자를 인증하고, OAuth 및 OpenID Connect를 통해 사용자의 프로필 및 권한 정보를 가져올 수 있습니다. 기술 사양 이 글은 다음과 같은 기술 사양을 기준으로 작성되었습니다. 프론트엔드 : Next.js 14버전 이상..
