[React🌀] Next JS 13 업데이트 사항 총 정리 📄
들어가며 안녕하세요. 오랜만에 포스팅을 하네요. 😃 사실 react 와 svelte 를 비교하는 글을 준비하고 있었는데, 아무래도 제가 svelte에 관한 내용을 쓰기에는 사용경험이 너무 적더라구요. 이미 관련된 좋은 글도 너무 많은데 차별성도 없고 내용도 결국 똑같아지는 것 같고.. 몇 가지 개인적인 일들이 있기도 했구요. 아무튼 군소리는 여기까지 하고, 바로 시작하겠습니다! 이 포스팅의 내용들은 99% 이상이 아래 링크된 Next JS의 공식 블로그 내용을 바탕으로 하고 있을 테니, 영어에 자신 있는 분들은 그냥 블로그 글 읽는게 더 도움이 되실 수도 있습니다 😄 Next JS 13 Next JS 12가 공개된지 1년쯤 되었네요 벌써 .. 드디어 Next js 13이 공개되었습니다! https://..
2022. 10. 31.
[React🌀] Next JS 12 업데이트 사항 총 정리 📄
Next JS 12 React와 Next JS 는 끊임없이 변화중이죠.. 괜히 프론트엔드의 메이저 프레임워크로 자리잡혀가는 게 아닌 것 같습니다. Next JS 12 문서 React 18 은 여기 엄청 잘 정리가 되어 있음 Next JS 12 에는 어떤 변화가? Next JS 공식 블로그 에도 깔끔하게 잘 정리가 되어 있습니다. Rust Compiler rust 기반의 컴파일러로 바꿈 refresh 속도가 3배 빌드 속도가 5배 사용해보니 실제로 체감되는 속도 👍 React 18 Support React 18 버전을 지원 Server-Side Streaming Suspense 및 SSR 스트리밍 지원 HTTP 스트리밍을 통해 페이지를 서버 렌더링 가능 말 그대로 해석한 것이긴 한데, 아마 React 가 ..
2021. 12. 6.
[React] Next JS Pre-rendering / Static Generation(getStaticProps ) / SSR(getServerSideProps)
목차 기본 개념 Static Generation Static Generation 은 언제 사용될까? 예시 External Data 가 없는 경우 External Data 가 존재하는 경우 페이지가 External Data에 종속되는 경우 Fallback 기타 Server-side Rendering 예시 참고 ----- 기본 개념 Next JS 는 모든 페이지를 pre-rendering 한다. 즉, Client-side JS 로딩 방식으로 하지 않고 HTML 을 미리 만든다. 성능개선, SEO 최적화 Static Generation 과 Server-side Rendering 방식으로 나뉜다. 성능상의 차이로 인해 Static Generation 방식이 권장된다. 각각의 방식중 하나만 골라야되는 것이 아니라..
2021. 3. 8.
[React] Next JS 동적 라우팅 / Dynamic Routing
목차 동적 라우팅 (Dynamic Routing) 일반적인 사용 주의할 점 Multiple segment 기타 사용 예시 Catch all routes Optional 하게 사용하기 동적 라우팅 (Dynamic Routing) 일반적인 사용 pages/post/[id].js ⇒ post/1 로 접근가능 예시 1 import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { id } = router.query return Post: {id} } export default Post 예시 2 pages/post/[id].js 에 대해 post/abc?test=123 로 접근했을 때 갖는 query ob..
2021. 3. 8.
[React🌀] Next JS 13 업데이트 사항 총 정리 📄
들어가며 안녕하세요. 오랜만에 포스팅을 하네요. 😃 사실 react 와 svelte 를 비교하는 글을 준비하고 있었는데, 아무래도 제가 svelte에 관한 내용을 쓰기에는 사용경험이 너무 적더라구요. 이미 관련된 좋은 글도 너무 많은데 차별성도 없고 내용도 결국 똑같아지는 것 같고.. 몇 가지 개인적인 일들이 있기도 했구요. 아무튼 군소리는 여기까지 하고, 바로 시작하겠습니다! 이 포스팅의 내용들은 99% 이상이 아래 링크된 Next JS의 공식 블로그 내용을 바탕으로 하고 있을 테니, 영어에 자신 있는 분들은 그냥 블로그 글 읽는게 더 도움이 되실 수도 있습니다 😄 Next JS 13 Next JS 12가 공개된지 1년쯤 되었네요 벌써 .. 드디어 Next js 13이 공개되었습니다! https://..
[React🌀] Next JS 12 업데이트 사항 총 정리 📄
Next JS 12 React와 Next JS 는 끊임없이 변화중이죠.. 괜히 프론트엔드의 메이저 프레임워크로 자리잡혀가는 게 아닌 것 같습니다. Next JS 12 문서 React 18 은 여기 엄청 잘 정리가 되어 있음 Next JS 12 에는 어떤 변화가? Next JS 공식 블로그 에도 깔끔하게 잘 정리가 되어 있습니다. Rust Compiler rust 기반의 컴파일러로 바꿈 refresh 속도가 3배 빌드 속도가 5배 사용해보니 실제로 체감되는 속도 👍 React 18 Support React 18 버전을 지원 Server-Side Streaming Suspense 및 SSR 스트리밍 지원 HTTP 스트리밍을 통해 페이지를 서버 렌더링 가능 말 그대로 해석한 것이긴 한데, 아마 React 가 ..
[React] Next JS Pre-rendering / Static Generation(getStaticProps ) / SSR(getServerSideProps)
목차 기본 개념 Static Generation Static Generation 은 언제 사용될까? 예시 External Data 가 없는 경우 External Data 가 존재하는 경우 페이지가 External Data에 종속되는 경우 Fallback 기타 Server-side Rendering 예시 참고 ----- 기본 개념 Next JS 는 모든 페이지를 pre-rendering 한다. 즉, Client-side JS 로딩 방식으로 하지 않고 HTML 을 미리 만든다. 성능개선, SEO 최적화 Static Generation 과 Server-side Rendering 방식으로 나뉜다. 성능상의 차이로 인해 Static Generation 방식이 권장된다. 각각의 방식중 하나만 골라야되는 것이 아니라..
[React] Next JS 동적 라우팅 / Dynamic Routing
목차 동적 라우팅 (Dynamic Routing) 일반적인 사용 주의할 점 Multiple segment 기타 사용 예시 Catch all routes Optional 하게 사용하기 동적 라우팅 (Dynamic Routing) 일반적인 사용 pages/post/[id].js ⇒ post/1 로 접근가능 예시 1 import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { id } = router.query return Post: {id} } export default Post 예시 2 pages/post/[id].js 에 대해 post/abc?test=123 로 접근했을 때 갖는 query ob..