- 전체보기(63)
- JavaScript(16)
- typescript(11)
- React(10)
- CSS(5)
- 디프만(5)
- 인프런(5)
- 함수형 프로그래밍(5)
- error(4)
- Event(2)
- this(2)
- 웹 접근성(2)
- http(2)
- git(2)
- github(2)
- next.js(2)
- Box Model(1)
- 함수 컴포넌트(1)
- 호이스팅(1)
- react router dom(1)
- vmax(1)
- lifecycle(1)
- iterator(1)
- 제너레이터(1)
- vmin(1)
- head(1)
- MPA(1)
- float(1)
- react-qeury(1)
- vh(1)
- await(1)
- Concurrent UI(1)
- useEffect(1)
- Utility Types(1)
- event loop(1)
- revert(1)
- px(1)
- async(1)
- 렉시컬 스코프(1)
- 디버깅(1)
- tcp(1)
- 이터러블(1)
- const(1)
- let(1)
- var(1)
- 클로저(1)
- key(1)
- react-query(1)
- keep alive(1)
- State(1)
- reset(1)
- hook(1)
- MSW(1)
- 리렌더링(1)
- useLayoutEffect(1)
- CSR(1)
- SSR(1)
- 화살표 함수(1)
- strict mode(1)
- opacity(1)
- TIME_WAIT(1)
- stale closure(1)
- 클래스 컴포넌트(1)
- Fetch(1)
- 실행 컨텍스트(1)
- spa(1)
- display(1)
- rem(1)
- squash and merge(1)
- pull(1)
- rebase and merge(1)
- JSX(1)
- Props(1)
- optimistic update(1)
- em(1)
- 블록 스코프(1)
- Suspense(1)
- 컴포넌트 반복(1)
- Mocking(1)
- position(1)
- promise(1)
- visibility(1)
- vw(1)
- 함수 스코프(1)
- OOP(1)
- 스코프(1)
- merge(1)
- rebase(1)
Next 13 서버컴포넌트에서 클라이언트 컴포넌트로 props 전달할 때 Error: Maximum call stack size exceeded
에러 상황 next.js (app directory) 에서 서버 컴포넌트에서 클라이언트 컴포넌트로 pre-fetch 데이터 전달하던 도중에 Error: Maximum call stack size exceeded 문제가 생겼다. WHY? 왜 에러가 생겼는가에 대해 찾는데에 시간은 좀 걸렸지만, react-query를 잘 못 작성했나? hydrate, hydrate 구조를 잘 못 작성했나? 싶었지만 서버 컴포넌트에서 클라이언트 컴포넌트로 데이터를 전달할 때 문제가 생긴다는 사실을 알게되었다. 그때 app directory 공부를 할 때 [Next.js 공식문서](https://nextjs.org/docs/getting-started/react-essentials#passing-props-fr
How Next.js Works
Next.js 공식문서에서 How Next.js Works 부분 읽고 정리 How Next.js Works 💙 Next.js Compiler Next.js has a compiler written in Rust, a low-level programming language, and SWC, a platform that can be used for compilation, minification, bundling, and more. > 애플리케이션을 개발하여 프로덕션으로 만들려면 각 환경마다 고려할 사항과 목표가 다르기 때문에 Bundling, Compling, Minifying 을 해야한다. Next.js는 이러한 코드 변환을 처리해주어 더 쉽게 애플리케이션이 프로덕션으로 이동할 수 있도록 해준다. Next.js에 Rust로 작성된 Bundling, Compli