programming/Web (21) 썸네일형 리스트형 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.. [React] S3 Url 일정 시간 동안 not Found 리턴 되는 경우 Video 처리 방안 aws s3 버킷에 에셋을 올리고 나서 url 을 리턴 받는데, 비디오의 경우 일정 시간 동안 해당 url 이 not Found 를 리턴한다 아마도 인코딩 시간동안은 접근이 안되는 것으로 추정(카카오 스토리지도 동일한 현상) 해결방법으로 not Found 를 받는 경우 비디오 요소를 리랜더링 해서 해당 url 에 접근 재시도 일정 주기 & 제한된 횟수 만큼 solution1) 비디오 자체를 리랜더링 내부 state 를 태그의 key 로 사용하여 리랜더링 될 수 있도록 한다 태그의 onError 속성 사용 component/VideoWithErrorCheck.tsx import { useState } from "react"; export default function VideoWithErrorCheck({.. 소셜 로그인 - 카카오 로그인 CORS 에러 발생할 때 - NextJS (frontend) 별건 아니고... 초창기에 흔히 하기 쉬운 실수..(?) Access to fetch at 'https://accounts.kakao.com/login?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A3000%252Flogin%26through_account%3Dtrue%26client_id%3Dff30835bba2350bfe5fcf200c1eb4891' (redirected from 'https://kauth.kakao.com/oauth/authorize?client_id=ff30835bba2350bfe5fcf200c.. Frontend 관점 HTTP 응답 상태 코드(RESTful API) * 케이스를 마주할 때마다 업데이트 할 예정 Frontend 에서 처리하기 용이하면서도 RESTful API 관점을 잃지 않고 HTTP 응답 상태 코드를 어떻게 약속할지에 대한 생각과 의견이다. 상태 코드 Case 1. GET 조회 시 빈 데이터 - customer/order/{userId} : userId 에 해당하는 order 리스트를 조회했는데, 해당 유저의 오더 건이 없는 경우 - product?word={text} : 쿼리로 조회시 검색 결과가 없는 경우 [응답] status : 200 response : { result : true, data: [] } [추가 고려사항] - result : true / false 의 용도를 어떻게 정의해야 하는가? - 사실상 result : false 인 케이.. JWT 로 로그인 인증 구현하기 로그인 JWT(accessToken, refreshToken) 플로우 websequencediagrams 스크립트 title JWT login process (evaluation-iic) frontend->backend: login (/auth/access_token) backend -> backend : 유저 확인 (access_token, refresh_token 발급) backend->frontend: login 응답 (access_token, refresh_token) frontend -> frontend : localStorage에 저장(access_token, refresh_token) frontend-> backend: 데이터 요청 (ex) GET /evaluation/group) with .. AWS amplify 로 React 배포하기 (+ blank 빈 페이지 보이는 에러 잡기) npx create-react-app create-react-app으로 설치한 리액트 앱 레포지토리는 빌드 설정을 webpack 을 따로 설정해 주지 않아도 된다. AWS amplify는 풀스택 애플리케이션 구축, 배송 및 호스팅 지원하는 솔루션이다 그동안 클라우드 컴퓨터 생성을 위해 리눅스 서버를 하나 생성하고, 서버를 관리하는 방식으로 배포를 했다면, 그냥 github page 나 vercel 등 과 같이 레포지토리만 지정하고, 빌드 스크립트만 등록하면 알아서 배포를 다해준다 작업 방식은 공식문서나 제야에 널려있으니 참고 https://aws.amazon.com/ko/amplify/ 풀 스택 개발 - 웹 및 모바일 앱 - AWS Amplify 실시간 및 오프라인 기능이 포함된 iOS, Android,.. 구글 로그인 라이브러리 변경 - 4. 라이브러리를 사용하지 않고 google OAuth 로 direct 요청 방식 구현 정리할 내용 Google Identity 간단 개념 (+ oauth) 👉 링크 구글 라이브러리에서 변경되는 내용 👉 링크 authorization 에서 flow 선택 (gsi/client 라이브러리 사용) 라이브러리를 사용하지 않고 google oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 Direct Using Google OAuth 2.0 다시 한 번 목적을 생각해보자 나는 access_token 과 refresh_token을 사용하여 “로그인”을 이용할 것이다 refresh_token을 따로 관리해서 자동로그인 시켜주고 로그인이 거의 영원히 풀리지 않도록 하기 위해서 그리고 지금 라이브.. 구글 로그인 라이브러리 변경 - 2. 구글 로그인 라이브러리에서 변경되는 내용 정리할 내용 Google Identity 간단 개념 (+ oauth) 👉 링크 구글 라이브러리에서 변경되는 내용 authorization 에서 flow 선택 라이브러리를 사용하지 않고 googl oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 변경되는 내용 library의 deprecate 2023.01.04 Google Sign-in Javascript 라이브러리가 (gapi.auth2 모듈) deprecated 되었다. 2023년 3월 31일부터 다운로드가 안된다. Google Identity Services for Web을 사용해라. 출처 : Discontinuing authorizati.. 구글 로그인 라이브러리 변경 - 3. authorization flow (gsi/client 라이브러리 사용) 정리할 내용 Google Identity 간단 개념 (+ oauth) 👉 링크 구글 라이브러리에서 변경되는 내용 👉 링크 authorization 에서 flow 선택 (gsi/client 라이브러리 사용) 라이브러리를 사용하지 않고 googl oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 Google Identity Options(선택지) 이번 포스팅에서는 Sigin + API (목적은 access_token으로 구글 API 사용하기) -> 새로운 라이브러리 gsi/client 를 사용하는 구현방법에 대해서 정리해보려 한다. authorization 의 flow 지금 파트가 어디(authen.. 구글 로그인 라이브러리 변경 - 1. Google Identity OAuth 개념 구글로 로그인 시키는 방법은 잘 정리된 블로그들 많으니 참고 (필요 선행작업 : 구글 클라우드 플랫폼에서 클라이언트 ID 발급받기) 잘 쓰고 있던 구글 로그인 js 라이브러리가 deprecated 된다고 한다. 바꿔줘야한다. 바꿔주는 김에 OAuth 개념 정리 정리할 내용 Google Identity 간단 개념 (+ oauth) 구글 라이브러리에서 변경되는 내용 authorization 에서 flow 선택 라이브러리를 사용하지 않고 googl oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 Google Identity OAuth 2.0 개념 인증을 위한 개방형 표준 프로토콜(약속) 여러 서비스.. 이전 1 2 3 다음
