본문 바로가기

React40

[React, JS, TS] 간결한 import를 위한 index(barrel) 파일을 자동으로 생성해보자 📒 JavaScript, Barrel 파일 자바스크립트에서 특정 디렉토리 내의 여러 모듈을 하나의 파일에서 re-export 함으로써 다른 파일에서 간결한 import문을 사용할 수 있게 하는 index 파일을 Barrel 파일이라고 합니다. 처음엔 Barrel이란 명칭을 몰라 그냥 인덱싱한다고 하며 1년 동안 검색도 제대로 못했었는데, 최근 아티클을 보다 이러한 index 파일을 Barrel이라 한다는 것을 보곤 속이 시원해졌습니다. 뭐 어쨌든 다들 아시겠지만 다음 코드들은 주로 index.js, index.ts로 사용되는 Barrel 파일의 일반적인 예시입니다. //barrel 적용 전 import { ModuleA } from 'utils/ModduleA'; import { ModuleB } fro.. 2023. 11. 7.

[React] React Children Props의 기묘한 렌더링 최적화 현상의 원인 📒 React의 children prop 리액트에서는 동적으로 자식 컴포넌트를 렌더링 하기 위해 부모 컴포넌트에서 children prop을 이용할 수 있습니다. 모두가 잘 알고 있듯 사용법은 다음과 같습니다. const Children = () => { return Children; }; const Parent = ({ children }: { children: JSX.Element }) => { return {children}; }; export const Container = () => { return ( ); } 이러한 사용 방식은 React Context의 Provider, BrowserRouter, RecoilRoot를 사용할 때도 동일합니다. 여기까진 늘 알고 있었던 내용입니다. 📌 Chil.. 2023. 11. 1.

[React/TypeScript] 절대경로 CRA 템플릿 npm 배포 ⚡ npm배포 지금껏 오픈소스에 대한 막연한 환상을 지닌 채로 언젠가는 나도 도전해봐야 할 일이라고 생각하며 가슴 한편에 묻어두고 있었습니다. 그러다 약간의 여유가 생겼고 도전해봄직 하다는 자신감도 생겼지만 막상 뭘 해야 될지 몰랐습니다. 고민에 고민을 거듭하다, 일단 최대한 간단하고 npm 배포 연습용 소재를 찾다 저만의 템플릿을 올려보기로 결정했습니다. 항상 새로운 프로젝트를 만들 때마다 매번 똑같이 정형화된 포맷을 만들어주기도 귀찮았고, 남들이 안써도 내가 쓰면 그만이라는 생각으로 제작해 봤습니다. 그럼 어떤 라이브러리와 보일러 플레이트가 템플릿에 녹아있는지 소개드립니다. ⚡ cra-template-lasbe React - TypeScript와 recoil, styled-components, cra.. 2023. 9. 11.

[React] ErrorBoundary를 통한 선언적인 에러 핸들링, react-query를 이용한 재호출 방법 📒 리액트에서의 에러 핸들링리액트의 한 컴포넌트에서 에러가 발생했을 때 적절한 에러 핸들링을 하지 않는다면애플리케이션 전체가 중단될 수 있습니다. 저는 평소 API 호출 로직에 try - catch 를 이용해 구구절절 명령형으로 에러를 처리하곤 했습니다. 이와 같은 방식은 한 컴포넌트 안에 에러가 발생했을 경우, 에러가 발생하지 않았을 경우,두 가지 조건에 대한 로직이 섞여 코드 라인 수가 길어지고 가독성을 저해합니다. 또한 에러 핸들링에 대한 명확한 기준이 없다면 개발자마다 다른 에러 핸들링으로 코드의 통일성을 잃어버릴 수 있습니다.에러 발생 }> 하지만 위와 같이 ErrorBoundary를 이용해 선언적으로 에러 핸들링을 하게 되면에러 핸들링에 관한 모든 권한을 위임하게 되어하위 컴포넌트에서는.. 2023. 9. 4.

[React] 선언적으로 유저 행동 이벤트 추적하기 with React.cloneElement() ⚡️ 선언적으로 유저 행동 이벤트 추적하기 최근에 B2C 업무에 투입되며 전반적인 앱 플로우와 곧 제가 하게 될 업무에 대해 설명을 들었습니다. 그중 data-driven 한 의사 결정을 위해 유저 이벤트 추적 툴을 도입한 상태였고, 정해주는 이벤트에 추적 기능을 붙이는 업무도 하게 될 것이라는 말씀을 들었습니다. 그러면서 예시 코드를 보여주셨는데 예시로 다음과 같이 버튼 클릭 이벤트 핸들러 함수 안에 추적 툴에서 제공한 함수를 이어붙인 모양이었습니다. const handleClickSignUp = () => { 이벤트_추적(); // ~~~ 회원가입(); // ~~~ } 이러한 방식은 하나의 함수에 두가지 이상의 기능이 담겨 가독성을 해치고 유지보수가 여러워 질 것이 뻔합니다. 그렇다면 기능을 분리하고.. 2023. 8. 29.

[React] SPA 사이드 프로젝트 검색 엔진 최적화(SEO) 끝장내기 ⚡ SEO, 검색엔진 최적화 검색 엔진 최적화 (Search Engine Optimization)는 웹 사이트의 가시성을 향상시키고 검색 엔진 결과 페이지(SERP)에서 상위에 노출되도록 하는 노력을 의미합니다. 즉, 네이버나 구글 검색 결과 상위에 노출되도록 하는 일련의 과정이나 행위입니다. 사이드 프로젝트를 진행하며 이왕 만든거 많은 사람들에게 노출되고 사용 되었으면 하는 마음에 SEO를 알아보고 적용해봤습니다. 그럼 제가 프로젝트를 검색엔진에 최적화 시키기 위해 어떠한 것들을 적용했는지 소개합니다. 📌 Meta Tag 메타 태그는 검색 엔진 최적화 (SEO)의 중요한 요소 중 하나로서, 웹 페이지의 콘텐츠를 검색 엔진에게 설명하고 해석할 수 있는 정보를 제공합니다. 메타 태그를 적절하게 설정하면 검.. 2023. 8. 13.

[React] 스크롤 애니메이션, IntersectionObserver + styled-components 📒 React 스크롤 애니메이션 구현하기 사용자의 눈길을 끌기 위해 다양한 방법들이 사용 되는데, 그 중에서도 가장 눈에 띄던 것이 스크롤 애니메이션이었습니다. 실제 사이드 프로젝트에서 구현한 모습은 다음 링크에서 확인할 수 있습니다. 링모(LINGMO) - 당신의 링크 모음 개성 있는 나만의 링크 모음을 만들어보세요! lingmo.me 직접 구현해보니 생각했던 만큼 어렵지도 않았던 스크롤 애니메이션을 React로 간단하게 구현해본 후 hook으로 분리해 재사용이 용이하도록 개선한 코드를 소개합니다. 📌 라이브러리로 쉽게 구현하기 [React] 리액트 스크롤 애니메이션 라이브러리 개발 스크롤 애니메이션 기능을 쉽고 빠르게 구현하고 싶으신 분들은 위 글을 참고해주세요! 📌 IntersectionObserv.. 2023. 8. 6.

[React] Whitelabel Error Page 에러, 리액트로 간단하게 해결하기 ⚡ 리액트 Whitelabel Error Page 리액트 프로젝트 진행 중 백엔드의 API를 CORS 없이 호출하기 위해 craco의 devServer proxy를 설정해주었습니다. 그렇게 proxy 설정을 마치고 CORS를 해결했으나 이상하게도 라우팅을 통한 페이지 이동은 잘 되지만 새로고침만 하면 다음과 같은 에러가 발생했습니다. 📌 원인 검색해봐도 제대로 된 원인을 알 수 없어 곰곰히 생각해보니 proxy 이후에 문제가 발생한 것을 토대로 라우팅에 원인이 있다고 판단했습니다. 리액트 라우터가 자신에게 들어오는 요청을 토대로 페이지를 이동해야 하지만 root(’/’)에 포함된 모든 url을 백엔드 서버로 proxy 해버리는 바람에 스프링 부트 서버에서 Whitelabel Error Page 에러를 뱉.. 2023. 8. 4.

[React+TS] styled-components, ThemeProvider 타입 정의하기 ⚡️ styled-components ThemeProvider 대표적인 CSS in JS 라이브러리인 styled-components는 기본적으로 스타일을 전역적으로 공유하는 ThemeProvider를 제공합니다. 사용방법은 다음과 같이 간단합니다. 📌 ThemeProvider import { ThemeProvider } from "styled-components"; const theme = { color1: "#000", color2: "#001", color3: "#002" }; export default function App() { return ( ... ); } 다음과 같이 최상위 컴포넌트에 ThemeProvider를 감싸주고 theme props를 넣어줍니다. 📌 theme 사용 방법 impo.. 2023. 5. 28.

이전 1 2 3 4 5 다음

티스토리툴바