개발할래 운영할래?

참고 : [모노레포 새 프로젝트 환경설정하기] 참고 한 포스트는 모노레포 기준이지만, 아래에서 셋팅 할 일반 레포 (react app 하나만 있는 repo) 에도 적용 가능 1. cra with typescript yarn create react-app newproject --template typescript 2. set yarn version as berry yarn set version berry 3. change typescript version [tsconfig.json] yarn remove typescript yarn add -D typescript@4.9.3 (yarn berry 와 매칭 가능한 버전 중 최상위 버전) 4. set eslint [.eslintrc.json] yarn add ..

1. react-query 의 isLoading, error 를 Suspense 및 ErrorBoundary 로 대체했다. (좀더 선언적이며 JSX/TSX 친화적이게) [commit link] a. 우선 react-query client 에 'suspense' 를 사용한다고 {suspense: true} option을 줘야 한다. b. react-query의 useQuery 훅이 반환하는 isLoading,error 를 각각 suspense, errorBoundary 로 대체한다. 빨간색 표시 : isLoading -> suspense (참고 : Suspense with React-Query 사용법) 보라색 표시 : error -> ErrorBoundary c. ErrorBoundary 는 아직까진 Re..

1. 어떤 챌린지 이고 어떤 강의일까? 원티드 프리온보딩 챌린지란? 원티드에서 매달 프리온보딩 챌린지를 하고 있다. 강의도 해 주면서 원티드를 통해 채용연계(물론 지원은 스스로 해야하죠 ^^7) 및 상금 수여까지 한다. (높은 강의 퀄리티를 보면 채용연계 보단 공짜로 개발자 교육시켜주고 싶어서 안달난 것 같은...크흠... 원티드 애용하겠읍니다.) 회차가 꽤 된 것 같던데, 지난 11월에야 이런 좋은 교육을 알게 됐다니. 후회가 된다. 12월 챌린지(monorepo) 때 강의 내용이 너무 좋았어서 이번 강의도 신청하게 됐다. 이번 챌린지의 주제/내용 React Query 를 적용해 TODO List CRUD 기능이 있는 웹서비스를 만들어 보는 주제였으며, 강의를 들으면서 사전과제를 발전시키는 방식으로 과..

UseEffect 란? UseEffect 는 함수형 컴포넌트에서 sied effect(callback) 를 실행할 수 있게 도와주는 Hook 이다. (React v16.8 에 추가) 즉, 유저가 버튼을 클릭하거나 어떤 상호작용을 통해 컴포넌트 state(변수)가 변경시켰을 때, callback을 수행하도록 할 수 있는 Hook. UseEffect 가 실행될 때 useEffect 는 다음 상황에 실행된다. 1. 처음 component 가 렌더링 될 때 2. component의 state(변수) 가 변경될 때 Dependancy Array (의존성 배열) useEffect 는 '어떤 상태(변수)가 변했음'을 감지하고 callback 을 실행시켜 준다. '어떤 상태' 를 이 useEffect 가 가지는 '의존..