오늘한일 👨🏻‍💻 . 원티드 프리온보딩 진행 새로운 팀프로젝트 react-daum-postcode 사용하여 주소검색 기능 구현하기 기록 ✍🏻 . 면접 질문 공부는 끝이 없군 나의 암기력은 문제가 많다 ㅎㅎ 지난주에 이어서 주소 검색 기능을 한 번 더 담당하게 되었다. react-daum-post code 사용하여 주소 검색 기능 구현하였는데, 사용방법이 참 간단하고 쉽다.

react-daum-postcode 사용하여 주소검색 기능 구현하기 react-daum-postcode는 사용법이 정말 간단하다는 장점이 있다. 그래서 주소 검색 컴포넌트를 진행하는 프로젝트 테마에 맞게 커스텀 하는데 좀 더 포커스를 맞추고 진행하였다. 참고 카카오 우편번호 서비스 참고2 react-daum-postcode 0308_gif_v1.gif 구현 사항 체크 react-daum-postcode 사용 주소 검색 기능 구현 modal을 사용하여 주소 검색 노출, 주소 선택 후 선택한 주소와 상세주소 입력 부분 노출 상세주소 입력 여부에 따라 저장 버튼 활성화 및 비활성화 데스크탑 사이즈에서는 modal 팝업 모바일 사이즈에서는 화면에 가득 채우기 - 반응형 1. react-daum-postcode 사용 주소 검색 기능 구현 설치 사용 위 절차대로 진행하면 바로 주소검색 기능을 사용가능하다. 이제 원하는대로 커스텀해서 사용하면되는데 가이드라인 문서를 확인해보면 원하는 기능을 확…

오늘한일 👨🏻‍💻 . 원티드 프리온보딩 진행 주소 검색 기능 구현 기록 ✍🏻 . 면접 질문 공부는 끝이없군 ㅎㅎ 어제 view작업은 끝!! juso.go.kr에서 제공하는 OPEN API를 사용하여 주소 검색 기능 구현하였다.

주소검색 Api 사용하여 주소검색 컴포넌트 구현하기 - 2 view 작업은 어제 끝냈다. 이제 OPEN API를 활용하여 주소 검색 기능을 구현하고 redux를 사용하여 유저가 검색한 주소 + 입력한 상세주소를 저장하는 부분까지 진행하였다. 0304_gif_v1.gif 구현 사항 체크 Axios를 사용하여 OPEN API를 받아 주소 검색 및 검색한 주소 자동완성 기능 구현 상세주소 처리 1. Axios를 사용하여 OPEN API를 받아 주소 검색 및 검색한 주소 자동완성 기능 구현 실질적인 검색 기능이 실행되는 modal 팝업에서 axios를 활용하여 juso.go.kr에서 제공하고 있는 OPEN API를 받아왔다. 주소를 검색하는 input에 입력된 값을 useRef를 사용하여 addAddress에 담아 api의 부분에 들어갈 수 있도록 하였다. 그리고 autosearch라는 함수에 api를 받아 useState를 사용하여 datas에 검색한 주소를 저장, console.log…