우든이 블로그

지난 포스팅에 이어 big-calendar 라이브러리를 사용해서 조금 더 다양한 기능을 구현해 보았다. 일정 드래그 앤 드롭 / 공휴일 정보 제공 / 스크롤에 따른 이동 등 구현한 기능에 대해 정리해보려고 한다. 나의 캘린더 컴포넌트는 아래와 같이 설정하였다. 이전에 구현했던 캘린더 기능에 몇 가지 기능을 추가하였다.  event.isDraggable} /** 4개의 슬롯으로 간격 */ timeslots={4} /** 15분 간격 */ step={15} onEventDrop={handleMoveEvent} onEventResize={handleResizeEvent} onDoubleClickEv..

오늘은 big-calnear 라이브러리에 대해 정리해보려고 한다. 최근 참여하고 있는 프로젝트에서 구글 캘린더와 같이 일정을 관리하는 기능을 구현해야하는 작업이 생겼다.원래에는 캘린더를 직접 구현해보려고 시도 중이었다. 그러나 개발 일정과 작업량을 고려했을 때, 캘린더에 너무 많은 시간을 할애할 것 같다는 생각이 들었다. 그래서 좀 더 효율적으로 작업할 수 있는 방법을 찾아보기로 했다. 기존의 라이브러리를 활용하면 시간을 절약하면서도 필요한 기능을 효과적으로 구현할 수 있을 것이라고 생각했다.  :D 라이브러리 선정이유 아래 세가지 라이브러리 중에 react-big-calendar를 선택한 가장 큰 이유는 react-big-calendar가 fullcalendar에 비해 UI 커스터마이징의 자유도가 높아..

최근에 진행했던 프로젝트에서 React Router와 Tanstack Query를 사용하여 애플리케이션 라우터를 설정했다. 오늘은 이를 적용하며 공부한 내용 중 React Router를 위주로 정리해보려고 한다. React Router v6.4에는 아래와 같은 라우터들이 추가되었다. 아래 라우터와 함께 action / errorElement / lazy / loader 등 data API도 함께 제공되고 있다. (공식 문서에서는 새롭게 추가된 라우터 중 하나로 업데이트 하는 것을 권장하고 있다. 추가적으로 data API는 현재 React Native에서는 지원하고 있지 않다.) createBrowserRouter - DOM History API를 사용하여 URL을 업데이트하고 히스토리 스택을 관리한다...

:D Route Matching tanstack Router는 Route Tree에 정의된 순서와 상관없이 아래와 같은 순서로 라우트 매칭을 정렬한다. Index RouteStatic Route (most specific to least specific)Dynamic Route (longest to shortest)Splat/Wildcard Routes  :D Outlets 중첩 라우트에서 컨텐츠를 어디에 렌더링 할지 알려주기 위한 방법이다. 즉, 아웃렛 컴포넌트는 매칭될 수 있는 자식 라우트를 렌더링 하는 데 사용한다. 라우트 트리 내 어디서든 렌더링 될 수 있으며, 매칭되는 자식 라우트가 없는 경우 null을 렌더링한다.import { createRootRoute } from '@tanstack/re..

오늘 포스팅에서는 Tanstack Router 설치 및 기본 설정, Router와 NotFound Error처리에 대해 정리해보려고 한다.  :D 설치 및 기본 설정 아래 명령어를 통해 설치할 수 있으며, 요구사항은 다음과 같다.React v18.x.xReactDOM v18.x.xTypescript v5.x.x (OPTIONAL)npm install @tanstack/react-router 만약, Vite나 다른 번들러를 사용한다면 아래 명령어를 이용해 설치한다.npm install --save-dev @tanstack/router-plugin @tanstack/router-devtools 설치 후에는 vite.config.ts 파일에 아래 내용을 추가한다. (해당 프로젝트에서도 Vite를 사용하고 있다..

:D Tanstack Router Modern and scalable routing for React applicationsA fully type-safe React router with built-in data fetching,stale-while revalidate caching and first-class search-param APIs.  Tanstack Router는 Typescript의 타입 시스템을 활용하여 라우팅을 관리하며 타입 안전성을 보장하는 것을 목표로 설계되었다. 즉, 개발자가 런타임 오류를 사전에 방지하고 코드를 더욱 안정적으로 유지할 수 있게 한다.  :D Code Splitting(코드 분할) Tanstack Router는 Code Splitting을 통해 애플리케이션 성능 ..

오늘은 브라우저 상에서 데이터를 저장할 수 있는 webStorage에 대해 공부해보려고 합니다. 보통은 서버단에 데이터를 저장하여 사용하지만 크게 중요하지 않은 데이터는 브라우저상에 저장하여 사용하기도 하는데요! 데이터를 추가/수정한 후에 페이지 새로고침 하거나 새로운 페이지를 열었을 때 기존의 데이터를 불러올 때에도 사용할 때에도 유용하게 사용할 수 있는 방법입니다. 먼저, webStorage의 종류인 localStorage와 sessionStorage에 대해 알아보고 코드에 적용해보도록 하겠습니다. localStoarage와 sessionStorage 란, localStorage와 sessionStorage 두가지 방법 모두 애플리케이션 전역에 접근 가능하다는 공통점이 있습니다. 사용 시 주의해야 할..

2020/12/08 - [React] - [React] 14. 리덕스로 TodoList구현하기 01 2020/12/08 - [React] - [React] 15. 리덕스로 TodoList구현하기 02 TodoList 수정하기 기능 구현 저는 input에 readOnly속성과 onBlur 함수를 사용하여 TodoList의 수정 기능을 구현하였습니다.! 연필 모양의 버튼을 클릭하면 텍스트가 수정될 수 있도록 readOnly의 값을 false로 변경하고, 의 내용이 변경될 수 있게 합니다. onBlur 함수를 사용하여 의 포커스가 사라지면 변경된 텍스트 값을 dispatch(todoUpdate(id, updateText))를 사용하여 스토어에 반영해주었습니다. import React, { useCallback..

2020/12/08 - [React] - [React] 14. 리덕스로 TodoList구현하기 01 리액트 리덕스를 적용한 투두 리스트 만들기02 지난 시간에 만든 스토어를 적용하여 아래와 같은 투두 리스트를 만들어보겠습니다! 컴포넌트 생성 저는 src/Components 아래에 다음과 같은 컴포넌트들을 생성하여 줄 거예요! ㅇTodoTemplate : TodoList의 큰 틀을 담당할 컴포넌트 ㅇTodoInput : 새로운 할 일(Todo)을 추가할 수 있는 컴포넌트 ㅇTodoItem : 체크박스, 투두 텍스트, 수정/삭제 버튼을 보여줄 컴포넌트 ㅇTodoList : 할 일들을 모아 리스트로 보여줄 컴포넌트 TodoTemplate 먼저, 투두 리스트의 전체적인 틀을 보여 줄 수 있는 TodoTempat..

2020/11/30 - [React] - [React] 12. 리덕스(Redux) 개념 정리하기 2020/12/04 - [React] - [React] 13. 리덕스(Redux) 사용해서 카운터 만들기 이번에는 앞에서 공부한 리덕스를 사용하여 투두 리스트를 만들어 볼 예정입니다. 리액트 리덕스를 적용한 투두 리스트 만들기 01 프로젝트 생성 및 라이브러리 설치 새로운 프로젝트를 먼저 생성하여 줍니다. npx create-react-app todolist-app 생성된 프로젝트에 사용할 라이브러리들(redux, styled-component, react-icons등)을 설치하여 줍니다. 저는 투두 리스트를 꾸며주기 위해 styled-component를 사용하였습니다. npm install redux npm..