분류 전체보기 (204) 썸네일형 리스트형 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 가 적용이 되지 않는 줄 알았다근데, 코드상에 차이점이 없어서 뭐지 삽질하면서 서.. 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.. [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.. [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. -> 카테고리 분류는 서비스 내용상 핵심적이고 고정.. [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({.. [1D1C] 0220 기록 * 몇일 빼먹어버렸다. 하지만 다시 시작하는 것이 중요 [1D1C] 0215 기록 * 12시 넘어서...again [1D1C] 0214 기록 * 12시 넘어가서 15일로 기록됨 [1D1C] 0213 기록 *12시 넘어가서 14일로 기록됨.. 이전 1 2 3 4 5 ··· 21 다음
