공부하자

서론모달(Modal)은 사용자에게 중요한 정보를 표시하거나 작업을 완료하도록 유도하는 UI 요소로 널리 사용된다.하지만 모달의 상태 관리는 생각보다 복잡할 수 있다. 보통 모달의 열림/닫힘 상태를 관리하기 위해 보통 boolean 값을 사용하는 방식을 많이 채택한다. 최근에는 URL을 기반으로 모달 상태를 관리하는 방법이 떠오르고 있다. 이번 글에서는 Next.js의 App Router에서 제공하는 Parallel Routes 기능을 활용하여 모달 상태 관리를 URL 기반으로 리팩토링한 경험을 공유하려 한다. 단순히 boolean 값으로 관리하던 모달 상태를 왜 URL 기반으로 바꾸었는지, 그리고 이러한 접근 방식이 어떤 이점을 가져다주는지 함께 살펴보자.Parallel Routes란?Next.js의 A..

문제 상황Dialog 컴포넌트와 버튼을 합쳐서 드롭다운 컴포넌트를 만들고 있었다.내가 만든 컴포넌트의 요구사항은 다음과 같다.버튼을 클릭하면 Dialog가 열림Dialog는 화면 여유 공간에 따라 버튼의 위나 아래에 위치스크롤/리사이즈 시에도 적절한 위치 유지핵심 구현을 위해 위치 계산이 필요했고 위치 계산에는 여러가지 방법이 있다.처음에는 그냥 순수하게 useEffect만 사용해 구현했다.useEffect(() => { if (isOpen && anchorEl && dialogRef.current) { const updatePosition = () => { // 1. 버튼의 위치 정보 가져오기 const buttonRect = anchorEl.getBoundingClientRe..

유어슈에서 만든 디자인 시스템인 handy를 기반으로 새 프로젝트에 쓰이는 컴포넌트를 만들기로 했다.그러다 handy right icon에 아이콘이 겹쳐 나타나는 문제가 생겼고 이를 해결하기 위한 과정과 삽질기(ㅠㅠ)를 공유하고자 한다. 문제 상황현재 handy라는 디자인 시스템을 사용하고 있는데 여기에서 BoxButton을 사용중이다.BoxButton 스토리북은 밑에 링크에서 확인 가능하다.http://handy-react-storybook.s3-website.ap-northeast-2.amazonaws.com/2.1.0/?path=/docs/components-boxbutton--docs이렇게 BoxButton에는 아이콘을 넣어서 사용할 수 있는데제목 그대로이런식으로 아이콘이 겹쳐서 나타나는 문제이다..

문제 상황프로젝트를 진행하다 보니 북마크 기능에서 불필요한 API 호출이 발생하는 것을 발견했다. 정보 딱 하나만 조회하면 되는데 전체 정보 조회 API가 하나만 존재하는 상황이었다. 그리고 각 페이지마다 중복된 북마크 로직이 존재하는 구조적으로 비효율적인 부분을 발견했다! 나는 단순한 북마크 상태 변경에도 전체 상세 정보를 다시 불러오는 것이 비효율적이라고 판단했고, 이를 개선하기 위해 백엔드 팀과 적극적으로 소통하며 해결책을 찾아갔다. (= 설득해서 단일 조회 API를 만들었다 ㅎㅎ) 기존 코드의 문제점 1처음에는 북마크 상태 변경 시 전체 상세 정보를 조회하는 API만 있었다. 백엔드 팀의 초기 설계는 단순했지만, 실제 사용에서는 비효율적인 부분이 있었다.이 구조의 문제점은 API 비효율, 즉 불필..

Bookmark 프로젝트에서 채팅 기능을 구현하게 되었다.이런 느낌의 댕근 채팅 스타일... 을 구현해야 했당React와 WebSocket을 사용해서 실시간 채팅을 구현해봤고 그 과정에서 얻은 경험과 삽질 일대기를 ㅜㅜ 공유하려고 한다. 1. 서버와의 사전 논의사항먼저 알아둘 점! 채팅 기능은 일반적인 REST API와는 달리 Swagger에서 확인할 수 없다. 실시간 양방향 통신이 필요한 채팅의 특성상 WebSocket을 사용하기 때문이다. 그래서 백엔드 개발자와 미리 논의해야 할 사항들이 꽤 있다. 스웨거만 보고 api 연결을 할 수 없기 때문에 소통이 진짜 중요한 기술 구현이었다. 백엔드 개발자분도 나도 둘 다 웹소켓 채팅 기능 구현이 처음이라 무슨 정보와 내용을 서로 주고받아야 할지 몰랐고 이 때..

문제 상황웹과 앱 환경에서 하단바를 다르게 표시해야 했다const BottomNav = () => { return 하단 내비게이션;}; 이걸 어떻게 웹/앱 환경에 따라 다르게 보여줄까?  1. 환경 감지 방법1.1 User-Agent 활용 User-Agent 문자열을 분석하여 앱 환경인지 확인하는 방법이다.iOS나 Android 앱의 웹뷰에서 접속 시 특정 문자열(MyCustomApp)을 추가하도록 설정해 감지한다.const useCheckEnvironment = () => { const [isApp, setIsApp] = useState(false); useEffect(() => { // User-Agent 문자열 가져오기 const userAgent = navigator.userAge..

최근에 루키톤을 하고있다! 같이 하는 제롬이 리액트 라우터 돔을 많이 싫어해서... TanStack Router를 도입했다.React Router를 사용하다가 TanStack Router를 사용해보면서 겪은 경험과 장점들을 정리해봤다. TanStack Router이란? 🤔TanStack Router는 React Router v7이라고도 불린다.파일 시스템 기반 라우팅과 타입 안전성이 특징인 라우터 라이브러리이다. Next의 파일 기반 라우터를 좋아했던 사람들이라면 이것 역시 좋아할 듯주요 특징1. 파일 시스템 기반 라우팅2. 완벽한 타입스크립트 지원3. 자동 코드 분할4. 성능 최적화시작하기 👶먼저 필요한 패키지를 설치해준다.pnpm add @tanstack/react-router 설치 후에 vite..

문제 상황 및 구현해야 할 것이런 느낌의 스크롤을 감지해서 상황마다 버튼이 달라지는 컴포넌트를 만들어야 했다. 스타일은 전부 비슷할 듯 하니 맨 처음에 두겠음import styled, { css } from 'styled-components';export const StyledButton = styled.button` display: flex; align-items: center; justify-content: center; border: none; border-radius: 1000px; color: white; background-color: #2f774d; transition: all 0.3s ease; font-weight: ${({ theme }) => theme.fonts.se..

주소 검색 라이브러리 추천 유명한 주소 검색 라이브러리들은 다음과 같다.Google Places API: 구글의 위치 검색 API를 사용하여 자동 완성 주소 검색 기능을 구현할 수 있습니다.Daum Postcode API: 한국에서 널리 사용되는 주소 검색 API로, 다음(카카오)의 주소 검색 기능을 제공합니다.네이버 지도 API: 네이버의 지도 API를 사용하여 주소 검색 기능을 구현할 수 있습니다.사용자 정의 주소 목록: 사용자가 직접 주소 목록을 선택하거나 입력하도록 할 수 있습니다.장점과 단점을 정리해보자면, Google Places API장점글로벌 적용 가능: 전 세계 어디서나 사용할 수 있는 주소 검색 기능을 제공한다.자동 완성 기능: 사용자가 주소를 입력할 때 자동 완성 기능이 작동하여 빠르..

구현할 기능 및 문제 상황다음과 같이 갤러리에서 이미지를 업로드하는 기능을 구현해야 했다.각자 다른 페이지에서 두 번 씩이나 쓰이기 때문에 이미지를 등록하는 기능을 hook으로 구현해서 재사용을 할 예정이다.구현에 앞서 이미지 등록에 필요한 개념들을 정리해보고자 한다! 이미지 등록 관련 개념 정리1. Blob이란?Blob(Binary Large Object)은 큰 파일(이미지, 비디오 등)을 다루기 위한 데이터 타입이다. 읽기 전용의 원시 데이터를 나타내며 주로 대용량 바이너리 데이터를 다루기 위해 사용된다. 파일 업로드/다운로드, 바이너리 데이터를 이미지로 생성, 미디어 파일 작업 등에 유용하다.주요 기능은 다음과 같다. 1. Blob 생성Blob() 생성자를 사용하여 배열 또는 문자열로부터 Blob을..