프로젝트 (22) 썸네일형 리스트형 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.. next.js에서 Open Graph 적용하기 Open Graph란?- Open Graph (OG)는 Facebook에서 만든 메타데이터 프로토콜로, 웹페이지가 소셜 미디어 플랫폼에서 공유될 때 어떤 정보를 표시할지 제어할 수 있게 해준다.- 쉽게 말해서 위 이미지와 같이 소셜 미디어 플랫폼에 공유할 때 표시될 제목, 설명, 이미지 등을 오픈그래프를 통해 정의할 수 있다.문제정의- you-together는 친구와 youtube 영상을 함께 볼 수 있는 서비스로 별도 로그인 절차 없이 언제든지 간편하게 사용 가능하도록 만들었다.- 따라서, 링크를 통해 방에 접근하는 경우가 많을 수 밖에 없는데, 기존 SEO(Search Engine Optimizaion, 검색 엔진 최적화)를 위해 metadata를 추가 및 객관적 지표인 크롬 lighthouse에서 .. 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.. Hydration API를 사용한 데이터 프리패칭을 통한 초기 로딩 속도 개선 문제 정의- YouTogether는 누구나 손쉽게 친구와 Youtube 영상을 함께 보는 서비스로, 별도의 로그인 없이 사용이 가능하다.- 따라서, YouTogether 프로젝트의 메인 페이지는 전체 방 목록을 확인할 수 있는 사용자 진입점 역할을 한다.- 하지만 기존 메인 페이지에서 방 목록을 불러오는 API 호출과 응답에 대한 로딩이 길어 아래 영상과 같이 로딩 스피너가 꽤 오랜시간 표시되고 이를 수정하고 싶었다.새로고침을 눌렀을 때 모습해결 방안- 나는 초기 로딩 속도 개선을 위해 서버에서 데이터 프리패칭(prefetching) 하기로 했다. - 내가 고려했던 사항은 다음과 같다.1. 방 목록은 사용자에게 무한 스크롤을 이용해 콘텐츠를 보여주고 있기 때문에, 서버에서 방 목록의 첫 페이지의 데이터를.. You-Together 회고 팀프로젝트 You-Together 📼이번에 진행한 프로젝트는 사용자들이 함께 Youtube 영상을 보며 실시간으로 채팅을 하는 서비스를 제공한다. 예상보다 난이도가 있었고 중간중간 어려움이 많았던 프로젝트를 마치고 회고를 해보려고 한다.프로젝트 시작이번 프로젝트는 코드스쿼드 프론트엔드 동료의 권유로 시작했다. 그 친구는 프론트엔드의 개발 환경 설정을 완료한 상태에서 개인사정으로 프로젝트를 하차하게 되었고 나에게 프로젝트 합류를 권유하였다. 처음에는 프론트엔드 개발과 UI 디자인 등을 혼자 담당해야 하는 점에서 조금 부담을 느꼈지만, 이전에 진행했던 프로젝트 중에서 기간 등의 이유로 채팅 기능을 구현하지 못한 아쉬움을 가지고 있던 나에게 이번 프로젝트는 재미와 도전 두 가지의 목표를 이룰 수 있다는 점에.. 실시간 동기화를 위한 웹 소켓 사용: 영상 싱크 및 채팅 구현 - 이번 You-Together 프로젝트는 사용자들이 함께 Youtube 동영상의 동일한 부분을 실시간으로 시청하고 동시에 채팅을 할 수 있는 서비스이다.- 즉, 같은 방에 있는 사용자들은 실시간으로 서버에 저장된 동영상의 동일한 부분을 시청하고 동시에 채팅을 할 수 있다.- 이전 코드스쿼드 마지막 프로젝트에서 채팅 기능을 구현해보지 못하고 프로젝트가 종료가 되었고 이에 대한 아쉬움이 많이 남아있었기 때문에, 실시간 서비스는 내가 이 프로젝트를 선택한 가장 큰 이유였다.- 데이터의 실시간 동기화를 위해서 기존의 API 요청 방식인 HTTP를 사용하는 것이 아닌 웹소켓을 사용하여 프로젝트를 구현하였고, 내가 구현한 방법과 왜 웹소켓을 선택했는지에 대해서 설명해보겠다.웹 소켓이란?- 웹 소켓(WebSocke.. 이전 1 2 3 다음
