전체 글18 [Clozet] 지도 검색 범위 지정하기 당근 마켓의 지도 검색범위 설정을 구현해 보려고 한다. 범위를 설정해서, 해당 범위내 있는 상품들만 조회할 수 있게 하려고 한다. 먼저 플로우를 생각해봤다. 1. 네이버의 GeoLocation을 사용해서 본인의 ip를 통해 경도와 위도를 반환한다. 반환한 좌표를 통해 지도에 본인 위치를 표시한다. 2. input 태그의 range를 이용하여 범위를 지정한다. 범위는 1 ~ 5km로 설정할 수있다. 3. 범위에 따라 네이버 지도에 원 크기가 달라진다. 해당 범위내 행정복지센터의 좌표가 있으면, 해당 동 이름을 카운트해 "(본인의 행정동)외 14개동 조회" 라고 표시한다. 4. db에 [회원ID, 위도, 경도, 행정동 명, 검색범위] 를 저장시킨다. 2023. 11. 11. [프로젝트] 물품 장바구니,구매 예외처리하기 상품을 등록할때 상품이 몇개있는지 재고를 등록한다. 이전에는 재고에 따른 구매 로직을 처리하지 않아 이번에 추가하였다. 장바구니로 등록, 구매창 이동, 장바구니에서 구매 선택, 물품 구매 에 예외처리를 해줘야하기때문에 공통 컴포넌트를 작성할 필요가 있었다. const [isOpen, setIsOpen] = useState(false); const [stock,setStock]=useState(); const onToggleModal = () => { setIsOpen((prev) => !prev); }; {isOpen && ( )} 모달을 띄우기 위해, isOpen이 true일때 StockModal 컴포넌트를 화면에 렌더링한다. import { Modal } from "antd"; const StockM.. 2023. 10. 29. [NCP] Mysql CloudDB 연결하기 지금까지 로컬에서 DB를 사용했는데, 클라우드 서버상에서 리눅스 환경으로 mysql을 사용해보려고 한다. 생성한 VPC를 생성하고 Subnet을 선택했다. 나머지는 default로 설정했다. DB 이름과 계정. 비번, 접속 포트를 설정해보자. HOST(IP) 설정에는 DB에 접근을 허용할 IP대역을 입력한다. 우리는 Public 도메인을 이용하므로 모든 대역을 허용하기 위해 % 를 입력한다. 특정 IP 접속 허용 : 1.1.1.1 - IP 대역 접속 허용 : 1.1.1.% 생성된 DB 서버이다. 이제 ACG 설정을 해보자 ACG(Access Control Group)는 서버 간 네트워크 접근 제어 및 관리를 할 수 있는 IP/Port 기반 필터링 방화벽 서비스이다. DB서버에 접근할 아이피를 인바운드 규.. 2023. 10. 21. [React] useInfiniteQuery를 사용한 무한스크롤 구현 요즘 서비스에서는 페이징 기법으로 페이지를 이동하는것보다, 페이지를 내려 새로운 리소스를 가져오는 무한스크롤 기반의 페이지가 많다. UX쪽 측면으로 1페이지, 2페이지 이동하는 것보다 하단으로 스크롤을 내려 페이지를 이동하는것이 편하기 때문이다. 또한 모든 데이터를 로드하면 랜더링이 느려지기 때문에 부분부분 필요한 데이터를 호출해야한다. 프로젝트에 무한스크롤을 적용하려고 한다. 무한스크롤에서 특정 위치에서 데이터를 로드하기 위해 useInView 훅을 사용하려고 한다. useInView 훅은 컴포넌트의 inView 상태를 모니터링해주는 훅이다. 요소가 뷰포트에 진입/제외 되는 시점을 파악시켜준다. (react-intersection-observer) 다음 무한페이징을 구현하기위해 useInfiniteQu.. 2023. 10. 14. 이전 1 2 3 4 5 다음
