Frontend (2) 썸네일형 리스트형 [Next.js]Collecting page data .[AxiosError: Request failed with status code 502] 빌드 도중 에러가 발생하였다. Collecting page data .AxiosError: connect ETIMEDOUT 먼저 발생했던 에러인데, 서버로 연결이 안되고 있어서 발생하는 에러였다. 그래서 EC2를 먼저 열어주었다. 열고 나서 다시 빌드를 하니 새로운 에러가 발생. Collecting page data .[AxiosError: Request failed with status code 502] AxiosError: 502가 뜬 것을 보니 EC2만 열어놓고 백엔드 서버를 실행 안시켰더니 다시 생긴 빌드시 발생한 에러였다. 그래서 먼저 백엔드 서버를 먼저 열어주고 다시 빌드를 하니 빌드가 성공적으로 되었다. 빌드 과정에서 왜 굳이 확인하는지는 모르겠다만, 문제는 해결. [React(Next.js)]공통 레이아웃 설정하기 (with TypeScript) 기존에 공통 레이아웃 설정하는 방식이 있긴 했는데, 프로젝트를 진행하다가 버전 문제인지 Hydration 에러가 발생했다. 찾아보니 서버사이드에서 pre-rendering된 React 트리와 브러우저에서 처음 렌더링되는 React 트리가 매칭이 안되서 Hydration 에러가 발생한다고 한다. built-in-css문제일 수도 있다고 해서 프로젝트에 emotion.js를 사용하고 있어서 emotion을 빼보기도 했는데, css문제는 아니었고, 공통 레이아웃을 불러오는 부분에서 매칭이 안되서 생기는 문제였다. 그래서 공통 레이아웃을 공식문서 형태와 비슷하게 다시 바꿔보기로 했다. 코드 먼저, 레이아웃 파일을 생성한다. components/Layout.tsx import React, { ReactNode }.. 이전 1 다음
