프로젝트를 진행하며 지도에 제주도를 12개의 구역으로 나눠 다각형을 그릴 일이 생겼다그런데 이걸 지역 모양에 맞춰 그리려면 꺽이는 선마다 위도 경도 값이 필요하다는 사실.......노동할 생각에 머리만 쥐어잡던 중 불행 중 행운으로지역에 맞게 다각형을 그릴 수 있는 자료를 제공하는행정구역 SHP 파일을 제공하는 사이트를 발견하게 됐다  대한민국 최신 행정구역(SHP) 다운로드 – GIS Developer www.gisdeveloper.co.kr   시도, 시군구, 읍면동, 리 각각의 정보가 담긴 데이터 파일들이 있으니 사용자가 원하는 파일을 다운 받으면 된다나는 제주도를 12개의 구역으로 나누기 위해 시읍면이 필요했었는데 없어서 일단 읍면동으로 다운 받았다(노동의 시작) 가장 최신 업데이트 파일을 다운 ..

브라우저 새로고침 방지를 이어서 찾아온 뒤로가기 방지하기..새로고침 방지할 때는 beforeunload 이벤트를 사용해서 브라우저에서 제공하는 안내 팝업을 띄웠지만뒤로/앞으로가기를 방지할 때는 popstate 이벤트를 사용하여 우리가 직접 만든 레이어팝업을 띄우고자 했다! 팝스테이트popstate 이벤트는 브라우저 탐색(뒤로가기, 앞으로 가기)시 발생하며, 브라우저의 히스토리 스택의 상태가 변경될 때 트리거 됨 특징window.history API와 연동됨사용자가 브라우저 탐색 버튼(뒤로/앞으로)을 클릭할 때 실행됨pushState 또는 replaceState 메서드로 변경된 히스토리 상태를 읽을 수 있음 사용 방법 (Next.js 기준)const MultiStepForm = () => { // 레이어..

프로젝트를 진행하며 데이터를 입력 받는 폼에서 새로고침을 할 경우 방지하는 창이 필요하다 판단했고이리저리 찾아본 결과 브라우저 네이티브 기능인 beforeunload 이벤트를 사용해서 저 창을 띄울 수 있다는 것을 알게 되었다 beforeunloadbeforeunload 이벤트는 사용자가 페이지를 떠나기 전(새로고침, 탭 닫기, 브라우저 종료, 다른 URL로 이동) 실행되며브라우저 네이티브 기능으로, 사용자가 페이지를 떠나기 전 경고 메시지를 표시하거나 특정 작업을 수행할 때 사용된다. 특징브라우저가 페이지를 떠나기 직전에 이벤트 발생주로 사용자 확인 메시지를 띄우는데 사용 됨브라우저마다 다르게 동작하며, 최신 브라우저에는 보안 정책 상 커스텀 메시지를 사용할 수 없음 사용 방법 (Next.js 기준)c..

반복되는 컴포넌트들을 분리하며 react-hook-form의useForm와 Controller를 사용해보게 되었다 useFormuseForm은 주로 react-hook-form 라이브러리에서 제공하는 훅으로,React에서 폼을 효율적으로 관리하고 유효성 검사를 쉽게 할 수 있게 도와줌useForm을 사용하면 폼 상태와 입력값을 제어하고 검증하는 코드를 간결하게 작성할 수 있어, 특히 복잡한 폼을 다룰 때 유용함 주요 기능폼 상태 관리: useForm은 각 필드의 값과 폼 전체의 상태를 관리유효성 검사: 기본적인 HTML5 유효성 검사는 물론, 커스텀 검증을 설정하여 폼 입력값을 검증할 수 있음react-hook-form의 resolver를 사용하면 Zod, Yup 등 다른 검증 라이브러리와 쉽게 연동할 ..

프로젝트를 진행하면서 페이지간 경로를 이동시켜줄 때어떤상황에 각각을 써줘야하는지 헷갈리고 모르겠어서 찾아보고 정리하게 되었다 Link 사용Link 컴포넌트는 보통 정적 네비게이션(클릭으로 페이지 이동)을 위해 사용된다 장점HTML 표준 준수 : Link는 태그로 렌더링되며, 검색 엔진과 접근성 도구가 링크를 올바르게 인식할 수 있다코드 가독성 : JSX 내에서 라우트 목적지와 함께 컴포넌트 구조를 명확하게 유지할 수 있다간단한 클릭 이벤트 : 단순한 라우트 이동만 필요할 때 사용하기 좋다 추천 사용 사례네비게이션 메뉴 : 상단 메뉴나 사이드바 메뉴처럼 간단한 경로 이동이 필요한 경우페이지 내부 링크 : 사용자가 UI상에서 클릭하여 다른 페이지로 이동해야 할 때 예시로그인 useNavigate 사용use..