doeunn.log

🚀 TDD란? TDD란 Test Driven Development의 약자로, '테스트 주도 개발'이라고 합니다. 반복 테스트를 이용한 소프트웨어 방법론으로, 엔지니어 켄트 벡(Kent Beck)에 의해 고안되었습니다. 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현합니다. 짧은 개발 주기의 반복에 의존하는 개발 프로세스이며 애자일 방법론 중 하나의 eXtream Programming(XP)의 'Test-First' 개념에 기반을 두고 있습니다. eXtream Programming(XP)란 ? 미래에 대한 예측을 최대한 하지 않고, 지속적으로 프로토타입을 완성하는 애자일 방법론 중 하나이다. 이 방법으로는 추가 요구사항이 생기더라도, 실시간으로 반영할 수 있다. +..

Jotai ? 간단히 요약해보자면, 추가 렌더링이 없고, 리액트에 속한 상태 그리고 서스펜스와 병렬 기능들의 장점을 모두 취할 수 있고, 심플한 react.useState 대체재부터 복잡한 요구사항을 가진 큰 스케일의 애플리케이션까지 커버 가능한 Jotai ! 주요 기능 Minimal API TypeScript oriented Tiny bundle size (3kb) Many extra utils and official integrations Supports Next.js and Reat Native 컨셉 리렌더링 이슈를 기존 useContext + useState 조합으로 해결하기엔 다음의 문제가 존재하기 때문에, Jotai는 리렌더링 이슈를 해결하기 위해 만들어졌습니다. Provider hell : ..

🚀 Hook에 대해 정확히 이해해보자 ..😂 React를 공부하고 있지만, 정확하게 "Hook에 대해 설명해봐" 하면 어... 하게 되어서 이번 기회에 한번 제대로 정리해보려고 합니다 :) 제가 커스텀 훅을 제대로 만들지 못하는 이유가 Hook에 대해 정확하게 이해하고 있지 못해서라고 생각이 들어서이기도 합니다.. Hook이 등장하게 된 배경 Hook은 리액트 16.8 버전 이후로 추가된 기능이며, Hook이 등장하기 전에는 상태를 관리하기 위해 class를 작성했었습니다. Hook이 등장하기 전 리액트에는 여러 문제들이 존재했습니다. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려웠다. Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다. 생명주기 컴포넌트로 인한 복잡한 컴..

🚀 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 하게 해서 다시 요청 보내게끔 하고 ~ 다시 받아오고 ~ 화면에 뿌리고 ~ 하는 작업이 이뤄져야 하고 이걸 사용자가 다 기다려야 한다는 점입니다. ..