doeunn.log

🚀 styled-components와 emotion, 비슷해보이는데.. 뭐가 다를까 저는 css-in-js를 styled-components로 시작하게 되어서 줄곧 styled-components만 사용했었는데요. 그런데 emotion을 사용하는 회사도 많아서 한번 사용해 보았는데 사용법이 거의 동일해서 대체 어떤 차이가 있는지 궁금해 정리하게 되었습니다 :) 제공하는 기능 라이브러리 props 전달 미디어 쿼리 전역 스타일링 중첩 선택자 Server Side Rendering 테마 스타일링 스타일 컴포넌트 상속 styled- components ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ emotion ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ 사용 트랜드 @emotion/core vs @emotion/react vs styled-comp..

🚀 Access Token과 Refresh Token ? Access Token는 사용자를 인증하는 토큰으로 유효 기간이 정해져 있어, 해당 유효기간이 끝나게 되면 인증 기간이 만료되었다는 뜻으로 더이상 토큰을 사용할 수 없습니다. 가끔 은행 어플을 사용하다보면 세션이 만료되었다면서 다시 로그인을 하라는 모달창이 뜨는 것을 본 적 있으실 겁니다. 유효기간을 길게 하려면 충분히 길게 할 수는 있지만, 해당 토큰이 탈취되었을 경우에는 얼마든지 악용할 수 있으므로 적당한 유효기간을 정해두는 것입니다. 하지만 보안상의 이유로 유효 기간을 짧게 해두면 당연히 사용자 입장에서는 불편할 수 밖에 없습니다. 따라서 이때 Refresh Token이라는 것으로 Access Token의 유효 기간은 짧고, 자주 재발급 하도..

🚀 낙관적 업데이트 ? 리액트 쿼리는 get 요청은 useQuery를 통해 했었고, 이외 post, update, delete 요청은 useMutation으로 처리했었습니다. 그런데 이전에 구현했던 react-query 글에서 post 요청을 하고 get 요청 했었던 쿼리를 inValid 시키고 했었습니다. 즉, 다시말해서, post 요청을 보내고 다시 get 요청을 보내고 받아서 화면에 보여줘야 한다는 점이었습니다. 사용자 입장에서 생각해보면, 내가 post 요청 보내는 버튼을 눌렀는데 안에서는 post 요청 보내고 ~ get 요청 했었던 거 inValid 하게 해서 다시 요청 보내게끔 하고 ~ 다시 받아오고 ~ 화면에 뿌리고 ~ 하는 작업이 이뤄져야 하고 이걸 사용자가 다 기다려야 한다는 점입니다. ..

🚀 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에서는 이 서버로부터 받은 데..