끄적이는 개발노트

프로젝트를 하다보면 웹, 모바일 웹에 따라 서비스가 달라지는 경우가 있다. 예를 들어, 반응형보다는 모바일 웹에서는 컴포넌트 구성 자체가 달라지는 경우를 들 수 있다. 또한, 접속 기기에 따른 서비스 제공의 차이 혹은 정보들이 필요할 때 userAgent를 통해 접속 정보들을 확인할 수 있다. 이를 위한 방법으로, request-header 안에 담겨있는 userAgent를 통해 확인하거나, react-device-detect라는 npm을 사용하면 된다. 1. SSR (request-header) import { GetServerSideProps, GetServerSidePropsContext, NextPage } from "next"; const Home: NextPage = (props) => { c..

이전 포스트에서는 결제모듈을 사용하기 위한 사전준비 작업을 마쳤다. 이어서, Next.js 코드에 적용하는 방법을 정리한다. 1. 아임포트 라이브러리 추가 2. 객체 초기화 const IMP = window.IMP; IMP.init("가맹점 식별코드") 해당 초기화 코드를 Next.js에서 사용하기 위해서는 결제 버튼 클릭 이벤트 안에서 실행하는게 좋다. 3. 결제창 호출 const onPaymentHandler = () => { const IMP = window.IMP; IMP.init("가맹점 식별코드"); const payData: RequestPayParams = { pg: "html5_inicis", // PG사 pay_method: "card", // 결제수단 merchant_uid: `mid..

이번 포스트에서는 프로젝트에 연동했던 결제모듈 아임포트(Iamport)에 대해 정리한다. 1. 포트원(아임포트) PG(Payment Gateway)란? 온라인에서 상품이나 서비스를 결제할 때 우리가 알고 있는 다양한 수단으로 결제 가능하게끔 지원하는 서비스 결제 서비스를 위한 PG사는 이니시스, 다날, 카카오페이, 네이버페이 등 다양한 업체들이 존재하는데, 포트원을 사용하면 PG사 변경에 따른 추가 개발이 필요하지 않아 편리하다. 다만, 포트원은 PG사를 연결해주는 것일 뿐이므로, PG사 심사는 별개로 진행된다. 경험상으로는 1~2주가 소요되었으며, 실제 사용을 위한 필요사항들(ex. 결제약관 등)을 피드백해주며 심사가 진행된다. 2. 포트원 가입 https://admin.portone.io/auth/s..

const FileUpload: NextPage = () => { const [file, setFile] = useState(null); const onFileHandler = (e: React.ChangeEvent) => { if(e.target.files[0]?.size > 5242880) { alert("5MB 이하만 가능!") } else { setFile(e.target.files[0]) } } const onSubmitHandler = async () => { const formData: FormData = new FormData(); formData.append("test", file); await 백엔드 api에 formData 넣어서 태우기 } return ( 선택 ) } 파일 업로드를 ..

이번 포스트에서는 Next.js에서 useRouter()에 대해 알아본다. useRouter 중에서도 직접 사용해 본 기능들 위주로 간단하게 설명해보려 한다. 1. 기본 사용법 import { useRouter } from 'next/router' const Home: NextPage = () => { const router = useRouter(); return ( router.push('/test')}> 버튼 ) } export default Home; 이렇게 하면 pages/test.tsx 페이지로 이동하게 된다. 2. Dynamic Routing import { useRouter } from 'next/router' const Home:NextPage = () => { const router = ..

이번 포스트에서는 텍스트를 복사하는 방법을 알아본다. hook을 이용하면 간편하게 가능하다. import { NextPage } from "next"; import { useCopyToClipboard } from "react-use"; const Test: NextPage = () => { const [copy, setCopy] = useCopyToClipboard(); const onCopyHandler = () => { setCopy("hi"); }; console.log("text", copy.value); return ( 복사 ) }; export default Test; useCopyToClipboard 를 활용하면 원하는 문자를 state에 손쉽게 복사할 수 있다. 해당 state는 json..