ji-frontdev

프론트엔드 개발자로서 4~5년 전 React 프로젝트를 진행하면서 Container/Presentational 패턴을 사용했던 경험이 있다.당시에는 패턴에 대해 깊이 이해한 상태는 아니었지만, 로직과 UI 코드가 얽혀 유지보수가 어려워지자 자연스럽게 관심사를 분리해야겠다는 필요를 느꼈고, 이 패턴을 도입했다.돌아보면 그 선택은 꽤 합리적이었다. 그리고 최근 React의 패턴 흐름을 공부하면서,과거의 구조와 현재의 방식이 어떻게 변화해왔는지를 다시 되짚어보게 되었다.🧩 Container/Presentational 패턴이란?1. 왜 나왔는가?React가 등장한 초기에는 컴포넌트 안에서 로직, 상태, UI 모두를 처리하는 방식이 일반적이었다.하지만 점점 규모가 커지고 협업이 늘어나면서, 다음과 같은 문제가 ..

1️⃣ Custom Hook 기본 구조Custom Hook은 기본적으로 함수형 컴포넌트 내부에서 재사용할 로직을 분리하는 패턴.📌 구성 요소반드시 use 접두사를 붙여야 함 → 예: useFetch, useAuth내부에서 React Hook(useState, useEffect, useContext 등)을 사용할 수 있음UI와 독립적이어야 하며 JSX를 반환하지 않음const useCustomHook = () => { // 상태 관리 const [state, setState] = useState(null); // 부수 효과 실행 useEffect(() => { // 로직 실행 setState('Hello Custom Hook!'); }, []); return state;};​ 이제 ..

📌 Custom Hook 패턴 개요1️⃣ Custom Hook이란?Custom Hook은 React의 기존 Hooks(useState, useEffect, useContext 등) 을 조합하여반복되는 로직을 재사용 가능하도록 추출한 함수.컴포넌트 내부에서 자주 사용되는 로직을 별도의 함수로 분리함으로써 코드의 가독성과 유지보수성을 향상시킴.✅ 특징✔️ use 접두사를 반드시 붙여야 React가 Hook으로 인식함✔️ JSX를 반환하지 않음 (UI가 아닌 로직만 다룸)✔️ 다른 Hook(useState, useEffect, useMemo 등)을 내부에서 사용할 수 있음2️⃣ 왜 Custom Hook이 필요한가? (기존 React 개발 방식의 문제점)기존 방식에서는 반복되는 로직이 있을 경우, 여러 컴포넌..

React에서 StrictMode는 애플리케이션의 잠재적인 문제를 식별하고 개선하기 위해 사용하는 개발 모드 도구입니다. 이는 UI의 의도치 않은 동작이나 비효율적인 코드, 그리고 React의 향후 버전과의 비호환성 문제를 사전에 파악할 수 있도록 돕습니다.StrictMode는 실제로 애플리케이션에 런타임 동작에 영향을 미치지 않으며, 개발 환경에서만 활성화됩니다. 배포 환경에서는 제거되기 때문에 성능에 영향을 주지 않습니다.왜 StrictMode를 사용하는가?React의 점진적인 개선과 최신 버전의 도입을 원활하게 하기 위해서는 기존 코드가 최신 React 관행과 잘 호환되는지 확인해야 합니다. StrictMode를 사용하면 다음과 같은 문제를 쉽게 발견할 수 있습니다:1. 안전하지 않은 생명주기 메서..

React 컴포넌트를 작성하다 보면 JSX에서 최상위 요소를 하나만 리턴해야 하는 규칙을 마주하게 됩니다.이 규칙은 React의 가상 DOM과 연관이 있으며, 효율적인 렌더링과 성능 최적화를 위해 중요합니다.이 글에서는 React.Fragment와 그 축약형인 빈 태그 ( )를 사용하는 이유와 동작 방식을 설명합니다.React에서 최상위 요소 하나만 리턴하는 이유React는 가상 DOM (Virtual DOM)을 사용하여 렌더링 성능을 최적화합니다.컴포넌트가 업데이트될 때마다 React는 가상 DOM에서 변경 사항을 확인하고, 최소한의 변경만 실제 DOM에 반영합니다.이를 Reconciliation (조정) 과정이라고 부르며, React의 핵심 동작 방식 중 하나입니다.이때 가상 DOM을 효율적으로 비교..

문제이 오류는 현재 프로젝트가 특정 pnpm 버전(8버전)을 요구하는데, 사용 중인 pnpm 버전(9.9.0)이 그 요구 사항을 충족하지 않아서 발생하는 문제입니다.오류 메시지에서 보면:필요한 pnpm 버전: 8현재 설치된 pnpm 버전: 9.9.0프로젝트의 package.json 파일 내에 engines.pnpm 필드가 있어, 이 프로젝트는 pnpm 버전 8만 지원한다고 명시되어 있습니다.해결 방법1. pnpm의 특정 버전 설치 pnpm 버전 8을 설치하여 문제를 해결할 수 있습니다. 다음 명령어로 pnpm의 버전을 8로 지정하여 설치하세요:npm install -g pnpm@8  2. 프로젝트의 engines 설정 수정 만약 프로젝트 팀이 pnpm 9 버전을 사용할 준비가 된 상태라면, 프로젝트의 p..

React의 렌더링 구조와 최적화 React의 렌더링 흐름과 성능 최적화 기법을 살펴보고, 코드 효율성을 높이는 방법을 알아봅니다. 1. React의 렌더링 원리 React는 컴포넌트 기반 라이브러리로, 데이터가 변경되면 화면을 효율적으로 업데이트하는 Virtual DOM 구조를 사용합니다. Virtual DOM Virtual DOM은 React의 핵심 개념 중 하나로, 실제 DOM에 접근하는 것을 최소화하여 성능을 최적화하는 방식입니다. React는 상태가 변경되었을 때, 직접 DOM을 업데이트하지 않고 메모리 내의 가상 DOM을 먼저 업데이트합니다. 이후 실제 DOM과의 차이를 계산하여 변경된 부분만 반영하는 방식으로 최적화합니다. 이로 인해 불필요한 연산과 DOM 조작..

프론트엔드 React 개발자가 알아야 할 기본 개념1. 웹의 기본 동작 원리주요 개념:브라우저의 동작 방식브라우저가 HTML, CSS, JavaScript를 처리하여 렌더링하는 과정 이해 (DOM 파싱, 렌더 트리 생성, CSSOM, JS 실행)요청/응답 구조HTTP와 HTTPS의 차이점, HTTP 메서드 (GET, POST, PUT 등), 상태 코드의 이해와 활용쿠키/세션과 스토리지쿠키와 세션의 차이점, 쿠키 사용 시점, 로컬 스토리지와 세션 스토리지 사용2. React 기본 및 심화주요 개념:React의 렌더링 구조와 최적화React의 렌더링 동작 이해 및 성능 최적화를 위한 기법 (예: React.memo, useCallback, useMemo)컴포넌트 설계 및 상태 관리컴포넌트 분리, 상태 관리 ..

🎯 가상 스크롤 vs 무한 스크롤이 필요한 이유대규모 데이터를 한 번에 렌더링 하면 성능 저하로 인해 느린 로딩 속도와 높은 메모리 사용량 문제가 발생할 수 있습니다.가상 스크롤과 무한 스크롤을 사용하면 이러한 문제를 해결할 수 있습니다.가상 스크롤(Virtual Scrolling): 화면에 보이는 아이템만 렌더링하고, 보이지 않는 아이템은 제거하여 메모리와 성능을 최적화합니다.무한 스크롤(Infinite Scrolling): 스크롤 위치에 따라 새로운 데이터를 동적으로 가져와 추가 렌더링하며, 페이지 전환 없이 자연스러운 콘텐츠 탐색이 가능합니다.🔥 주요 가상 스크롤 및 무한 스크롤 라이브러리 라이브러리  장점 단점 추천 용도react-virtual가볍고 빠른 성능 🚀복잡한 기능이 부족할 수 있음..

🚀 React UI 라이브러리 비교🖼️ 대표적인 UI 라이브러리 라이브러리  장점 단점 추천 용도Material UI구글의 머티리얼 디자인을 바탕으로 직관적이고 일관된 스타일 제공 커스터마이징 복잡, 상대적으로 큰 패키지 크기 대규모 웹 애플리케이션, 기업용 대시보드 Ant Design풍부한 컴포넌트, 비즈니스 환경에 최적화된 디자인 학습 곡선이 높음, 한국어 리소스 부족 대규모 프로젝트, 엔터프라이즈 애플리케이션 Chakra UI스타일링 및 접근성에 강점 컴포넌트 다양성이 다소 부족 빠른 프로토타입 개발, 소규모 프로젝트 React Bootstrap전통적인 웹 디자인과 호환성 우수 디자인 커스터마이징 한계 전통적인 UI가 필요한 프로젝트, 레거시 지원 Mantine빠른 스타일 적용, 접근성에 중점 ..