분류 전체보기

React Query(Tanstack Query) React Query란? React 애플리케이션에서 서버 상태를 가져오고 캐싱하며 동기화하고 업데이트하는 작업을 도와주는 라이브러리이다. 내가 React Query를 선택한 이유 Client 데이터와 Server 데이터 간의 분리가 된다. api 요청에 대한 로딩, 에러, 데이터(response) 관리가 쉽다. 네트워크 요청 관련 다양한 기능, 옵션들이 있다. (refetchOnWindowFocus, 브라우저에 포커스가 들어온 경우) 장점 중 하나로 캐싱도 있지만 나는 변경되는 데이터를 바로 받아야 했기 때문에 캐싱은 사용하지 않았다. 지저분한걸?! 그렇게 유용하게 잘 사용했으나.. 컴포넌트, 페이지 안에 api 관련 로직들이 같이 있다 보니 코드가 길어..

useStateconst [state, setState] = useState(initialState)useState는 배열을 반환하고 비구조화 할당을 통해 state, setState를 추출하여 사용한다. 그렇다면 useState는 어디서 오는 것일까? 함수형 컴포넌트는 렌더링이 발생하면 함수 자체가 다시 호출된다. 그렇다면 어떻게 함수가 다시 호출되었을 때 이전의 상태값을 가져올 수 있는 것인가?바로! useState는 closure로 구현되어 있기 때문에 이전의 상태값을 유지할 수 있다!그렇다면 closure란 무엇인가? 이에 대해 먼저 확인해 보자! closure란?mdn에 따르면 함수와 그 주변 상태(lexical environment, 함수가 정의될 때 주변의 스코프와 변수에 대한 정보를 포함하..

시간이 정말 빠르다 이제 2022년에서 2023년이 익숙해진 거 같은데 벌써 2024년이 되었다. 일 년 일 년 나이가 들어가는 게 약간 두렵기도 하다. 나이가 들면 더 무언가에 대해서 책임감을 지고 더 잘해야 할 거 같은 느낌이 있다. 한 해를 돌아보면 많은 일들이 있었고 조금은 성장했다고 생각한다! 2023년 무엇을 했는가?! 독서 개발자라고 해서 어찌 개발만 하고 개발 관련 책만 읽겠는가! 회사를 그만두고 책은 하루에 조금씩 매일 읽었다 처음에는 집중하는 게 힘들어 한 장 넘기기도 힘들었는데 인간은 적응의 동물이다. 계속 읽으니 점점 읽는 속도도 빨라지고 책을 읽었다는 사실이 보람찼다 ㅎㅎ 예전에는 책을 읽어도 따로 독후감은 작성하지 않았는데 책을 읽고 다 읽었다~하고 끝내면 나중에 그 책이 무슨 ..

recoil, typescript, react 환경에서 모달을 전역 상태에서 관리하는 방법을 알아보자! 문제점. 너무 많아진 모달 관련 상태관리값들많은 모달들이 사용되어모달을 열기 위한 상태관리값들(useState)과 그에 대한 함수들(열고 닫는 함수등)이 불필요하게 많아지고 있었다!마치 아래와 같은 느낌이었다!const App = () => { const [isOpen1, setOpen1] = useState(false) const [isOpen2, setOpen2] = useState(false) const [isOpen3, setOpen3] = useState(false) const [isOpen4, setOpen4] = useState(false) const handleToggle1 = ..

웹 프레임워크에서 주로 쓰이는 react와 vue를 비교해 보겠다그중에서도 데이터 바인딩과 데이터 흐름 방식에 대해 자세히 알아보자!UI 라이브러리와 프레임워크 각각 공식문서에 따르면 react는 라이브러리이고 vue는 프레임워크로 소개되고 있다.react는 라이브러리이기 때문에 리액트만으로 전역상태관리, 라우팅 등을 지원하지 않는다. 사용자가 별도의 라이브러리를 추가하여 사용해야 한다. vue는 프레임워크로 주어진 문법에 따라 사용해야 한다.  코드 형태react는 jsx를 사용하고 자바스크립트를 통해 UI로직과 DOM을 구현한다.vue는 에는 html, {{ childData }}   데이터 바인딩데이터 바인딩이란?화면상에 보이는 데이터와 브라우저 메모리에 있는 데이터를 서..

사용자가 회원가입이나 신청 프로세스 도중 페이지를 벗어나거나 새로고침할 경우 기존에 입력되는 모든 값이 초기화된다! 이를 의도한 사용자도 있겠지만, 실수로 눌려졌다면 좋은 사용자 경험을 줄 수 없을 것이다. beforeunload 사용자가 페이지를 떠나거나 닫을 때 발생하는 이벤트이다. 사용자가 페이지를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜 줄 때 사용한다. 새로고침, 뒤로 가기, 브라우저 닫기 등의 경우에 아래와 같이 실행된다! window.addEventListener("beforeunload", (event) => { event.preventDefault(); }); 안내 메시지를 변경할 수 있나 했는데 일반적인 브라우저에서는 beforeunload 이벤트를 취소할 때 보이는 ..

엄청 간단하다. 그럼 바로 시작! 프로젝트 생성 프로젝트에 대한 세팅이 끝났다면 이 과정은 넘어간다 mkdir test cd test yarn init -y // or npm init -y package.json에 필요한 설정들을 해준다. { "name": "@solb/bottom-sheet", "version": "1.0.0", "description": "This is a bottomsheet created with pure JavaScript using Web Components.", "repository": { "type": "git", "url": "git+https://github.com/y-solb/bottom-sheet" }, "keywords": [ "javascript", "typesc..

회사에서 유용하게 사용하던 bottom-sheet가 있어 이를 다른 사람들과도 공유하고 싶어 라이브러리로 만들게 되었다! 또한 npm에 올려 다른 사람들에게 소스 리뷰, 버그 등을 공유받고 싶은 마음도 있었다. 글로벌하게 사용되었으면 해서 영어로 문서화해 두었다..! + 문제점이나 개선 사항은 issue로 남겨주시면 수정해 보겠습니다 💪 bottom-sheet 관련 소스는 기존 포스팅에서 수정과 함께 typescript를 적용시켰다! @solb/bottom-sheet 순수 자바스크립트로 만든 bottom-sheet로, 모바일 웹이나 앱에서는 bottom-sheet 형태로 나타나고 웹에서는 모달 형태로 나타난다. 자세한 Demo는 여기서 확인할 수 있다 (👉 Demo) 이 컴포넌트는 web componen..

입점사 프로젝트를 진행하며 페이지네이션과 함께 많이 쓰인 것은 필터일 것이다! 각 페이지에서 데이터를 조회하기 위해 필터와 페이지네이션이 사용되었다. 각각의 페이지마다 필터 컴포넌트로 만들면서 그에 대한 로직이 반복되어 이를 개선하고 뒤로가기 또는 새로고침 시 필터값을 유지하는 방법을 알아보겠다! 필터 컴포넌트와 필터 관련 hook 구현하기 필터 컴포넌트 초기 필터값들과 검색, 초기화 시 동작되는 함수를 전달 받는다. 사용자가 입력한 필터값을 내부적으로 관리한다. src/components/filter/deliveryTemplateFilter.tsx interface DeliveryTemplateFilterProps { initialFilterValues: FormState onSubmit: (filte..

session 기반 인증 클라이언트가 로그인을 하면 서버는 사용자 정보를 확인 후 저장소에 사용자 정보와 세션 ID를 매핑해 저장한다. 세션 ID를 쿠키로 클라이언트에게 전달해 준다. 클라이언트는 쿠키에 저장된 세션 ID를 활용하여 서버에 요청하면 된다. 서버는 일치하는 세션 ID를 검증하고 획득한 유저정보를 통해 응답값을 준다. 장점 사용자의 인증 정보를 서버에서 저장하고 클라이언트는 세션 ID만 저장하므로 보안에 좋다. 강제 로그아웃 시키는 것이 간단하다. 저장소에 세션 ID를 만료시키거나 삭제하면 되기 때문이다. 단점 서버에서 세션 정보를 관리한다는 점이다! 요즘엔 브라우저를 종료하더라도 로그인을 유지하는 추세이기 때문에 로그인했던 사용자를 모두 저장소에 저장하고 있고 이 사용자가 늘어날수록 과부하..