개발 기록장11 [React] 토스페이먼츠 API로 Paypal 연동 해외결제 구현하기 6월 1일에 출시된 따끈따끈한 토스페이먼츠 Paypal 연동 해외결제 API. React와 Next.js로 Paypal 해외결제를 구현한 과정을 기록으로 남겨보려 한다. 참고로 이번 프로젝트는 결제 수단이 Paypal 해외결제 한 가지였기 때문에 결제위젯을 사용하지 않고 예약 페이지 내의 결제 버튼을 클릭했을 때 바로 Paypal 결제 페이지로 연결되도록 구현했다. 1. npm 패키지 설치 npm install @tosspayments/payment-sdk npm install nanoid `script` 태그에 결제위젯 SDK 파일을 추가하는 방법이 아닌 npm 패키지로 설치하는 방법을 선택했다. nanoid는 결제 요청 시 `orderId`를 랜덤으로 생성하기 위해 설치한다. 2. API 키 준비 /.. 2023. 6. 14. [Next.js] Next.js 13에서 SSG, SSR, ISR 적용하기_fetch() API NEXT.JS 13 버전에서는 `getStaticProps`, `getServerSideProps` 함수를 더 이상 사용하지 않는다는 소식을 보고 그럼 SSR과 SSG는 어떻게 적용할 수 있는 걸까 궁금해서 찾아봤다. 일단 NEXT 13부터 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작하게 되었으며 SSR, SSG, ISR을 적용하기 위해서 `getStaticProps`, `getServerSideProps` 등의 함수가 아닌 `fetch` API를 사용한다. Data Fetching // This request should be cached until manually invalidated. // Similar to `getStaticProps`. // `force-cache` is the defaul.. 2023. 6. 10. [React] resize 이벤트로 브라우저 크기에 따라 javascript 적용하기 CSS와 관계없이 브라우저의 width에 따라 컴포넌트 내에서 javascript를 다르게 적용하기 위해 resize 이벤트를 사용했다. resize 이벤트 const [width, setWidth] = useState(window.innerWidth); const isMobile = width { setWidth(window.innerWidth); }, 200); useEffect(() => { window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); // cleanup }; }, []); resize 이벤트는 document view의 크기가 변경될 때.. 2023. 6. 7. [Recoil] 새로고침해도 유지되는 state_Recoil Persist 결제 기능을 구현하는 과정에서 결제창이 넘어가며 state가 초기화되어 결제 승인 페이지에 도착하기 전에 사용자가 입력한 예약 정보가 모두 날아가는 문제가 발생했다. 그래서 사용자가 입력한 예약 정보를 임시로 저장하기 위해 Recoil Persist 기능을 이용하여 구현했다. Recoil Persist란? Recoil과 함께 사용할 수 있는 별도의 라이브러리로, Recoil로 생성한 global state를 localStorage 혹은 sessionStorage에 저장하여 새로고침해도 state가 유지되도록 사용할 수 있다. 기존 Recoil 사용 방법과 동일하게 useRecoilState 등의 훅을 이용하여 쉽게 Storage에 상태를 저장할 수 있다. Recoil Persist 사용 방법 npm in.. 2023. 6. 6. Vercel로 배포 시 속도 개선 방법_Function Region Vercel Project Settings > Functions를 들어가면 Function Region을 선택할 수 있다. 그런데 Vercel로 배포 시 Function Region 디폴트가 USA로 설정되어 있기 때문에 이것을 무조건 한국으로 바꿔주는 것이 좋다. Setting Serverless Function Regions 함수가 해당 데이터베이스에서 멀리 떨어진 지역에서 호출되는 경우 응답 시간이 느려집니다. 데이터베이스에 가까운 지역에 서버리스 기능을 배포하면 성능을 크게 향상시킬 수 있습니다. 서버리스 기능과 데이터 소스가 물리적으로 가까울 때 데이터 소스에서 데이터를 읽는 데 대기 시간이 줄어듭니다. Function Region이 미국인 경우 POST 요청에 2.70초가 소요되었다. Func.. 2023. 5. 31. [React] HTML <dialog> 태그로 Modal 구현하기 유튜브에서 우연히 HTML dialog 태그 관련 영상을 보고 이번 프로젝트에 너무 적용해 보고 싶었다! 많은 시행착오가 있었지만 결국 dialog 태그를 이용해서 모달을 구현하는 데 성공했다. 구현 과정에서 React에 dialog 태그를 적용하는 자료를 많이 찾을 수 없었기 때문에 코드를 기록으로 남기려 한다. HTML dialog 태그를 사용했을 때의 장점 backdrop을 포함한 기본적인 모달의 UI가 제공된다. (CSS 커스텀도 가능) dialog에서 제공되는 showModal(), close() 등의 API를 이용하여 모달을 쉽게 구현할 수 있다. esc 버튼을 클릭하여 모달을 닫을 수 있다. 기본적인 모달 UI 제공 (CSS 수정 방법) backdrop과 함께 정가운데 모달이 생성된다. 만약.. 2023. 5. 28. 깃허브 프로필 README.md 꾸미기 나중에 깃헙 프로필 수정할 때 참고하려고 남기는 글 5분 만에 깃허브 프로필 꾸미는 웹사이트 이런 식으로 헤더부터 기술스택, 연락처, stats까지 디자인을 내가 원하는 대로 커스텀해서 적용한 후에 코드만 복사해서 리드미에 넣어주면 된다. 너무 편리해서 추천함👍👍 5분만에 깃허브 프로필 꾸미는 웹사이트 - (깃허브 readme 꾸미기) 깃허브 프로필 (readme 파일) 꾸미는 웹페이지를 만드는 토이프로젝트 velog.io 스킬 뱃지 설정 Shields.io: Quality metadata badges for open source projects Love Shields? Please consider donating to sustain our activitiesYour BadgeStaticUsing das.. 2023. 4. 18. 네이버 소셜 로그인 검수 요청 후 승인 받기 최종 프로젝트에서 네이버 소셜 로그인 기능을 구현했는데 네이버의 경우에는 모든 아이디로 소셜 로그인이 가능하게 하려면 사전에 검수를 요청한 후에 승인을 받아야 한다. 검수 요청 관련해서 검색해 봐도 자료가 별로 없었기 때문에 승인 못 받으면 어쩌나 걱정했었는데 요청 후 2시간 만에 생각보다 수월하게 승인을 받아서 이 내용을 공유해 보려고 한다! '네이버 아이디로 로그인'을 적용하기 위해서는 검수 요청을 통해 승인이 완료 되어야 합니다. 1. 등록 직후에는 애플리케이션 상태가 '개발 중'으로 등록됩니다. '개발 중' 상태일 때에는 로그인 가능한 아이디에 제한이 있습니다.(최대 20개) 테스트용으로 사용할 아이디는 개발자센터 > 내 애플리케이션 > 멤버관리에서 등록 및 관리할 수 있습니다. 2. 개발 완료 .. 2023. 2. 25. [React] 회원가입, 로그인 구현하기 (Form Help Text) 리액트 팀 프로젝트에서 axios와 json-server를 이용해서 로그인, 회원가입 기능을 구현했다. 부족한 부분이 많겠지만 로그인, 회원가입을 이렇게도 구현할 수 있다는 것을 기록으로 남기려 한다. 회원가입 SignUpPage.jsx 전체 코드 더보기 import React, { useEffect, useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { __getUsers, __signUp } from "../../redux/modules/usersSlice"; import { v4 as uuidv.. 2023. 1. 2. html과 css만으로 top 이동 버튼 추가하기 다른 팀들의 발표를 보고 나도 버튼 누르면 최상단으로 이동해주는 top 버튼을 구현해보고 싶어졌다. 근데 구글링 해보니 대부분의 게시물에서는 자바스크립트를 이용하는데 나는 아직 자바스크립트를 이용해 본 적이 없기 때문에 조금 두려웠다. 그래서 html만으로 구현할 수 있는 방법이 없을까 열심히 검색하고 시도해 보다가 결국에는 성공했다! 참고 사이트 https://miaow-miaow.tistory.com/84 일단 내 웹페이지는 굉장히 간단한 구조이기 때문에 더 복잡한 코드에서도 적용될지는 모르겠다는 점을 밝혀둔다. 1. top 버튼 눌렀을 때 이동하고 싶은 위치를 id="top"으로 설정한다. 나는 타이틀에 id 값을 설정해 줬다. 2. html 코드 최하단에 a 태그를 추가한다. a 태그에 버튼 눌렀.. 2022. 11. 8. 이전 1 2 다음
