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