아코디언이나 모달 등 어떤 트리거를 통해 이미지를 마운트하는 경우, 이미지를 로딩할 수 있는 충분한 시간이 있음에도 마운트 후 이미지가 로딩되는 과정을 사용자가 볼 수밖에 없다. 이는 사용자 경험을 해치는 요인이 된다.어떤 이미지가 마운트 될 것이라고 예상될 때 이미지

검색 API는 다음과 같다. GET /search/?name={keyword}사용자가 검색어를 입력하는 도중 500ms에 한 번씩 검색을 시킬 것이다.조건부 가져오기를 이용했다. search 가 undefined | "" 일 때는 요청을 날리지 않는다.useSWR은 k

개발자도구를 이용해 모바일 화면을 확인하며 작업을 해도, 모바일 기기로 직접 확인하면 기획과 다르게 구현된 문제가 많이 발생한다.대표적으로 화면의 height 를 100vh 로 설정해도, iOS 등의 기기에서 확인하면 스크롤이 생긴다.이유는 100vh 가 쓸 수 없는

쿠팡이츠의 스낵바는 스크롤을 내리면 사라지고, 스크롤을 중단하면 다시 나타난다.이와 똑같이 동작하는 스낵바를 만들어볼 것이다.스크롤이 바뀌는 순간 스낵바가 사라지고, 스크롤이 500ms간 멈춤이 지속되면 스낵바를 띄우는 형태로 디바운스를 사용해야 한다.디자인은 자유롭게

https://velog.io/@nyanji00/react-카카오맵-API-이용해-지도-띄우기-typescript-Next.js위 글에 포스팅했던 방법은 React에서 카카오맵을 이용하는 방법으로 가장 잘 알려져 있지만,Next.js에서 위 방법을 이용할 경우

https://apis.map.kakao.com/ 를 방문한다.해당 사이트에 설명이 아주 자세하게 되어 있어 그대로 따라하기만 하면 키를 발급받을 수 있다.카카오맵에서 제공해준 설명에 따르면,먼저 지도를 담을 영역 div 를 선언한 후 id 를 map 으로 지

만들어 볼 결과물은 gif와 같은 모달이다.아직 디자인이 완전히 나온 상태가 아니어서 모달의 타입을 정확히 구분지을 수 없었다.따라서 헤더(타이틀)와 푸터(버튼)의 디자인에 따라 타입을 나누고, 바디는 children 을 이용해 받을 것이다.chakra-ui로 모달을

위 커맨드를 실행해 nvm을 설치하고, nvm --version 으로 잘 작동하는지 확인한다.M1칩을 쓰는 기기에서 15 미만의 버전을 설치하려 하면 다음과 같은 에러를 포함하며 설치가 실패한다.위 커맨드를 실행한 후 다시 nvm install v14.16.0 을 이용