타입스크립트와 리액트를 주로 활용하여 프론트엔드 개발을 하다보면 종종 마주치는 type Error가 있습니다. 바로 unknown 타입으로 판단되므로, 값을 제대로 할당하라는 TS 오류를 심심치 않게 볼 수 있습니다.

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

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

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

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

공통으로 사용될 버튼 컴포넌트를 만드는 과정에서 다음과 같은 에러를 마주하게 되었습니다. button DOM 요소에 background를 props로 넘겨, Emotion을 활용한 props 기반 스타일링을 하는 과정에서 위와 같은 에러를 마주하였습니다.backgrou

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

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

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

가끔 git commit 또는 git push를 할 때 잘못된 디렉토리에서 git add 파일/폴더명하고 push하여, 이와 같이 원하는 디렉토리 내부로 진입이 불가능한 경우들이 생깁니다.

useState에 generic으로 TodoType\[] 타입을 주었을 때 에러가 발생했습니다.현재 코드 상황은 다음과 같습니다.다음과 같은 오류가 발생합니다.

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

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

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

node_modules 폴더가 있는 지 확인하고 없는 경우 package.json이 있는 디렉토리에서 yarn install을 통해 패키지를 재생성한다.

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

10월이 지나가고 어느새 11월에 들어섰다. 마지막 학기의 중간고사를 치뤘고, 졸업도 곧 다가오며, 프론트엔드 개발 공부도 많이 한 것 같지만, 뭔가 실질적으로 포트폴리오라고 할 수 있는 것이 없어 막막하기만 하다.

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

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

이번 주에는 텍스트 에디터를 만들어 보는 시간을 가졌습니다. JavaScript API Document.execCommand를 활용해 보았습니다.