bkdragon's log

프로퍼티가 많은 객체를 useReducer를 통해 상태로 다룰 때 Action의 type과 payload를 적절하게 추론하는 타입을 만들어보려고 한다. 목표는 이러하다 예를 들어 아래와 같은 타입이 있다.type User = { email: string; password: string; name: string; phone: string; age : number; deleted: boolean;};이때 Action 객체의 type은 "update_email", "update_password" .... 가 되고 payload가 그거에 맞게 string, string, number, boolean 이 되게 할 것이다. 추후에 상태 업데이트를 위해 dipatch 함수를 사용할..

화면 하단에서 올라오는 BottomSheet 를 React로 구현해보려고 한다. 데스크탑 해상도에서 Modal 창을 사용하는 화면을 대체할 수 있을 것 같다. 주 기능은 아래와 같다.특정 동작(버튼 클릭 등) 이후 화면 아래에서 올라온다.드래그를 통해 화면 아래로 내릴 수 있다.style은 tailwindcss를 사용했다.주 기능을 토대로 Props의 interface 부터 만들어보자.interface IProps { isOpen: boolean; onClose: () => void; children: React.ReactNode;}보여져야 하는 상황인지 알 수 있는 상태와 다시 안보이게 할 수 있는 함수를 받는다. UI와 기본 기능만 재활용할 것이기 때문에 내부 요소들은 children..

리액트의 기본 개념들을 하나씩 정리해보려고 한다. 어렴풋이 혹은 잘 몰랐던 부분들이 명확해졌으면 좋곘다. 렌더링React가 화면을 그리기 위해서는 렌더링 과정이 필요하다. 이는 흔히 브라우저 렌더링과 같다고 생각할 수 있지만 아니다. React의 렌더링과 브라우저 렌더링은 다르다. React의 렌더링은 React가 컴포넌트(함수형)를 호출하는 것을 말한다. 좀 더 정확히는 컴포넌트를 호출하여 반환된 React Element로 VDOM을 재조정하는 것이다. 즉, VDOM 에서 이뤄지는 작업을 말한다.React가 렌더링을 하려면 트리거가 필요하다. 트리거는 두가지 경우가 있는데 초기 렌더링과 컴포넌트의 state(+ props) 혹은 파생된 상태가 변경되었을 경우이다.초기 렌더링에 경우 React는 루트 컴..

내 블로그의 유입 통계를 보면 항상 상위권은 React Query에 관한 글이다. 물론 내 블로그 유입 수가 많진 않아서 판단의 근거가 될 순 없지만 내 블로그에도 들어올 정도니 React Query에 대한 관심이 높아진 상황이라고 볼 수 있을 것 같다. 지금은 버전업이 좀 많이 되어서 큰 참고가 안될 것도 같다...아무튼 그런 의미에서 새로운 React Query 글이다. React Query 의 핵심을 결국 데이터 캐싱이라고 보는데 이 캐싱된 데이터를 식별하기 위해 쿼리키가 사용이 되는데 이걸 관리하는게 여간 귀찮은 일이 아니다. 그래서 라이브러리를 통해 관리하는 방법을 소개해보려고 한다.React Query (TanStack Query) 공식 문서에도 소개 되어있는 @lukemorales/quer..

마우스 이벤트를 활용하면 드래그를 통해 html 요소의 크기를 조절할 수 있습니다. 이걸 활용해서 그리드 내부의 요소의 크기를 조정해보겠습니다.마우스 이벤트 종류click설명: 해당 요소를 클릭했을 때(버튼을 눌렀다가 뗐을 때) 발생합니다.사용 예시: 버튼을 클릭하여 폼을 제출하거나 링크를 열 때 사용됩니다.mousedown설명: 해당 요소에서 마우스 버튼을 눌렀을 때 발생합니다.사용 예시: 드래그 앤 드롭 기능을 구현할 때, 요소를 선택하는 초기 동작으로 사용됩니다.mouseup설명: 해당 요소에서 눌렀던 마우스 버튼을 뗐을 때 발생합니다.사용 예시: 드래그 앤 드롭 기능에서 요소의 위치를 결정하거나, mousedown과 함께 사용하여 클릭 이벤트를 처리할 수 있습니다.dblclick설명: 해당 요소에..

버그는 개발자의 실수로 인해 발생하는 것이고, 에러는 사용자의 잘못된 사용 방식에 의해 발생하는 것입니다. 따라서, 버그가 없도록 개발하고 에러에 대한 예외 처리를 미리 준비하는 것이 좋은 방식입니다.이제부터 에러에 대한 예외 처리를 '에러 핸들링'이라고 언급하겠습니다.웹 애플리케이션에서 에러 핸들링은 크게 두 가지 방법이 있습니다. 하나는 클라이언트 사이드에서의 처리, 다른 하나는 서버 사이드에서의 처리입니다. 좀 더 간단히 말하면, 프론트엔드에서의 처리와 백엔드에서의 처리입니다. 각각에 대해 제 생각과 결론을 소개해보겠습니다.클라이언트 사이드 (프론트엔드)클라이언트 사이드에서는 사용자의 잘못된 행동을 막는 것이 중요합니다. 예를 들어, 접근할 수 없는 페이지로의 접근 시도를 막는 것이 있습니다. 이는..

오랜만의 글이다! 최근에 취업에 성공해 바쁘게 살고 정신없이 살다보니 소홀해진 것 같다. 공부는 꾸준하게 하고 있다. 오늘은 변신가능한 폼을 만들어서 소개해보려고 한다. 페이지를 사용하다 보면 다양한 형태의 폼을 만날 수 있다. 처음 페이지를 들어가서 거의 바로 회원가입 폼과 로그인 폼을 만날 텐데 이 둘만 하더라도 약간의 형태가 바뀐다. 프론트엔드 개발자로서 이런 것들을 한번에 처리하고 싶은 욕구가 생겨서 만들어보게 되었다! 물론! 로그인 폼, 회원가입 폼, 글 작성 폼 등 책임을 세분화하여 하는 것이 좋다. (코드를 이해하는 면에서도 그렇다 내가 짜서 잘 모르겠지만 어쪄면 변신 폼은 약간 어렵고 난해한 코드일 수 있다.) 포인트는 다음과 같다. 1. context api 없는 합성 컴포넌트 2. 비제..

팀프로젝트에서 atomic design pattern을 적용해 진행하고 있다. CSS 프레임워크를 사용하여 atomic design pattern을 적용한 경험을 공유하려고 한다. css 프레임워크는 Chakra ui를 사용했다. https://chakra-ui.com/ CRA로 앱을 설치할 때 Charka ui도 함께 설치할 수 있다. npx create-react-app my-app --template @chakra-ui/typescript atomic pattern atomic pattern은 화학적 관점에서 영감을 얻은 디자인 시스템이다. 출처 : https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole 각 단계를 간략하게 설명하면..

React 18 부터 적용되는 렌더링 방식이다. 동시성 렌더링을 통해 React는 렌더링 자체에 개입하여 이를 중단하거나 재개하거나 폐기할 수 있다. React 18 이전에는 synchronous rendering (동기적 렌더링) 방식이였기 때문에 한번 렌더링 작업이 시작되면 중단할 수 없었고 이로 인해 우선순위가 높은 (빠른 응답이 필요한) 작업의 처리가 늦어지는 문제가 있었다. 동시성은 여러 작업을 작은 단위로 나눈 뒤, 우선순위를 정하고 그에 따라 작업을 번갈아 수행하는 방법이다. 실제로 동시에 이루어지는 것은 아니다. 다만 작업 간의 전환이 매우 빠르게 이루어지며 동시에 수행되는 것처럼 보인다. React의 git discussion에서 좋은 이미지를 찾았다. https://github.com/..

React 18의 새로운 아키텍쳐 기존 SSR의 동작방식 페이지의 모든 데이터를 서버에서 가져온다. (server) 서버에서 HTML 문서를 사전 렌더링 한다. (server) 사전 렌더링된 HTML 문서와 JavaScript, CSS가 클라이언트로 전송된다. (client) 브라우저 화면에 사용자 상호작용이 추가된다. hydrate (client) 기존 SSR의 문제 SSR의 동작은 순차적이고 차단적이다. (blocking) 모든 데이터를 가져온 후에만 HTML이 렌더링되고 모든 JavaScript가 다운로드 되어야 hydrate가 시작된다. 위와 같은 마크업을 가진 페이지가 있다. Comments의 데이터를 가져오는데 많은 시간이 든다고 하면 Sidebar나 Post가 먼저 준비되더라도 Comment..