doeunn.log

🚀 Suspense ? Suspense는 컴포넌트의 렌더링을 어떤 작업이 끝날 때까지 잠시 중단시키고 다른 컴포넌트를 먼저 렌더링할 수 있습니다. 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비가 되지 않았다고 리액트에게 알려주는 방법이 되겠습니다. 쉽게 말해서, 우리가 서버에서 데이터를 받아올 때 클라이언트의 상태는 요청 → 대기 → 응답 순이 될 겁니다. 이 대기할 때 Suspense의 fallback이라는 속성에 따로 지정해둔 컴포넌트를 화면에 보여주고 응답이 왔을 때는 원래대로 보여주고 싶었던 데이터를 보여주는 방법이라고 볼 수 있습니다. 기본 문법 컴포넌트를 위와 같이 Suspense로 감싸주면 컴포넌트의 렌더링을 특정 작업 이후(위에서는 데이터를 받아오기 전까지) 미루고, 그 작업이 끝날 때까..

🚀 에러 핸들링 ? 리액트에 오류가 발생했을 때 유저 혹은 개발자에게 어떤 방식으로 표출할지에 대한 내용입니다. 여기서 오류는 api 요청에 대한 오류 메시지일 수도 있고, 리액트에서 캐치한 오류일 수도 있습니다. 또한 에러가 발생할법한 상황들을 생각해보고 유저에게 에러 발생을 알리는 것 뿐만 아니라, 가능하다면 어떻게 대응할지도 전달해주는 것이 사용성 측면에서도 좋다고 볼 수 있습니다. 어떤 식으로 에러를 알리는가 ? 유저에게는 toast UI를 통해 에러 상황을 알려주거나 상황에 따라서는 다시시도 버튼 혹은 로그인 모달을 제공할 수도 있겠습니다. 또한 개발자에게 개발 환경에서는 에러 발생 시 console.error()로 알려주고, 배포 환경에서 에러 발생시 Sentry로 알려주어 대응합니다. 위와 ..

🚀 React-Query ? React-Query는 서버로부터 받은 데이터의 전역 상태 관리를 위한 라이브러리입니다. 서버의 데이터 요청을 캐싱하여 지속적으로 동기화하고 업데이트 하는 작업을 도와줍니다. 사용하는 이유 postList를 get하는 요청을 해서 목록 페이지에 보여준다고 해봅시다. 그러면 우리는 useEffect(() => {}, []) 안에 get 요청을 하는 코드를 작성해서 화면에 렌더링이 되면 get 요청을 보내서 응답을 받고 그걸 다시 useState로 해둔 state로 저장하게 될 것입니다. 그런데 postList가 바뀌지 않았는데 화면이 마운트될 때 마다 요청을 보내고 받고 요청을 보내고 받고 하는 것은 불필요한 요청같아 보입니다. React-Query에서는 이 서버로부터 받은 데..

🚀 Recoil ? → 간결한 코드로 전역 상태 관리가 가능한 라이브러리 Recoil은 페이스북이 2020년 5월에 소개한 React 전용 상태 관리 라이브러리입니다. 상태 관리 라이브러리에는 Redux도 있었는데요. Redux는 아래와 같은 문제점을 가지고 있습니다. React 전용 라이브러리가 아니다 복잡한 보일러 플레이트 (초기 세팅) 비동기 데이터에 대해서 추가 미들웨어 설치 필요 위와 같은 문제점을 개선하고자 Recoil이 등장하게 되었습니다. Recoil의 경우 context API와 달리 전역 상태에 대한 atom을 생성하고, 해당 atom을 구독하고 있는 구성요소만 리렌더링 됩니다. 따라서 불필요한 리렌더링도 방지할 수 있습니다. Atom Recoil에서 atom은 상태 관리의 최소 단위를..

🚀 일단 다시 Redux 라는 것을 쓰는 이유를 기억해보자 리덕스는 전역 상태 관리 라이브러리 중 하나입니다. 컴포넌트에서 컴포넌트로 props를 통해 전달을 한다고 하면 깊이가 깊어질 수록 불필요한 props 전달이 생길 수 있습니다. 이러한 구조는 유지보수 또는 props 추적을 힘들게 하는 Props drilling을 야기하게 됩니다. 위 그림은 기존의 props를 통한 상태 관리 방식입니다. 위 그림처럼 상태 변경이 한 번 일어났을 뿐인데 해당 데이터를 변경하기 위해 또 다른 상태 변경이 여러 번 일어나고 있습니다. 이러한 구조는 side effect를 야기할 수 있으며, 발생한 오류를 추척하기도 힘들어지게 됩니다. 대체 어디에서부터 에러가 났는지 계속 타고타고 올라가봐야 알 수 있을 것 입니다...

🚀 Prettier, Eslint, Husky ? Prettier와 Eslint는 일정한 규칙에 맞는 코드 퀄리티 및 스타일을 유지할 수 있게 검사해주는 도구이며, husky는 깃 커밋, 푸시 전에 알아서 Prettier와 Eslint 검사하는 명령어 자동으로 실행할 수 있게 하는 역할입니다. Prettier 깔끔한 코드와 협업을 위해선 일관성 있는 코드 스타일을 유지하는 것이 매우 중요합니다. Prettier는 일관적인 코드 스타일을 유지할 수 있게 도와주는 툴입니다. 그래서 여러 설정이 존재하지만 주로 줄 바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정해줍니다. 만약에 항상 singleQuote를 사용하겠다고 설정하면 doubleQuote를 사용해도 저장하는 순간 모두 singleQuote로 알아서..