SimCoding

[ Apollo] apolloClient nextjs 환경에서 network-only 가 작동하지 않는 현상 해결 apolloClient - nextjs 환경에서 network-only가 작동하지 않는 버그가 있는 것 같습니다. 이로인해 첫 request 이후, 캐쉬가 생기면 더 이상 request를 보내지 않게 되어 불편함이 발생합니다. 이를 해결하기 위한 방법을 알아보겠습니다. > 서버사이드 환경과 클라이언트사이드 환경을 구분해 fetchPolicy를 설정합니다. 서버사이드 환경에서는 'network-only' 가 작동하지 않기 때문에 , 서버사이드 환경에서는 'no-cache' 를 적용하고 클라이언트사이드 환경에서는 'network-only'를 적용해 줍니다. fetchPolicy: typeof w..

[Nextjs] nextjs middleware활용해서 redirect구현하기 안녕하세요. 이번 포스팅에서는 nextjs 에서 middleware를 활용해서 redirect를 구현하는 방법에 대해 알아보겠습니다. middleware에 작성된 코드는, request가 완료되기 전에 작동합니다. 이를 활용해, response를 중간에 가로채 수정할 수 있습니다. response를 중간에 가로채서 url을 변경해주면 redirect기능을 구현할 수 있겠죠? 자주 사용되는 예시를 통해, redirect 기능을 구현하는 방법에 대해 알아보겠습니다. 아래 예시코드는 로그인이 되어있지 않은 유저가 페이지에 접근하려고 할 때, root페이지로 redirect를 시키는 코드입니다. // middleware.ts impo..

[Nextjs] userAgent 에서, 브라우저 환경 구분하는 방법 이번 포스팅에서는 userAgent에서 브라우저 환경을 구분하는 방법에 대해 알아보겠습니다. 안드로이드, 아이폰, 오페라 , 윈도우 등 다양한 브라우저 환경이 존재하는데 브라우저에 환경에 따라 다른 코드를 적용해 주어야 할 때가 있습니다. 브라우저 환경은, request-header에 담겨있는 userAgent를 통해 확인할 수 있고, 이를 정규표현식을 통해 원하는 환경별로 구분해서 사용할 수 있습니다. 아래 예시코드를 통해 확인해 보겠습니다 ! const userAgent = typeof navigator === 'undefined' ? 'SSR' : navigator.userAgent; const isAndroid = Boolean..

[Error] AWS S3 NEXTJS 배포 후, index외 페이지에서 새로고침 할 때 에러가 뜨는 문제 해결. 안녕하세요. 오늘은 AWS S3에 NEXTJS를 배포하면서 생긴문제와 해결방법에 대해 포스팅 하려고 합니다. > 문제 Index페이지 이외의 페이지에서 새로고침, 또는 url로 직접 접근하려고 할 때 에러가 발생했습니다.. SPA 을 S3에 배포할 때, 종종 발생하는 문제 인 것 같더라구요.. ! > 문제 파악 Router경로가 위의 이미지에서 보이는 것처럼 '/post/washingMachine' 으로 설정되어 있는데요, 빌드하는 과정에서 /post/washingMachine/index.html 파일로 build가 되는 것을 발견했습니다. 그런데 S3에서는, 이걸 자동으로 찾아주지 못하는 ..

NEXTJS 환경 REDUX 초기셋팅 코드예시 Redux 관련 라이브러리 설치. npm i next-redux-wrapper redux react-redux redux-devtools-extension 초기상태 및 리듀서 설정 // reducers/index.js import { HYDRATE } from "next-redux-wrapper"; const initialState = { user: {}, post: {}, }; const rootReducer = (state = initialState, action) => { switch (action.type) { case HYDRATE: console.log("HYDRATE", action); return { ...state, ...action.payl..