React (4) 썸네일형 리스트형 browser-image-compression을 활용하여 이미지 최적화하기 프로젝트 진행 중 웹 프로젝트의 일부 화면을 캡처한 이미지를 서버에 저장해야 되는 기능을 구현하게 되었다. 하지만 업로드한 이미지와는 다르게 html2canvas를 활용하여 캡처한 이미지는 데이터가 너무 커 서버에 전달하는데 오류가 많이 발생하는 문제가 생겼다. 다행히도 browser-image-compression라는 라이브러리를 발견하게 됐고 이 라이브러리를 통해 이미지 압축, 포맷 설정 크기 조절 등 이미지를 최적화하여 프로젝트의 성능을 향상할 수 있었고, 서버와의 데이터 통신이 원활히 이루어졌다. npm i html2canvas browser-image-compression html2canvas와 browser-image-compression 라이브러리는 설치되어있어야 한다 const handle.. [Project] 나이스 페이먼츠 테스트용 전자결제 연동하기 (4) - 프론트엔드 폼 구현 2차 단순히 고정값을 보내어 호출한 저번 포스팅에 이어, 이번 포스팅에서는 폼에서 수정한 값으로 결제창 호출 시 데이터를 보낼 수 있도록 구현하겠습니다. 1. "가격", "결제 수단", "구매수량에 따른 최종 결제 금액"의 상태값이 변할 수 있도록 useState를 활용하여 변수를 선언해 줍니다. const [price, setPrice] = useState(1004); const [selctedMethod, setSelectedMethod] = useState(''); const [totalPrice, setTotalPrice] = useState(1004); 2. 폼 제출 시 결제 수단의 선택 유무를 판단하여 나이스페이 결제창을 호출하는 함수를 구현합니다. const handleSubmit = (e: an.. [Project] 나이스 페이먼츠 테스트용 전자결제 연동하기 (2) - 키 발급 및 프론트엔드 진행 1차 https://github.com/nicepayments/nicepay-manual GitHub - nicepayments/nicepay-manual: 나이스페이먼츠 결제연동 매뉴얼 나이스페이먼츠 결제연동 매뉴얼. Contribute to nicepayments/nicepay-manual development by creating an account on GitHub. github.com 위의 링크를 통해 나이스 페이먼츠에서 제공하는 전자결제 개발자 가이드를 확인할 수 있다. 따라서 이 가이드를 참고하여 전자결제 연동을 진행할 것이다. 가이드에서 제공하는 샘플 코드 언어로 Node.js Python Ruby Asp Java php .Net 이 있는데 나는 여기서 node.js를 사용하여 프론트엔드 Rea.. [Project] 나이스 페이먼츠 테스트용 전자결제 연동하기 (1) - 테스트 상점 개설하기 리액트 프로젝트에 나이스 페이먼츠 전자결제 서비스를 도입하기 위해 테스트용으로 간단하게 연동하는 과정을 정리하려고 한다. https://start.nicepay.co.kr/merchant/login/main.do 로그인 | 나이스페이 관리자 로그인 비밀번호를 잊어버렸어요. 나이스페이 아이디가 없으신가요?회원가입 start.nicepay.co.kr 1. 나이스 페이 로그인 하기 먼저 나이스 페이먼츠 결제연동 사이트로 가 회원가입 후 로그인을 한다. 2. 상점 추가하기 로그인을 하면 아래 사진의 화면이 나타난다. 왼쪽 상점 추가를 누르면 테스트용 상점을 추가할 수 있다. 3. 테스트 상점 개설하기 상점 추가하기에서 테스트 상점 개설하기 클릭 후 상점 이름을 설정한 다음 추가하기를 클릭한다. 4. 테스트 상점.. 이전 1 다음
