React

프론트엔드 개발에서 정말 빼놓을 수 없는 존재가 된 React에 입문하게 되었습니다. 현재 공식 문서를 바탕으로 공부를 하고 있습니다.

리액트를 공부하면서 지난 시간 State hook에 이어서, 공식문서를 바탕으로 LifeCycle과 Effect hook을 배우면서, 얻은 지식과 내용들을 남겨보려 합니다.

우리는 로그인 또는 회원가입 같은 동작을 할 때, 사용자의 데이터를 받아 어디론가 제출하는 Form 요소를 종종 사용하곤 합니다.

Prologue 이번에는 리액트에서 API 콜을 하는 2가지 방법에 대해서 알아보겠습니다. fetch API & Axios

이번에는 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있는 context API와 useState와 유사하지만 대체로 사용되는 useReducer hook을 다루는 방법에 대해서 알아보겠습니다.

리액트를 다루다 보면 변화는 감지해야 하지만, 해당 변화가 렌더링을 발생시키면 안되는 값을 다뤄야 하는 상황들이 종종 있습니다. 불필요한 렌더링을 방지해주는 것에 도움을 주고, 성능 최적화 측면에서도 도움을 주는 useRef hook에 대해서 정리해보겠습니다.

이번주차 스터디 공유물로 리액트에 점진적으로 TypeScript를 적용하는 방법에 대해서 알아보겠습니다. create-react-app을 이용해서 리액트 어플리케이션을 만든다면, TypeScript + React 환경을 쉽게 구축할 수 있습니다.

이번에는 Recoil을 도입해서 작은 어플리케이션을 만들어 본 후기와 recoil의 기본적인 개념에 대해 정리해보겠습니다.

이번주 스터디는 지난 React에 점진적으로 TypeScript 적용하기 이번에는 contextAPI + useReducer를 활용할 때 type을 적용하는 방법 위주로 정리합니다.

앞으로 진행하게 될 프로젝트에 redux-toolkit을 적용할 것 같아 익히고 정리하는 시간을 가지려고 합니다.

Prologue React로 프론트엔드 개발 시 Redux를 활용한 전역 상태 관리를 하게 됩니다. 이 전역 상태 관리의 프로세스는 다음과 같습니다. >1. 해당 UI에 이벤트 발생 Event Handler에서 action 객체가 Dispatch 됨 Dispatch

프로젝트에서 로그인 기능을 구현하게 되었습니다. 기본적인 flow 조차 알고 있지 못했기 때문에, 이 글은 여러가지 로그인 구현 과정 포스팅들을 읽고 참고하여 내용을 정리한 글입니다.

이번에는 RTK(Redux Toolkit) Query에 대해서 이해해보겠습니다. RTK Query 공식문서를 번역하면서 정리한 내용입니다.RTK Query는 Redux Toolkit을 설치하고 나면, 내장되어 있어 따로 설치할 필요가 없습니다.

리액트를 활용하여 프로젝트를 구성하다 보면, 나만의 custom hook을 만들어야 하는 경우가 생깁니다. 주로 useState와 연계하여 반복되는 함수로 사용되는 패턴이 보일 경우, 커스텀 훅으로 hooks라는 디렉토리에 별도 저장 후, import 하여 사용합니다.

회원가입, 로그인, 로그인 유지와 관련한 인증(Auth) 기능을 구현하기 위해서 백엔드로부터 응답받은 refreshToken, accessToken과 같은 JWT Token을 쿠키 또는 localStorage에 저장하는 과정이 일어 납니다.