Clozet [프로젝트]5 [nginx] 리액트 + 스프링부트 프로젝트 배포 기존에는 스프링의 resource 내에 리액트를 위치시켜 빌드해 통합배포 했었다. 스프링 부트는 기본 포트로 8080을 사용하므로, 스프링 부트를 빌드하고 실행할 때는 8080 포트를 사용한다. 리액트는 3000번 포트를 사용하므로, 통합 배포 때는 리액트를 빌드하고 build 폴더를 스프링 부트의 resource 폴더에 넣어 스프링 부트를 빌드하게 된다. 이렇게 하면 8080번 포트로 스프링부트+리액트 통합 애플리케이션이 실행된다. 하지만 리액트측에서 카카오 로그인을 진행해서 콜백을 3000번 포트로 받아야 하는 경우가 있는데, 통합 배포를 해버리면 3000포트로 진입이 불가능 하다. 따라서 동시에 리액트측과 스프링부트측으로 라우팅과 url 매핑을 하려면 서버를 따로 두어야 한다. nginx를 사용해 .. 2023. 11. 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. [React] useInfiniteQuery를 사용한 무한스크롤 구현 요즘 서비스에서는 페이징 기법으로 페이지를 이동하는것보다, 페이지를 내려 새로운 리소스를 가져오는 무한스크롤 기반의 페이지가 많다. UX쪽 측면으로 1페이지, 2페이지 이동하는 것보다 하단으로 스크롤을 내려 페이지를 이동하는것이 편하기 때문이다. 또한 모든 데이터를 로드하면 랜더링이 느려지기 때문에 부분부분 필요한 데이터를 호출해야한다. 프로젝트에 무한스크롤을 적용하려고 한다. 무한스크롤에서 특정 위치에서 데이터를 로드하기 위해 useInView 훅을 사용하려고 한다. useInView 훅은 컴포넌트의 inView 상태를 모니터링해주는 훅이다. 요소가 뷰포트에 진입/제외 되는 시점을 파악시켜준다. (react-intersection-observer) 다음 무한페이징을 구현하기위해 useInfiniteQu.. 2023. 10. 14. 이전 1 2 다음
