programming (118) 썸네일형 리스트형 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 은, 편의점을 선택하.. [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.. 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.. Next.js with Typescript 프로젝트 테스트 코드 작성하기(jest, testing-library/react) 1. 현재 프로젝트 구성Next.js App router 사용TypescriptEslint 2. 테스트 툴 선택Jest 와 Testing Library 를 사용하기로 결정 3. 세팅1) Testing Libray React 패키지 설치(참고 : Installation - With Typescript)npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom 2) Jest (React) 패키지 설치(참고: Testing React Apps - Setup With Create React App)npm install --save-dev jest react-test-renderer (참고: Nex.. Fetch try-catch : 400 은 response, 401은 catch error 로 빠진다면? [현상황]jwt accessToken / refreshToken 을 사용하여 로그인 검증을 진행하고 있음API 요청시 400 Bad Request 와 같은 응답은 response 로 잘 받아지고 있으나, accessToken 이 만료된 후, API 요청을 했을 때 401 Unauthorized 응답, 근데 response 에 접근하지 못하고 try-catch 에서 catch 에러로 빠지며, 스크립트로, status code, error message 에 접근하지 못함.그냥 "failed to Fetch" 메시지로 찍힘 [기대상황]API 요청시 400 / 401 모두 백엔드 서버에서 응답하는 response 객체로, HTTP status code 와 에러메시지로 접근하여 에러를 핸들링하고,네트워크 레벨 .. Next.js 에서 Client Side Fetch 를 React-Query + 기본 Fetch 조합으로 사용하기 구현 조건1. axios 대신 기본 fetch 를 사용2. Authorization 에 accessToken 을 담아서 보내는 AuthFetch, 그냥 기본 fetch 인스턴스가 필요함3. 로그인 후 받은 accessToken은 cookie 에 httpOnly 쿠키로 저장 -> js 단에서 가져다 쓸 수 없음 - httpOnly 쿠키로 저장하지 않으면, next-cookie 의 getCookie() 등으로 자유롭게 가져다 쓸 수 있다.4. next-auth의 useSession 을 통해서 accessToken 에 접근 가능 - next-auth 의 useSession 을 통해서 접근할 수 있기 때문에 use** 형태의 훅 내부에 메서드를 사용하는 패턴으로 구현 단계별 구현 1. 기본 fet.. Next.js 의 Fast Refresh 는 하나의 브라우저 세션과만 동작한다 Next.js 프로젝트에서 http서버와 https 서버를 둘다 띄워서 사용하고 있는 상황 세팅 참고 : [Next.js] 로컬(localhost)에 https 적용하기 [Next.js] 로컬(localhost)에 https 적용하기mkcert라는 프로그램을 이용해서 로컬 환경(내 컴퓨터)에서 신뢰할 수 있는 인증서 만들 수 있다.로컬(내 컴퓨터)을 인증된 발급 기관으로 추가(localhost로 대표되는) 로컬 환경에 대한 인증서를 만velog.io 크롬에서 브라우저에서 2개의 탭을 열었음 http://localhost:3000 https://localhost:3001 처음에는 https 만 코드 fast refresh 가 적용이 되지 않는 줄 알았다근데, 코드상에 차이점이 없어서 뭐지 삽질하면서 서.. 이전 1 2 3 4 ··· 12 다음
