전체 글 (204) 썸네일형 리스트형 [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.. 이전 1 2 3 4 5 ··· 68 다음
