4전 4전

카카오 지도 API를 활용한 프로젝트를 진행하던 중,백엔드 서버에서 받아온 여러 위치 데이터를 바탕으로지도에 마커를 표시하는 기능을 구현해야 할 일이 있었습니다. 이 과정에서 다수의 마커를 효율적으로 관리하고,지도를 최적화하는 방법에 대해 고민하게 되었습니다. 이번 글에서 어떠한 과정으로 고민하고 문제를 해결했는지 작성해보려 합니다. -> 참고: 프로젝트는 Next.js, tailwind css, typescript를 사용하였습니다.| 지도 생성우선 카카오 지도 API를 사용하기 위해다음과 같이 next.js의 Script 태그를 사용해 스크립트를 포함시켜 줍니다.const KakaoMap = () => { return ( );};export default Kaka..

최근에 지도 서비스를 개발하면서 사용자들이 해당 서비스를모바일에서 보다 편리하게 사용할 수 있도록 PWA를 적용하기로 했습니다. 오늘 포스팅에서 Next.js에서 PWA를 적용했던 과정을 적어보려 합니다.| manifest.ts먼저 pwa를 적용하기 위해서는 manifest라는 json 파일을 통해서 앱의 이름, 아이콘,기타 설명 등등을 설정해 줘야 사용할 수 있습니다. 따라서 우선적으로 해야 할 부분은 manifest파일을 만들고, 설정을 입력하고,html의 head태그 안에 아래와 같이 link태드를 넣어주면 됩니다. 하지만 Next.js에서는 직접 manifest.json을 만들고 link를 걸어줄 필요가 없고,공식문서를 보면 manifest.ts파일을 통해 자동으로 manifest를 생성하고,자동..

리액트에서 tailwindCSS를 사용하면서 컴포넌트의 스타일을 일부만 변경하려 할 때종종 class가 중복돼서 예상하지 않은 스타일로 적용될 때가 있습니다. 이럴 때 중복을 피하기 위해 유용하게 사용할 수 있는 tailwind-merge라는 유용한 라이브러리가 있습니다.| twMergetwMerge를 사용하여 중복되는 class를 제거하고 새로운 스타일을 적용해 줄 수 있습니다. 먼저 예시로 props로 변경하고자 하는 스타일을 받아 적용하는 컴포넌트 하나를 만들어 보겠습니다.interface Props { className: string;}const Input = ({ className }: Props) => { const inputStyle = `border rounded px-2 py-1 $..

보통 웹 개발을 진행할 때 로컬 환경에서의 개발 주소는대부분 http://localhost 이런 식으로 되어 있는 경우가 많습니다. 일반적으로 개발을 진행할 때에는 문제가 되지 않지만 쿠키를 사용하는 경우secure 속성으로 인해 http에서 쿠키를 사용하지 못하는 경우가 있습니다. 이럴 경우 로컬 개발 환경에 https를 적용하여 개발을 진행할 수 있습니다.| mkcerthttps를 적용하기 위해서는 TLS/SSL 인증서가 필요합니다.mkcert는 자체 서명된 인증서를 만들어 주고,이를 신뢰할 수 있도록 로컬 CA(인증 기관)를 설치하고 관리합니다.따라서 개발 중 보안 경고 없이 https를 사용할 수 있도록 합니다. 먼저 mkcert를 설치해 줍니다.리눅스brew install mkcert윈도우cho..

홈페이지에서 사용자 인증에 대한 jwt 토큰을 쿠키에 저장하고, api요청 시 해당 쿠키가 같이 전송되며 사용자 인증을 처리하는 경우가 있습니다. Next.js를 사용하여 서버 사이드 렌더링을 통해 API요청으로 데이터를 받아올 때 쿠키가 포함이 안 돼서 데이터를 받아오지 못하는 경우가 있습니다. 이때 Next.js에서 제공하는 cookies 함수를 사용하여 쿠키를 직접 포함시켜 보낼 수 있습니다. | cookies cookies함수는 next.js 13부터 제공되는 함수로 서버 컴포넌트에서 쿠키를 읽고 쓸 수 있도록 해주는 함수입니다. get() 메서드 cookie함수의 get(name) 메서드로 쿠키의 이름을 사용해 쿠키의 이름과 값을 포함하는 객체를 반환할 수 있습니다. 만약 이름이 포함된 쿠키가 ..

next.js로 프로젝트를 진행하면서 리스트에서 어떤 아이템을 클릭하면 해당하는 아이템의 상세 페이지로 이동하는 기능을 구현하였습니다. 이때 상세페이지로 첫 진입 시 next.js서버에서 데이터를 불러온 후 페이지로 이동되면서 아이템을 클릭하면 즉각적으로 페이지로 이동되는 것이 아닌 아래 이미지와 같이 딜레이가 생기는 현상이 있었습니다. 클릭하면 즉각적인 반응이 없기 때문에 클릭된 건지 안된 건지 헷갈리기도 하고 마치 렉이 걸린 듯하여 사용자 경험이 매우 떨어진다고 생각해 이를 개선하고자 했습니다. | 전역 상태 관리 store생성 먼저 아이템을 클릭했을 때 클릭했다는 상태를 저장하기 위해 전역에 상태를 저장해 줍니다. 해당 프로젝트에서는 zustand라는 라이브러리 사용하였습니다. // useLoadi..