doeunn.log

DOM ✔️ DOM(Document Object Model)은 문서 객체 모델이라는 뜻, HTML, XML 문서의 프로그래밍 interface ✔️ 웹 페이지는 일종의 문서(document)라고도 할 수 있는데 ✔️ 이 문서는 웹 브라우저를 통해 그 내용이 해석 → 웹 브라우저 화면에 표시 ✔️ 이때 DOM을 통해 동일한 문서를 표현, 저장, 조작할 수 있게 되는 것 → DOM은 문서로 만들어져있는 웹 사이트를 브라우저가 이해할 수 있는 구조를 제공 렌더링(Rendering) ✔️ Render는 애플리케이션에서 요소의 속성(props)이 새로운 속성으로 바뀌거나 컴포넌트의 상태가 변경될 때 사용자 화면의 해당 정보만을 갱신하는 것을 의미 ✔️ 렌더링 방법 덕분에 웹 페이지를 전부 다 다시 로드하지 않아도..

🚀 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의 유효 기간은 짧고, 자주 재발급 하도..

🚀 React-Query의 useInfiniteQuery로 무한 스크롤 기능 구현 이번 글에서는 무한 스크롤 기능을 구현해 보려고 합니다. 무한 스크롤은 페이지네이션을 위한 api를 통해 page와 관련된 파라미터를 연속적으로 넘기면서 계속 데이터를 받아오고 이어서 화면에 보여주는 로직으로 작동되게 됩니다. 우선 React-Query 공식 문서에서 useInfiniteQuery 부분을 살펴보면서 정리해봅시다. Infinite Queries | TanStack Query Docs Rendering lists that can additively "load more" data onto an existing set of data or "infinite scroll" is also a very common UI ..

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