dev-hpk 님의 블로그

React로 컴포넌트를 만들다 보면 디자인이 바뀌어 컴포넌트를 재사용할 수 없거나, 처음 계획가 달리 컴포넌트의 구조가 복잡해지는 경우가 있습니다. 이로 인해 코드의 가독성이 떨어지거나 새로운 컴포넌트를 만들게 됩니다. 컴파운드 컴포넌트 패턴(Compound Components Pattern)를 사용하면 이와 같은 문제를 해결할 수 있습니다. 목차 1. Compound Component Pattern? 2. 주요 개념 3. 예제 및 문제점 4. Compound Component Pattern 적용 예시 5. Compound Component Pattern 사용 예시위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Compound Component Pattern?Compound Component P..

구성 요소를 재사용 가능하게 만드는 방법은 render prop 패턴을 사용하는 것입니다. render prop은 JSX 요소를 반환하는 함수입니다. 컴포넌트 자체는 render prop 외에는 아무것도 렌더링 하지 않습니다. 대신 컴포넌트는 자체 렌더링 로직을 구현하는 대신 render prop을 호출하기만 합니다. 1. Render Prop VS Children PropChildren Prop 사용Render Prop 사용 Redner Prop을 직접 사용해보니 더 의문이 생긴다. children과 구조나 결가에서 큰 차이가 없는 것 같은데, 왜 Render Prop을 사용해야 할까? 2. Render Prop과 Children Prop의 값(데이터) 처리Render Prop의 인자로 값(데이터)을 ..

1. 애플리케이션 추가 및 키 발급 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com위 주소에서 애플리케이션을 등록하고 로컬 환경을 도메인으로 추가했다.  키도 발급 완료했으니 공식 문서를 보면서, 화면에 지도를 띄워보겠습니다. 2. 지도를 그리는 JavaScript API 불러오기index.html에 직접   서버를 실행시켜 확인해 보니, 내 api key가 개발자 도구에 그대로 노출되고 있었다. 3. API Key env로 관리하기API Key를 Github이나 서버에서 개발자 도구로 확인하지 못하게 하기 위해 .env에서 환경변수로 관리하기로 했..

1. 프로젝트 생성터미널을 이용해 프로젝트를 생성합니다.npm create vite@latest ts_project -- --template react-ts 위 명령어에서 ts_project는 프로젝트 폴더 이름입니다. 원하는 이름으로 변경할 수 있습니다.프로젝트 폴더가 생성되었다면 폴더로 이동 후 패키지를 설치합니다.cd ts_projectnpm install 설치가 완료되면, 프로젝트의 기본 구조와 주요 파일들이 자동으로 생성됩니다. 2. 프로젝트 구조Vite와 TypeScript 템플릿을 사용해 생성된 프로젝트는 기본적인 파일 구조가 설정되어 있습니다.src: 소스 코드가 포함된 폴더로, 컴포넌트와 유틸리티 파일들을 여기에 배치합니다.assets: 이미지, 아이콘, 폰트등 정적 파일을 저장하는 폴더..

목차 1. Vite 2. React 3. TypeScript 4. Vite + React + TypeScript 장점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. ViteVite는 최근 많은 개발자들 사이에서 주목받고 있는 빌드 도구입니다. 기존의 Webpack을 대체하는 대안으로, 빠른 빌드 속도와 개선된 개발 환경을 제공합니다. Vite를 선택한 이유는 다음과 같습니다.빠른 개발 서버 : Vite는 코드 변경 시 전체 프로젝트를 다시 빌드하는 대신, HMR( 핫 모듈 리플레이스먼트)를 통해 변경된 부분만 빠르게 업데이트하기 때문에 개발 서버가 매우 빠릅니다. 이로 인해 개발 중에 빠른 피드백을 받을 수 있어 생산성이 크게 향상됩니다.ES 모듈 기반 : Vite는 ES 모듈을 기반으로 ..

throttle과 IntersectionObserver API를 활용하여 Infinity Scroll을 라이브러리 없이 구현했습니다. 직접 구현하면서 여러 모듈을 조합하여 성능을 최적화하고, 부드럽게 데이터를 로드하기 위해 상당한 고민이 필요했습니다. 특히 throttle로 스크롤 이벤트를 제어하고, IntersectionObserver로 뷰포트 내 요소가 감지될 때만 데이터를 추가 요청하도록 구성한 부분이 핵심이었습니다. 1. IntersectionObserver 적용 Infinity Scroll 구현...function ScrollComponent() { ...생략 const endRef = useRef(null); // Infinite Scroll 구현을 위한 Ref 객체 /** * 서버에..

1.  프로젝트 생성https://github.com/hpk5802/Fandom-K GitHub - hpk5802/Fandom-KContribute to hpk5802/Fandom-K development by creating an account on GitHub.github.com 2. 폴더 구조 contexts : 전역으로 사용할 state를 관리하는 폴더hooks : 커스텀 훅을 관리하는 폴더mock : api 연동 전 사용할 mock 데이터를 관리하는 폴더pages : 화면에 렌더링 될 Page를 관리하는 폴더router : 라우팅을 관리하는 폴더style : 스타일 시트를 관리하는 폴더utils : 기능들을 관리하는 폴더3. 기술 스택ReactJavaScriptSCSS

React에서 컴포넌트가 리렌더링 될 때, 성능 최적화를 위해 때때로 계산이 많이 필요한 값이나 함수의 결과를 캐싱할 필요가 있습니다. 이때 useMemo 훅을 사용하면 불필요한 연산을 방지하여 성능을 개선할 수 있습니다.  목차 1. useMemo란? 2. useMemo 사용법 3. useMemo 의존성 배열 4. useMemo 사용 주의사항 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. useMemo란? useMemo는 특정 계산의 결과를 메모이제이션하여, React가 불필요하게 해당 계산을 다시 실행하지 않도록 도와주는 훅입니다. useMemo는 컴포넌트가 리렌더링 될 때마다 실행되는 비싼 연산을 피하고자 할 때 사용됩니다. React는 해당 값이 바뀌지 않으면 이전에 계산된 값..

React는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트가 화면에 렌더링 되고 업데이트되는 흐름을 이해하는 것이 중요합니다. 이 흐름을 React에서는 생명 주기(Lifecycle) 라고 부르며, 각 단계에서 컴포넌트가 수행하는 특정 작업들이 있습니다.  목차 1. React 생명 주기란? 2. Mounting (컴포넌트 생성) 3. Updating (컴포넌트 업데이트) 4. Unmounting (컴포넌트 제거) 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다.1. React 생명 주기란?React 생명 주기는 컴포넌트가 생성(Mounting), 업데이트(Updating), 제거(Unmounting) 되는 일련의 과정을 의미합니다. 컴포넌트는 이 세 가지 단계에서 각각의 메서드들을 호출하며, ..

React는 컴포넌트의 상태를 관리하기 위해 여러 가지 훅을 제공합니다. 그중 하나가 useReducer 훅으로, 상태를 복잡하게 업데이트할 필요가 있을 때 매우 유용한 훅입니다. useReducer는 상태를 처리하는 로직이 많거나, 여러 가지 상태를 관리해야 할 때, 특히 Redux와 같은 상태 관리 패턴과 유사한 방식으로 상태를 관리할 수 있도록 해줍니다.   목차 1. useReducer란? 2. useReducer와 useState의 차이점 3. useReducer 사용법 4. 복잡한 상태 관리에서 useReducer 사용하기 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. useReducer란? useReducer 훅은 상태(state)와 액션(action)을 기반으로 상태를..