Next.js
-
NextJS getServerSideProps SSR에서 HOF를 이용한 auth 검증Next.js 2024. 9. 5. 18:25
page router 기반에서 SSR 사용을 위해 사용 되는 getServerSideProps여기서 굉장히 불편한 상황이 발생하는데 바로 원하는 ssr에 사용될 로직을 사용하지도 않았는데 accessToken과 cookie를 넣어서 인증된 사용자인지 검증하는 로직을 ssr 사용되는 모든 페이지에 사용 되야 하는 번거로움이 따르고 아주 많은 중복 코드가 발생한다.withAuthServerSideProps.ts로그인 상태일경우 acceeToken을 header Bearer 토큰에 넣어주고 refreshToken을 cookie에 넣어준 상태의 axios 인스턴스를 반환해주고 로그인 상태가 아닐경우 로그인 페이지로 이동시키는 고차함수GroupDetailInviteCodePage.tsx 에서 SSR 사용시 이미..
-
NextJS에서 SSR 렌더링 사용시 redirect시 useLayoutEffect 사용 경고Next.js 2024. 9. 5. 16:13
Reference- ( https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85 ) SSR으로 axiosRefreshAPI가 실패 할 경우 reriect를 이용하여 메인 페이지로 보내게 SSR 실행하게 만들었다. 해당 Home 컴포넌트가 호출 되면서 useLayoutEffect에 경고 에러가 발생했다. Reference를 참고하여 2번째 방법으로 해결했다. function Parent() { const [showChild, setShowChild] = useState(false); // Wait until after client-side hydration to show useEffect(() => { setShowChild(tr..
-
<w> [webpack.cache.PackFileCacheStrategy]Next.js 2024. 2. 14. 12:18
해당 에러는 내가 next.config.js 파일을 수정 한 이후에 발생했다. 개발환경은 docker이고 Dockerfile은 다음과 같다. FROM node:18-alpine3.18 WORKDIR /app COPY *.* /app RUN npm install COPY . /app RUN npm run build CMD [ "npm" , "run" , "dev"] 열심히 구글링 해본 결과 해당 오류를 제거 하려면 .next파일을 delete 한후 다시 docker 파일을 실행하니까 해결 됬다!
-
프론트에서 restapi를 이용한 http 통신을 할때 4xx번대 에러 또는 500번대에서 network 오류가 발생 했을때 크롬의 network 오류 표시Next.js 2024. 2. 3. 15:05
backend에서 일부러 403 에러를 던지게 구성 했을때 특정한 에러를 감지하기 위해 try catch 또는 .catch 등 특정 에러를 처리 하기 위해 제공 되는것들을 활용한다. 그렇게 했을때 console.log를 출력 해보면 Axios를 이용 했을때 catch 문이 실행 되면서 AxiosError를 출력 해볼 수 있고, 이것을 통해서 에러를 핸들링 하거나 처리 할 수 있다. 근데 나는 항상 프론트 개발을 하면서 크롬 브라우저에서 해당 빨간색 에러 network에러가 보이는게 너무 거슬렸다. 특히나 accessToken이 만료되어 refreshToken을 이용하여 다시 accessToken을 발급 하는 로직을 구성 했을때 뭐만 하면 401 에러가 크롬 브라우저 콘솔에 뜨는게 거슬렸다. 결론부터 말하..
-
(삽질금지 시리즈) Nextjs getServerSideProps에서 SSR 할때 react-query 사용 hydrate fetchQuery와 prefetchQueryNext.js 2024. 2. 2. 13:23
개발 하면서 ssr를 이용하여 api를 요청 할때 try catch 구문을 이용하여 restapi의 error상태에 따라 error 페이지로 보내줄려고 했다. ssr에서 react-query를 사용 할때 hydrate 방법을 사용 했는데, 굉장히 흥미로운게 있었다. react-query를 ssr에서 사용 할때 const queryClient = new QueryClient(); await queryClient.fetchQuery await queryClient.prefetchQuery 이렇게 사용하는데 - fetchQuery - perfetchQuery의 차이는 fetchQuery : 리턴값이 있다. prefetchQeury: 리턴값이 없다. fetchQuery : Promise prefetchQeury..
-
(삽질금지 시리즈) Docker 환경에서 NextJS SSR 사용시 주의할점Next.js 2024. 2. 1. 20:48
Next.js13에서 docker nginx환경에서 getServerSideProps(ssr) api 호출 에러 404 not found 개발 환경 구조는 다음과 같다. docker-compose nginx client backend Next.js13에서 docker nginx환경에서 getServerSideProps(ssr) api 호출 에러 404 not foundnginx에서 localhost:3000일때 client를 localhost:3000/api를 호출 하면 baceknd를 호출 하게 proxy 설정을 해주었다. export const getServerSideProps = (async context => { const queryClient = new QueryClient(); const { ..
-