Chunho’s DevLife

IamPort에 이어 Omise PG를 연결해야 했다. 먼저 결제 페이지의 tsx 내부에 omise를 사용하기 위한 script 코드를 넣어줬다. 프로젝트는 NextJS를 사용한 SSR 아키텍쳐였기에, next/script가 제공하는 Script 태그를 사용했다. Checkout Button 클릭 시, const handleSubmit = useCallback( async (values) => { // @ts-ignore const OMISE = window.Omise // @ts-ignore const OMISE_CARD = window.OmiseCard try { const res = await postOrders(values) OMISE_CARD.configure({ publicKey: res.om..

NextJS 환경에서 Google Analytics는 다음과 같이 적용할 수 있다. 1. lib폴더에 gtag.js 파일을 생성한다. export const GA_TRACKING_ID = `${process.env.NEXT_PUBLIC_GA_TRACKING_ID}` // https://developers.google.com/analytics/devguides/collection/gtagjs/pages export const pageview = (url) => { window.gtag('config', GA_TRACKING_ID, { page_path: url }) } // https://developers.google.com/analytics/devguides/collection/gtagjs/events..

Ant-Design을 사용하여 Admin Page를 개발하는 중, Ant Design에서 제공하는 DatePicker를 사용하여 날짜별 데이터 필터링 기능을 구현하였다. 우선 데이터를 날짜별로 필터링 하기 위해서는 API 에 GET요청을 보낼 때 query에 startDate, endDate를 String(YYYY-MM-DD) 형식으로 담아서 보내주면 됐다. 먼저 시작일과 종료일을 한 번에 받으려면, Antd가 제공하는 RangePicker를 사용해주면 된다. const {RangePicker} = DatePicker DatePicker를 먼저 import 해준 뒤, DatePicker가 제공하는 RangePicker를 꺼내 사용한다. Search 위와 같이 날짜 조회 버튼과 제출 버튼을 생성해줄 수 있..

비회원 장바구니 기능 구현 중 비동기 처리 관련하여 Issue가 있었다. 기존에는 회원만 장바구니 추가, 장바구니 조회가 가능하여 API 호출 시 Session 정보가 없으면 401을 응답했다. 내가 생각한 비회원 장바구니 기능 로직은 다음과 같다. 1. 로그인이 되어있지 않은 상태에서 장바구니에 상품 추가 시 localStorage를 사용한다. (새로고침 시 데이터를 유지하기 위함) 2. 로그인이 되어있지 않은 상태에서 장바구니 페이지로 접근 시, localStorage에 있는 데이터를 사용한다. (결제 시에는 로그인 필요.) 3. 비회원 장바구니에 상품이 있는 상태에서 로그인 시, localStorage에서 상품 데이터를 가져와 API에 POST해준다. 이후 localStorage 데이터를 clear..

NextJS에서 커스텀 된 에러 페이지를 띄워주고 싶으면, NextJS에서 자체적으로 제공하는 기능을 사용하면 편리하다. https://nextjs.org/docs/advanced-features/custom-error-page Advanced Features: Custom Error Page | Next.js Override and extend the built-in Error page to handle custom errors. nextjs.org 만약 404Error가 발생했을 때 띄워줄 커스텀 페이지를 만들고 싶으면 pages 폴더에 404.tsx 파일을 생성해주면 된다. 같은 방식으로 500Error가 발생했을 때 띄워줄 커스텀 페이지는 pages 폴더에 500.tsx 이름의 파일을 생성해준다...

QA를 진행하며, Safari 환경에서 테스트 시 Select Box Option 텍스트가 노출 안되는 이슈가 있었다. 문제의 원인은 의외로 간단했는데 label을 option의 속성으로 지정해주어 생긴 이슈였다. option의 라벨을 속성값이 아닌 option태그 안에 직접 넣어주어 해결할 수 있었다. {options.map((option, index) => { let optionAttribute: IOptionProps if (typeof option === 'string') { optionAttribute = { key: option, label: option, value: index } } else { optionAttribute = option } return })} 위 코드를 )} {opti..

NextJS & Typescript 환경에서 애플 로그인을 연결하며, 몇 가지 문제와 마주했다. 우선 첫 번째로 react-apple-login 라이브러리를 사용했는데, 연결은 잘 됐지만 의존성 문제가 발생하여 배포가 안 되는 이슈가 있었다. 따라서 다른 라이브러리를 찾아봤다. 두 번째로 react-apple-signin-auth라는 라이브러리가 있어 사용해봤다. 해당 라이브러리는 타입스크립트를 사용하는 부분에서 문제가 있어 사용하지 못했다.  결국 라이브러리를 사용하지 않고 애플 공식 홈페이지에 있는 개발자 문서를 보며 react에 맞춰 적용하기로 결정했다.. Typescript를 사용하며, 기존에 없는 window객체의 값에 접근하려 했을 때 Window & typeof globalThis 에러가..

프로젝트를 진행하며 종종 컴포넌트가 자동으로 import 되지 않는 불편함이 있었다.. 라이브러리를 찾던 중 Auto Import라는 라이브러리가 있어서 설치했다..) ES6, TS, JSX, TSX 모두 지원한다! 설치 후 import가 되어있지 않은 컴포넌트를 클릭하면 위와 같이 왼쪽편에 전구 모양이 생기는 것을 확인할 수 있다. 전구 모양을 클릭한 뒤 가져오기 추가를 누르면 자동으로 import가 된다!

Facebook Login을 구현하기 위해 먼저 appId를 발급받아야 한다. https://developers.facebook.com/?locale=ko_KR Meta for Developers Conversations 2022: 제1회 Meta 비즈니스 메시지 콘퍼런스 가장 인기 있는 메시지 플랫폼에서 더욱 빠르고 개선된 경험을 구축하고자 하는 비즈니스, 개발자 및 파트너를 위한 제1회 콘퍼런스를 개최 developers.facebook.com 위 url에서 발급받을 수 있으며, 발급받는 과정은 생략하겠다. npm install react-facebook-login 타입스크립트일 경우 @types/react-facebook-login 명령어를 통해 라이브러리를 설치해준다. 나같은 경우 peer de..

로그인 방식에 구글 계정으로 로그인을 추가하기 위해 google cloud platform에서 Client ID를 발급받고, react-google-login 라이브러리를 사용하여 access token을 받아오던 중 예상하지 못한 에러가 발생했다. 위 과정까지는 https://jforj.tistory.com/239 블로그를 참고하였다. You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. 라는 내용의 에러 메세지로, 새로운 라이브러리를 찾아 적용하기 위해 @react-oauth/google@latest를 설치하였다. ..