본문 바로가기

분류 전체보기

(206)
Github actions 배포완료시 slack 으로 알림받기 1. 슬랙 앱 생성 및 설정 링크 접속: https://api.slack.com/apps Slack API: Applications | SlackYour Apps Don't see an app you're looking for? Sign in to another workspace.api.slack.com 2. Create New App- From scratch 선택- App name : Front Release Notification App- 슬랙 워크스페이스 선택  3. Incoming Webhooks 탭 이동- On 활성화 처리  4. 화면 하단의 Add New Webhooks to Workspace - 게시할 채널 선택 : 알림 받을 채널을 선택- 생성된 Webhook Url 복사  5. Githu..
Xcode 모바일 시뮬레이터 콘솔로그 확인 (웹 인스펙터) 1. Xcode 모바일 시뮬레이터 켠다 - Safari 접속 - 필요한 사이트 접속 (localhost 등)   2. PC 에서 Safari 켠다Safari - 개발자용 - 시뮬레이터 - 사이트
Auth.js signIn 완료 후 session 이 여전히 null (수동 리프레시를 해야만 session 이 업데이트 됨) 참고 : https://github.com/nextauthjs/next-auth/issues/9504#issuecomment-2326123445  [BEFORE]layout.tsx import Footer from "@/components/footer";import Header from "@/components/header";import ReactQueryProvider from "@/components/provider/ReactQueryProvider";import type { Metadata } from "next";import { SessionProvider } from "next-auth/react";import localFont from "next/font/local";import { Toast..
프론트에서 (Next.js) 에서 POST FormData 응답 받기 (ECPAY) USECASE : 대만 ECPAY 편의점 픽업 지점 선택을 위한 Request the e-map of convenience store(B2C/C2C) [ECPAY 개발문서] 문서에 명시되어 있다시피,HTTPS Transfer ProtocolHTTP Method:POSTAccept:text/htmlContent Type:application/x-www-form-urlencoded form 형태로, POST 로 게다가 텍스트로 데이터를 요청/응답 받아야한다.  프론트에서 Request 파라미터를 말아서 form 으로 보내고, Request 파라미터 중 하나인 "ServerReplyURL" 키에 어떤 값을 담아 보내야 하는지가 고민이었다. 왜냐하면, ServerReplyURL 이 url 은, 편의점을 선택하..
위챗 페이 문서 통합 QR 코드 생성 APIhttps://pay.weixin.qq.com/wiki/doc/api/wxpay/en/pay/NativePay/chapter8_1.shtml WeChat Pay Open PlatformScenarios Information scene_info String(256) No Specify the payment scenarios, such as the store or mall information. { “store_id”:””, //Unique ID of store, Optional, string(32) “store_name”:””//Store name, Optional, string(64) } Example:pay.weixin.qq.com 결제 결과 리턴 APIhttps://p..
[Next.js] Google Map Distance Matrix API 프론트단에서 사용하기 목표 : 출발지 주소 ~ 목적지 주소 사이의 거리 구하기 이슈 : 클라이언트 사이드에서 fetch 요청을 하면, CORS 에러가 발생클라이언트 사이드에서 fetch 요청을 하는 경우 참고 코드 How to Use Google Maps Distance Matrix API in React.jsReact.js is a popular JavaScript library for building user interfaces, and integrating Google Maps services can add powerful location-based…medium.com   원인 : distancematrix API 는 서버사이드에서 요청을 해야한다반면에 geocode API 는 클라이언트 사이드에서 요청을 해도 잘만 나..
Next.js App Router SSR 용 fetch 코드 (헤더 쿠키, Authorization 세팅) SSR 용 Fetch 인스턴스 구현 내용https://mypage.com/kr/ko" 와 같이, /[country]/[language] 정보를 url params 로 제공한다.상품 디테일 페이지를 서버사이드 랜더링으로 제공한다.상품 디테일 정보는 국가/언어 에 따라 달라진다.국가/언어 정보를 HTTP 요청 헤더에 Country, Language 를 키값으로 전달한다.상품 "좋아요"/"위시리스트" 등과 같은 유저 데이터를 제공하여야한다.게스트는 쿠키의 "DJSESSION" 값 으로 유저 데이터를 제공한다 -> Cookie 를 헤더에 담아서 전송 코드"use server";import { cookies } from "next/headers";import { getServerSession } from "nex..
Javascript ?? (null 병합 연산자) 와 || (OR 연산자) 의 차이 || : OR 연산자 (MDN)Logical OR 논리 OR 계산용둘 중 하나이상 참이면 👉 참 true || false ⇒ truetrue || true ⇒ truefalse || false ⇒ false  ?? : null 병합 연산자 (MDN)왼쪽이 null 또는 undefined 이면 오른쪽을 반환, 아니면 왼쪽값 사용  UseCaseform 의 default 값을 지정하려한다store 에 저장해둔 값이 있다면 사용하고,없다면 기본값을 수동으로 지정하려 한다. [Incorrect] defaultValues: { setBillingAddressAsShippingAddress: paymentForm?.setBillingAddressAsShippingAddress || true, i..
React Error Boundary Error boundaries do not catch errors inside event handlers.
Stripe 를 통해 Apple pay 세팅 - 애플페이 탭 노출 안됨, 테스트 키로 결제시 session 생성 불가 에러 세팅한 내용 [스트라이프 대시보드]1. card 활성화2. Apple pay 활성화3. Payment domain 등록 - 로컬 호스트 같은건 안됨, https 로 제공하는 도메인이어야 함,- dev 서버가 https 로 돌고있어서, dev 도메인을 등록하였음- verify 를 받기 위해선 아래 프론트에서 추가 작업이 필요함  [프론트 작업]1. 스트라이프가 제공하는 도메인 인증용 파일을 다운로드 (참고)2. Next.js 기준 /public/.well-known/apple-developer-merchantid-domain-association  파일 생성3. 다운받은 도메인 인증용 파일 내용 붙여넣기4. 미들웨어 설정에서 .well-known 으로 시작하는 라우팅은 미들웨어 로직 타지 않도록 설정- m..