프로젝트/dowith (4) 썸네일형 리스트형 ResizeObserver 활용하기 목표 및 문제정의- do-with 프로젝트에서 shadcn UI 라이브러리를 사용해서 "가입 대기 스페이스"를 보여주기 위해 popover 컴포넌트를 활용했다.- 아래는 반응형 디자인에서 각 화면 크기에서 "file" 이미지를 클릭했을 때 "가입 대기 스페이스" UI가 나타나는 모습이다. 모든 화면 크기에서 "참여중인 스페이스"의 너비와 동일한 너비가 적용되도록 디자인했다.- 하지만 문제는 Popove 컴포넌트가 React portal을 사용해 렌더링되면서 발생했다. Portal은 DOM 트리의 계층을 무시하고 컴포넌트를 body의 직속 자식 요소로 렌더링하기 때문에, Popover가 "참여중인 스페이스"와 같은 DOM 트리 안에 위치하지 않게 되었다.- 이로 인해 반응형 디자인에서 "참여중인 스페이스.. Zustand를 활용한 모달 상태 관리 목표- 모달은 프로젝트에서 다양한 화면과 상황에서 자주 사용되는 UI 요소인데, 프로젝트 규모가 커질수록 여러 곳에서 공통적으로 모달을 사용하게 되고, 각각의 모달 상태를 관리하는 코드는 점점 복잡해질 수 있다.- 일반적으로 모든 모달마다 useState를 선언하고 상태를 관리해야 하기 때문에, 상태 관리 로직이 중복되고 반복되는 문제가 발생한다.import { useState } from 'react';import Modal from './Modal'; // 공통 모달 컴포넌트const Example = () => { const [isFirstModalOpen, setIsFirstModalOpen] = useState(false); const [isSecondModalOpen, setIsSecond.. Axios interceptors를 활용하여 액세스 & 리프레시 토큰 자동 갱신 구현하기 - do-with 프로젝트에서 로그인 및 사용자 인증을 위해 정리한 내용은 다음과 같다. 1. 사용자는 카카오와 구글 OAuth를 통해 로그인을 할 수 있고, 서버에서 발급한 access token과 refresh token을 받는다.2. API 요청 header에는 access token을 담아보내고 서버에서는 API 요청 header에 있는 access token을 해독하여 사용자를 인증하고 응답을 보내준다.3. access token은 보안을 위해서 유효기간이 존재하고, access token이 만료되는 경우에는 refresh token을 사용하여 token을 갱신할 수 있다.4. refresh token 또한 유효기간이 지난 경우에는 사용자는 다시 로그인을 한다. - 이전 프로젝트에서는 acces.. twin.macro 도입 및 Tailwind CSS + styled-components - dowith 프로젝트를 시작하면서 프론트엔드 동료와 스타일링을 위한 도구로 Tailwind CSS를 선택했다.- Tailwind CSS를 선택하게 된 가장 큰 이유는 "편리함"이었다.- Tailwind CSS는 다양한 스타일 속성을 작은 유틸리티 클래스 형태로 미리 정의해 제공하기 때문에 유틸리티 클래스들을 조합하여 원하는 디자인을 즉시 적용할 수 있기 때문에 편리하다.- 하지만, Tailwind CSS를 사용하면서도 불편한 점이 있었고 회의 끝에 새로운 방식을 도입하였고 그 내용에 대해 설명해보겠다.HTML 태그만 보고 이 태그가 어떤 역할을 하는 요소인지 직관적으로 파악하기 어렵다는 점입니문제 정의- Tailwind CSS를 사용하면서 우리 팀이 느낀 불편한 점은 바로 "가독성"이었다.- Tai.. 이전 1 다음
