티스토리

tacit
검색하기

블로그 홈

tacit

tacit.tistory.com/m

꾸준히 성장하기

구독자
1
방명록 방문하기

주요 글 목록

  • 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.. 공감수 1 댓글수 0 2024. 10. 30.
  • 프론트에서 (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 은, 편의점을 선택하.. 공감수 2 댓글수 0 2024. 9. 6.
  • 위챗 페이 문서 통합 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.. 공감수 0 댓글수 0 2024. 8. 29.
  • [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 는 클라이언트 사이드에서 요청을 해도 잘만 나.. 공감수 1 댓글수 0 2024. 8. 21.
  • 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.. 공감수 0 댓글수 0 2024. 8. 13.
  • 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.. 공감수 0 댓글수 0 2024. 8. 2.
  • React Error Boundary Error boundaries do not catch errors inside event handlers. 공감수 0 댓글수 0 2024. 7. 23.
  • 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.. 공감수 0 댓글수 0 2024. 7. 17.
  • 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.. 공감수 0 댓글수 0 2024. 6. 17.
  • 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 와 에러메시지로 접근하여 에러를 핸들링하고,네트워크 레벨 .. 공감수 1 댓글수 1 2024. 6. 12.
  • 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.. 공감수 0 댓글수 0 2024. 5. 29.
  • 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 가 적용이 되지 않는 줄 알았다근데, 코드상에 차이점이 없어서 뭐지 삽질하면서 서.. 공감수 0 댓글수 0 2024. 5. 24.
  • Next App Router 환경 + MSW 설정 작업에 사용될 파일 구조 1. MSW 설치 npm i -D msw@1.3.2 [Usage] npx msw init [options] npx msw init public public 폴더 아래 mockServiceWorker.js 파일이 생성된 것을 확인 package.json 에 msw workinDirectory 세팅 된 것을 확인 "msw": { "workerDirectory": "public" } 2. MSW 구동 세팅 1. fake api/data 세팅 - api/mocks/fake-api/search-api.ts import { rest } from "msw"; import { validData } from "../fake-data/search-data"; // GET method인 /get-n.. 공감수 0 댓글수 0 2024. 4. 9.
  • [1D1C] 0319 기록 Dto 만들 때 기존에는 PickType 을 사용하여, 특정 스키마에서 필요한 필드만 골라서 dto 클래스를 만들었었다 import { PickType } from '@nestjs/swagger'; import { Member } from '../member.schema'; export class MemberRequestDto extends PickType(Member, [ 'email', 'password', 'name', ]) {} 스키마 구조가 드라이버 리뷰 테이블 / 우드 리뷰 테이블 / 아이언 리뷰 테이블... 이런식으로 테이블을 분리했다 (이게 올바른 판단인지는 아직까지도 확신이 서지 않는다) 이유는 종류별로 별점 키값이 다르고, 제출해야하는 부가 정보가 다르기 때문이다 어쨌든, 근데 리뷰 P.. 공감수 0 댓글수 3 2024. 3. 19.
  • [1D1C] 0318 기록 RESTful API 설계에 대한 고민 카테고리 별로 리스트를 가져오는 API 에서 category 정보를 어떻게 받을 것인가? - url 파라미터로 받을 것인가? /products/{category} - query 로 받을 것인가? /product?category=driver ChatGPT 답변 If the category is a fundamental part of the resource, using a URL parameter may be more appropriate. If the category is just one of many filtering options, using a query parameter may be more flexible. -> 카테고리 분류는 서비스 내용상 핵심적이고 고정.. 공감수 0 댓글수 0 2024. 3. 19.
  • [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({.. 공감수 0 댓글수 0 2024. 2. 23.
  • [1D1C] 0220 기록 * 몇일 빼먹어버렸다. 하지만 다시 시작하는 것이 중요 공감수 0 댓글수 0 2024. 2. 20.
  • [1D1C] 0215 기록 * 12시 넘어서...again 공감수 0 댓글수 0 2024. 2. 16.
  • [1D1C] 0214 기록 * 12시 넘어가서 15일로 기록됨 공감수 0 댓글수 0 2024. 2. 15.
  • [1D1C] 0213 기록 *12시 넘어가서 14일로 기록됨.. 공감수 0 댓글수 0 2024. 2. 14.
  • [1D1C] 0212 기록 공감수 0 댓글수 1 2024. 2. 12.
  • [1D1C] 0207 기록 공감수 0 댓글수 0 2024. 2. 7.
  • 소셜 로그인 - 카카오 로그인 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.. 공감수 0 댓글수 1 2024. 2. 7.
  • [1D1C] 0206 기록 공감수 0 댓글수 0 2024. 2. 6.
  • [1D1C] 0205 기록 카카오 소셜 로그인을 프론트부터 백 전체 플로우 테스트 중 공감수 0 댓글수 0 2024. 2. 5.
  • 리액트 에러 바운더리를 사용하여 에러 핸들링하기 (+ react-query) 에러 케이스 에러가 발생하는 원인 관점에서 두가지 케이스가 있다. 1. 프론트 에러 : 주로 Type Error, 참조 에러 등 2. 백엔드 API 에러 : HTTP 케이스와 웹사이트 로직에 따라서 세부로 나뉨 (Get / Post / Put / Delete .. 등) 처리 방안 1. 프론트 에러 a) axios 요청 전부터 에러 발생 (accessToken 없음) 👉 토큰 없음 메시지 Toast UI 표출 & 로그인 페이지로 이동 b) 참조에러 👉 발생하는 컴포넌트를 ErrorBoundary 로 감싸고 fallBackComponent 처리 + Uncaught Error 메시지 제공 2. 백엔드 API 에러 a) GET 조회 결과 빈 데이터 👉 에러로 처리하지 않고, 200 성공에 데이터가 없는 경우 보.. 공감수 0 댓글수 0 2024. 2. 5.
  • 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 인 케이.. 공감수 1 댓글수 1 2024. 2. 5.
  • [1D1C] 0202 기록 공감수 0 댓글수 0 2024. 2. 2.
  • [1D1C] 0201 기록 공감수 0 댓글수 0 2024. 2. 1.
  • [1D1C] 0131 기록 * 12시 넘어서 2/1로 기록되었다. 공감수 0 댓글수 0 2024. 2. 1.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.