겨리의 개발일기

최근 면접스터디를 준비하면서 리액트의 Portal에 대해 공부한 적이 있었다. 백문이불여일타라고...🧐 설명을 여러번 보는 것보단 직접 구현해 보는 것이 도움이 될 것 같아 직접 시도해 봤다! 이에 대한 과정을 정리해보고자 한다. 보통 모달을 생각하면 화면 중앙에 예쁘게 뜨는 창 하나를 떠올릴 수 있을 것이다. 먼저 그런 일반적인 모달을 구현해봤다. 모달 컴포넌트 구현하기 // Modal.tsx ... const ModalContainer = styled.div` position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; `; const Style..

Programming/React 2024. 2. 2. 19:19

최근 개인 프로젝트에 구글 애널리틱스를 적용한 내용을 정리해보려고 한다. 😎 😎 구글 애널리틱스(google analytics) 구글 마켓팅 플랫폼 브랜드 내의 플랫폼으로 웹사이트 트래픽을 추적하고 보고하는 웹 애널리틱스 서비스 웹 애널리틱스(web analytics) 웹 사용률을 이용하고 최적화하기 위해 웹 데이터를 측정, 수집하고 분석하여 보고 하는 것 웹 트래픽을 측정하는 과정일뿐 아니라 비즈니스와 시장 연구의 도구로서 사용이 가능하다. 웹사이트 효율성을 측정하고 개선 할 수 있다. 나는 개인 프로젝트로 진행했던 나와 맞는 고양이 찾기(심리테스트) 사이트의 사용률을 측정해보고 싶어서 시도해보았다. 💫 프로젝트 바로가기 : https://find-my-cat.netlify.app/ ✔️ 참고 2023..

Programming/React 2024. 1. 17. 18:38

Controller 컴포넌트를 사용해서 처리를 하고 나니 중복된 코드가 많아 개선 할 수 있을 것 같다는 생각이 들었다. 찾아보니 useController 를 사용해서 재사용이 가능한 컴포넌트를 만들 수 있다고 해서 바로 시도! 😎 코드를 보기 전에 useController의 Props 부분부터 확인해보자! useController Props // controller.d.ts export type UseControllerProps = { name: TName; rules?: Omit; shouldUnregister?: boolean; defaultValue?: FieldPathValue; control?: Control; disabled?: boolean; }; 추가 설명 🗸 name - input 의 ..

Programming/React 2023. 12. 15. 01:54

최근 react-hook-form과 MUI를 함께 사용했던 경험이 있었는데 이에 관한 내용을 정리해보려한다. 왜 raect-hook-form을 사용할까? 🤔 리액트를 사용해서 폼을 다룰 땐 유효성 검사를 위해 제어 컴포넌트를 사용하는 경우가 많다. 즉, 사용자가 입력하는 값들을 모두 state로 관리하고 업데이트 한다. 하지만 이와 관련하여 몇 가지 문제점이 있다! 제어 컴포넌트를 사용할 때 문제점 1. 렌더링 이슈 react에서 컴포넌트 리렌더링이 발생하는 조건 중 하나는 state의 값이 변했을 때이다. 모든 값이 state로 연결 되어 있기 때문에 하나의 값이 변하더라도 많은 리렌더링이 발생하게 된다. 2. 코드의 가독성 리액트에서는 제어 컴포넌트로 폼을 다루게 된다. 이를 위해 각 요소마다 sta..

Programming/React 2023. 12. 14. 17:30

👾 문제 개인 프로젝트 개발 중 콘솔창에 에러가 찍히는 걸 발견했다. Warning: Each child in a list should have a unique"key"prop 라는 에러 ! 오잉 난 key에 값을 지정해줬는데..?!?! 🤔🤔🤔 뭘까 하고 찾아보니 금방 원인을 찾을 수 있었다. 일단 코드를 보자! 코드를 보면 map 함수 바로 아래에 Fragment( ) 로 묶어줬는데 이 부분에 key를 지정해주지 않아서 에러가 발생한 거였다! 어찌보면 당연한 것...상단에 Fragment로 묶어줬으니 그 부분이 반복적으로 생길 거니까 key 지정은 그 부분에 해줬어야함 😵‍💫 🧐 참고 ✅ key에 index를 지정해주는 건 웬만하면 지양하는 것이 좋다. ✅ 리액트 공식문서에서도 유니크한 값을 지정하는 ..

Programming/React 2023. 8. 30. 00:59

React Query란? ✅ 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리. ✅ 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어졌다. server state와 clinet state server state ✅ 서버는 특정 시점에 클라이언트 요청에 대해 데이터데이스에서 유저 정보를 가져와 서버의 상태값을 만들어낸다. ✅ 데이터베이스에 있는 값을 그대로 클라이언트에게 전달할 수도 있고, 요청에 담긴 특정 값을 이용해 정보를 가공하여 메모리에 들고있다. 그리고 이 정보를 클라이언트에게 전달한다. clinet state clined state는 크게 두 가지로 나눌 수 있다. ✅ client에서 자체적으로 만드는 state(최초..

Programming/React 2023. 7. 4. 19:51

Recoil이란? ✅ context API 기반으로 구현된 함수형 컴포넌트에서만 사용가능한 페이스북에서 만든 라이브러리 Recoil의 핵심 컨셉 ✅ 오직 리액트만을 위해 리액트처럼 ✅ react 내부 상태만 이용 ✅ 작은 Atom 단위로 관리 ✅ 순수 함수 Selector ✅ Re-Render 최소화 ✅ 데이터 흐름을 따라서 ✅ 곧 새로운 React 기능과 호환성 설치 방법 # npm npm install recoil # yarn yarn add recil 주요개념 Atoms ✅ 상태(state)의 일부를 나타낸다. ✅ 업데이트와 구독이 가능하다. ✅ Atoms 는 어떤 컴포넌트에서나 읽고 쓸 수 있다. ✅ atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다 → atom에 변화가 생기면, 그..

Programming/React 2023. 7. 4. 19:38

Redux란? ✅ JavaScript 상태관리 라이브러리(리액트에 종속된 라이브러리 X) Redux의 기본 개념 1. Single source of truth ✅ 동일한 데이터는 항상 같은 곳에서 가지고 온다. → 스토어라는 하나 뿐인 데이터 공간이 있다. 2. State is read-only ✅ 액션이라는 객체를 통해서만 상태 변경이 가능하다. 3. Changes are made with pure functions ✅ 변경은 순수함수로만 가능하다. → 리듀서와 연관되는 개념 설치방법 # npm npm install redux react-redux # yarn yarn add react-redux store 생성과 reducer ⭐ store 생성시 reducer를 반드시 주입해야한다. reducer ..

Programming/React 2023. 7. 4. 18:57