사용자가 접근 가능한 최대 라우터는 /messagebox/[userId]/[type]/[messageId]/[options] 인데, 마지막 경로 [options]는 병렬 라우팅으로 생성하고 경로 가로채기를 통해 페이지 상위에 띄우는 방법으로 구현한 페이지와 쪽지에 대한 피드백을 보낼 수 있는 reaction 페이지가 있어서 경로에 맞춰 기능을 구분해야 했습니다. 처음에 단순히 router.back()으로 해결하려 하니 사용자 입장에서 고려했을 때 의도한 바로 뒤로가기가 되지 않던 문제가 있어서, 사용자 경험을 개선하기 위해 복잡한 내비게이션 로직을 관리하고 특정 경로에서 뒤로가기 기능을 구현하기 위한 커스텀 훅을 개발했습니다. 아래는 router.back() 이었을 때 현상입니다https://youtu...

이전에 투두태스크 프로젝트를 진행하던 팀 저장소를 fork해와서 개인 레포에서 AWS Amplify로 배포했는데, 변경 사항을 양쪽에 다 push 해줘야 했던 번거로움을 느꼈던 경험이 있었습니다.Amplify로 진행했을 때 들었던 게 Next.js로 배포를 한다고 하면 vercel이 같은 회사라서 연동이 쉽고 CICD를 잘 구축해둬서 많이 사용한다는 말을 들은 적이 있었습니다.웹서버 구축에 어려움을 느끼고 있던 때 Vercel로 어렵지 않게 하면 안되나? 싶어서 해보았는데, 작업을 끝내고 찾아보니까 Vercel을 웹서버로 사용하는 게 가능할 수는 있지만 Vercel의 서버리스 한계와 성능을 고려하지 못했다는 것을 깨달았고, 이후 AWS EC2와 Nginx를 사용해서 웹서버를 구축하는 방향으로 변경했습니다..

이전에 offset 기반 무한스크롤을 구현했을 때는 스크롤 이벤트를 사용해서 뷰포트를 감지하고 데이터를 추가로드하도록 했었는데, 자바스크립트 문서를 쭉 읽어보다가 페이지 내에 각 요소가 각각의 목적(광고, 레이지 로딩, 무한 스크롤 등)의 이유로 scroll 이벤트를 리스닝하기 때문에 이에 상응하는 콜백이 무수히 실행될 수도 있고 이는 메인 스레드에 큰 부하를 줄 수 있다는 것을 알게 되었습니다. 그래서 다른 구현 방법을 알아보다가 타겟 요소와 뷰포트의 교차점을 비동기적으로 관찰해서 요소가 뷰포트에 포함되는지 아닌지 구별하는 기능을 제공하는 Intersection Observer API를 알게 되었습니다. 스크롤 이벤트와 비교했을 때 throttling/debouncing이 불필요하다는 점, 비동기 처리..

이전에 공부했던 Next.js의 기능인 parallel routes, intercepting routes를 이용한 모달 페이지 구현 하기.중간에 프로젝트가 흐지부지되어서 그 이상의 진행은 하지 못했는데, 이때 공부했던 것을 바탕으로 다음 프로젝트에 적용해보았다.  각 파일별 기능은 위에 첨부한 글에서 모두 설명했기 때문에 이 프로젝트에서 적용한 방법에 대해서만 작성해둔다. 페이지의 UI는 다음과 같았다. 이런 모달이 신고하기/숨기기/숨김해제 로 3가지가 필요했다 병렬 라우팅으로 생성하고 경로 가로채기를 통해 모달을 상위에 띄우는 이 방법은 이동한 페이지 내부에서 모달을 생성해서 렌더하는 것이 아니라, 경로를 가로채서 모달 자체를 띄우는 것이니 사용자 경험이 좋아지게 될 수 있다 구현폴더 구조는 다음과 같..

PR 리뷰로 받았던 피드백 중 이 질문을 받고 작성해보는 글이다. 먼저 나는 경로를 가로채서 모달 자체를 띄우는 intercepting routes & parallel routes로 모달을 띄웠다. 그리고 이 질문이 달린 파일은 다음 (.)hide/ page.tsx 이었다. 'use client'import { Button } from '@/shared/components/Button'import { useRouter } from 'next/navigation'import { useCallback } from 'react'export default function Page({ params: { userId, messageId },}: { params: { userId: string; messageId..

포맷팅해야하는 양식은 위와 같았고, js의 DateTimeFormat을 사용해 KST로 바꾸면서 옵션을 DateTimeFormatOptions로 주었다. /** * 주어진 날짜와 일자를 "YYYY.MM.DD. 오전(혹은 오후)HH:MM" 형식으로 반환합니다. */const dateFormat = (e: Date) => { const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: '2-digit', hour12: true, } const formatter = new Intl.DateTimeFormat('ko-K..

Tooltip은 커서를 특정 구성 요소에 hover 되면 해당 영역에 대한 정보를 표시하는 GUI 요소이다. 화면에 새로운 기능이나 특정 요소에 대한 안내가 필요한 경우 화면을 Dimmed 처리하고 도움말이나 정보를 표시할 수 있다. 사용자 상호작용에 의한 팝업 종류는 다음 글에 있다. -> Toast 적용기 나온 디자인에 다음과 같은 툴팁 UI가 있었고, 이렇게 툴팁 컴포넌트를 구현했다. import React from 'react'interface TooltipProps { children: React.ReactNode}export default function Tooltip({ children }: TooltipProps) { return ( ..

애니메이션 효과가 있는 쪽지 썸네일을 어떻게 구현할지에 대해 이야기하다가, 다른 팀원분이 의견내어주신 로티!!Lottie는 에어비엔비에서 개발한 오픈소스 모바일 라이브러리로, 벡터 기반 애니메이션이다. 비트맵과 달리 벡터는 선분과 면으로 이루어져있기 때문에 해상도 저하가 없고 용량도 작다.  png, jpeg, gif는 비트맵 기반인데 이와 같은 확장자 파일을 포토샵으로 크게크게 확대해보면 정사각형 픽셀로 이미지가 이루어졌다는 것을 알 수 있다. gif는 이런 픽셀 이미지가 연속적으로 배치되어있기 때문에 용량도 무거워지고, 화질이 깨질 수 밖에 없다.포토샵이랑 일러스트 좀 만져보면 알 수 있음..   파일 자체는 디자이너님이 만들어서 .lottie로 주시거나, json으로 변환해서 주셨다..lottie로..