React

웹페이지에서는 데이터 요청 상태에 따라 UI는 다른 상태를 보여주어야 한다.데이터가 패칭 중 일 때 로딩 UI, 에러가 났을 때 에러 UI 등이 있다.위 상황을 처리하기 위해 다양한 방법을 사용할 수 있다.프로젝트에 적용하면서 유지보수성 및 가독성이 좋은 방법이 뭐가 있을까 고민하던 중Suspense와 ErrorBoundary를 활용한 선언적 데이터 패칭 처리 방법을 채택하게 되었고, 블로그로 정리하고자 한다.전통적인 데이터 패칭 처리@tanstack/react-query에서는 useQuery 값 내 isLoading, isError 상태값을 제공해 준다.아래는 useQuery를 사용해 standard 한 방법으로 비동기 요청으로 데이터를 받아와 사용자에게 전달하는 OrderList 페이지다.import..

보통 개발환경의 주소는 http://localhost:3000을 사용한다. Api 서버의 주소가 https://dev-api.com 일때, 따로 cors 설정을 해놓지 않는다면, cors 에러가 난다. CORS 일반적으로 브라우저는 보안 문제상의 이유로 동일 출처 정책(SOP)을 따른다. 요청 URL과 응답 URL 두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일 출처로 볼 수 있다. 출처가 다른 호스트로 데이터를 요청하는 경우 CORS 정책을 위반하게 된다. 예를 들어 a-url.com 페이지에서는 b.url.com 호스트로 데이터를 요청할 수 없다. proxy proxy는 웹팩 개발서버로, proxy를 통해 브라우저에서 API 를 요청 할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 ..

react-slick라이브러리에서 dots를 바꾸기 위해서는 setting(props)값에 dotsClass를 추가해줘야 한다. default로 되어 있는 class 선택자 대신 dotsClass명으로 class 선택자명을 바꿔 커스텀이 가능하다. DOCS 버튼의 색깔과 크기, 버튼 양 옆 마진 값을 바꿔주고 싶었다. import React from 'react' import Slider from 'react-slick' import './slick.css' export default function ImgSlide({images}: any) { var settings = { dots: true, infinite: false, speed: 500, slidesToShow: 1, slidesToScroll..

DefaultProps , Styled-Components의 Props넘겨주는법, Type지정해주는 법에 대해 알아보자. 초기 Props 값 DefaultBadge.defaultProps = { info: "날씨", color: "pink", }; defaultProps 프로퍼티를 할당함으로써 props의 초기값 정의가 가능하다! 공식문서 참고 Styled Component의 props & Type정의 DefaultBadge에서 받아온 color를 Badge의 props로 넘겨주고 type BadgeType = { color?: string; }; const Badge = styled.span` padding: 5px; margin: 10px; border-radius: 3px; background-co..

export default function Index() { const [count, setCount] = useState(0); const PrevCountRef = useRef(); useEffect(() => { console.log("work"); PrevCountRef.current = count; }); const PrevCount = PrevCountRef.current; console.log(count, PrevCount); return ( Now :{count} Before : {PrevCount} setCount(count + 1)}> up ); } 프로젝트를 진행하면서 이전 state값을 알아야 하는 경우가 발생했다. 공식 문서에서는 위의 예제와 같이 알려주고 있었다. function..

Iamport는 PC/모바일 웹에서 PG사의 결제 연동을 도와주는 라이브러리다. (PG(사) : 이니시스, 나이스 페이먼츠 등과 같이 중간에서 온라인 지불과 결제대행을 하는 전자결제 대행사) Iamport를 활용해 몇 줄의 코드만으로 결제 서비스를 구현할 수 있어 개발자는 비지니스 로직과 서비스 자체에 집중할 수 있게 된다. const { IMP } = window; IMP.init('imp00000000'); // impAccount 관리자 페이지에서 가져온 가맹점 번호를 통해 IMP 객체를 init 해준다. IMP.request_pay(param, callback) IMP.request_pay는 param, callback 2개의 argument를 받는 함수다. IMP.request_pay( { pg..