Skip to content

Commit

Permalink
[docs] 콘텐츠 업데이트
Browse files Browse the repository at this point in the history
  • Loading branch information
suu3 committed Dec 10, 2024
1 parent b5fc522 commit 13a1d50
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ React.js 프로젝트를 Next.js 프로젝트로 마이그레이션 할 일이

3번의 경우 페이지마다 getInitialProps나 getServerSideProps는 하나만 만들 수 있는데, 이미 next-i18n(지역화) 설정 때문에 getServerSideProps를 사용할수밖에 없는 것도 있었고, 추후 react-query의 SSR을 적용하게 될 경우를 생각해서 getServerSideProps를 선택하게 됐다.

이 과정에서 엄청나게 많은 아티클을 찾아봤었는데 가장 도움이 됐던건 이 논의 였던 것 같다. ([https://github.com/vercel/next.js/discussions/10925](https://github.com/vercel/next.js/discussions/10925))
이 과정에서 엄청나게 많은 아티클을 찾아봤었는데 가장 도움이 됐던건 [**이 논의**](https://github.com/vercel/next.js/discussions/10925) 였던 것 같다.

### getServerSideProps에서 guard처리하기

Expand Down Expand Up @@ -92,7 +92,7 @@ export const getServerSideProps = withAuthServerSideProps()
해당 프로젝트는 다른 프로젝트와 GNB를 공유하고 있었는데, 링크를 이동하면서 로딩이 걸리는 것이 사용자의 사용성을 해친다는 생각이 들었고 ssr 처리를 하기로 했다.
React-query의 SSR 문서([https://tanstack.com/query/v4/docs/framework/react/guides/ssr](https://tanstack.com/query/v4/docs/framework/react/guides/ssr))를 보고 세팅했으며, 구성하면서 겪은 이슈에 대해 공유하고자 한다.
[**React-query의 SSR 문서**](https://tanstack.com/query/v4/docs/framework/react/guides/ssr)를 보고 세팅했으며, 구성하면서 겪은 이슈에 대해 공유하고자 한다.
### 서버 사이드에서 쿠키처리하기
Expand All @@ -119,9 +119,7 @@ export const getServerSideProps = (async (context: GetServerSidePropsContext) =>
QueryKey에 쿠키 값이 들어가야하는 경우, 서버에서 초기 HTML을 생성할 때 쿼리 키가 undefined로 뜨면서 미리 생성해 둔 데이터를 가져올 수 없기 때문에 Hydration 불일치 문제가 생겼다.
그래서 서버 단과 클라이언트 단에서 동일한 axios를 사용할 필요가 생겼고, 같은 고민을 한 사람이 없을까 찾아보다가 해당 이슈를 발견하게 됐다.
https://github.com/axios/axios/issues/4976
그래서 서버 단과 클라이언트 단에서 동일한 axios를 사용할 필요가 생겼고, 같은 고민을 한 사람이 없을까 찾아보다가 [**해당 이슈**](https://github.com/axios/axios/issues/4976)를 발견하게 됐다.
위 이슈를 참고하여 다음과 같이 getServerSideProps를 구성했다.
Expand Down Expand Up @@ -180,7 +178,7 @@ axios.interceptors.request.use(
### largePageData
next.js에서는 페이지 데이터가 128kb를 넘으면 성능에 문제 생길 수 있다고 경고를 띄우고 있다. (참고: [https://nextjs.org/docs/messages/large-page-data](https://nextjs.org/docs/messages/large-page-data))
next.js에서는 페이지 데이터가 128kb를 넘으면 성능에 문제 생길 수 있다고 경고를 띄우고 있다. [**참고 링크**](https://nextjs.org/docs/messages/large-page-data)
해당 경고의 경우, next.config.js에서 크기를 늘려 해결할 수 있다.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ category: "기타"
thumbnail: ./1.png
---

![배포된 이미지]("./1.png")
![배포된 이미지](./1.png)

최근에 유니티도 WebGL로 웹 배포가 가능하다는 걸 알게 됐다 (그것도 gh-page로!)

Expand Down

0 comments on commit 13a1d50

Please sign in to comment.