오늘은 React Vite TypeScript 환경에서 SPA 프로젝트 세팅하는 방법에 대한 이야기를 해보려고 한다. (feat. chatGBT) 내가 하고 싶은 것 현재 레거시 프로젝트는 Creat-React-App 으로 SPA 프로젝트가 만들어져 있다. CRA는 번들러로 Webpack 을 사용하기 때문에 빌드 시 속도가 상대적으로 esbuild 보다 느리다. 그렇기 때문에 React Vite 환경에서 SPA 프로젝트로 마이그레이션을 시도하였다. (이참에 JavaScript 도 TypeScript로 마이그레이션!) 방법 React Vite로 SPA를 만드는 경우가 많지 않나 보다... 구글링을 해도 내가 원하는 코드를 찾기가 어려웠다 ^_ㅜ chatGBT에게 물어봤더니 아주 친절하게 답변을 해주었다. ..

useMemo와 useCallback React에서 제공하는 Hook API 중 하나이다. 컴포넌트의 렌더링 성능을 최적화하는 역할을 한다. 컴포넌트는 언제 렌더링 될까요? 자신의 state가 변경되거나, 부모에게서 받은 props가 변경 되었을 때마다 다시 렌더링 된다. 심지어 자식 컴포넌트에서 렌더링 최적화를 위한 별도의 코드를 추가하지 않으면, 부모에게서 받는 props가 변경되지 않았더라도 다시 리렌더링 된다. 예시 코드 https://codesandbox.io/s/angry-bash-ovd8pk?file=/src/App.js angry-bash-ovd8pk - CodeSandbox angry-bash-ovd8pk by leehwarang using react, react-dom, react-sc..

react-daum-postcode 사용 방법 설치 npm install react-daum-postcode import import DaumPostcode from "react-daum-postcode"; 주소 검색 완료 함수 생성 onComplete 함수에 주소 검색 완료 시 실행시킬 로직을 바인딩한다. Address 타입의 주소(data)를 인자로 받을 수 있다. (Address 타입은 react-daum-postcode에서 import 한다.) 완료 함수 실행 시 주소창은 자동으로 사라진다. data 예시 사용 예시 (with Antd 모달) import DaumPostcode from "react-daum-postcode"; import { Modal, Button } from "antd"; /..

전역 상태 관리는 왜 해야 할까? 일반적으로 React에서는 데이터는 부모로부터 props를 통해 전달된다. 그러나 컴포넌트를 나누다보면 하나의 어플리케이션 안에 여러 컴포넌트에 전달해줘야 하는 경우가 발생한다. 이러한 현상을 Props drilling 현상이라고 한다. Props Driling : props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정 Props Drilling 현상을 막기 위해서는 전역 상태 관리 라이브러리를 사용해야 한다. 전역 상태 관리 도구에는 어떤 것들이 있을까? Redux 현재 리액트를 사용하는 사람들에게 가장 익숙한 상태관리 라이브러리라고 생각한다. 나 또한 Re..

Recoil 선택 배경 상태관리 라이브러리에 대한 고민 너도 나도 쓰는 Redux "귀찮고 번거로워요... Recoil의 핵심 컨셉 오직 React만을 위해 React처럼 React 내부 상태만 이용 작은 Atom 단위로 관리 순수함수 Selector Re-Render 최소화 데이터 흐름을 따라서 곧 새로운 React 기능과 호환성 기본 활용법 예시로 상품 리스트 화면을 살펴보자. 데이터 흐름은 아래와 같다. Modal 팝업은 간단한 기능이지만 실제 열고 닫는 이벤트가 각각 다른 컴포넌트에서 이루어져야 하기 때문에 상태관리를 해야 하는 대표적인 예이다. List 역시 여러 곳에서 사용될 수 있기 때문에 상태 관리를 해보도록 하겠다. 해당 atom을 호출하는 방법은 React Hook와 유사하다. Reco..

비동기 통신과 전역 상태 관리의 최신 흐름 우리는 지금까지 아래의 행동들을 배웠다. API 호출하기 전역 상태 관리하기 API 호출하고 전역 상태에 Update 하기 🤷‍♀️ 그런데 API 호출하고 전역 상태를 update 해주는 게 어렵고 복잡하지 않는가? redux-toolkit의 createAsyncThunk 예시 하나의 API에 대한 코드가 위의 코드이다. 이 때, 여러 API를 호출하고 전역 상태 관리를 한다면....? 프로젝트의 크기가 커질 수록 API 호출 후 전역 상태를 업데이트 해줘야 하는 상황마다 작성해야 하는 코드가 많다. store의 크기도 비대해진다. 😭 전역 상태를 이렇게 관리하는 게 맞을까...? API 호출 후 응답 데이터 ➡ Se..

프로젝트 설명 옥소폴리틱스 인턴 첫번째 프로젝트는 '옥소폴리틱스 홈페이지 클론 코딩' 으로 진행하였다. github link : https://github.com/oxopolitics-internship-for-zerobase/oxoClone GitHub - oxopolitics-internship-for-zerobase/oxoClone Contribute to oxopolitics-internship-for-zerobase/oxoClone development by creating an account on GitHub. github.com 프로젝트의 목적 나를 포함한 3명의 인턴들 모두 React를 처음 접하거나 접한지 얼마 되지 않았기 때문에, React와 좀 더 친해지기 위한 프로젝트이다. 구현하고..

에러와 해결 방법 createUserWithEmailAndPassword & signInWithEmailAndPassword 오류 onSubmit 함수 중 createUserWithEmailAndPassword와 signInWithEmailAndPassword 함수에 다음과 같이 코드를 작성하였더니 오류가 생겼다. 코드 import { createUserWithEmailAndPassword, signInWithEmailAndPassword, } from 'firebase/auth'; import { authService } from 'fbase'; data = await createUserWithEmailAndPassword( authService, email, password ); 에러 Firebase..