React27 Next.js 외부 Data 가져오기(Fetching) 개요 이번 포스트는 이전 포스트의 내용에서 이어 설명하기 때문에, 저번 포스트에 대한 내용을 읽지 않았다면 Tistory 또는 Github에 작성된 글을 먼저 보도록 하자. Next.js 9.3 이전 버전 까지는 Data Fetching을 하기 위해 getInitialProps 하나로 사용 되었지만, 이후 버전 부터는 getStaticProps, getStaticPaths, getServerSideProps 세가지로 세분화 되었다. 이 세가지에 대해 알아보기 전, Next.js 의 중요한 컨셉중 하나인 Pre-rendering에 대해 먼저 살펴 보겠다. Pre-rendering 기본적으로 Next.js의 모든 페이지는 Pre-rendering 되는데, 이것은 Next.js가 각각의 HTML 페이지를 생성.. 2022. 4. 9. Next.js Dynamic URl 사용해보기 개요 저번 포스트 내용을 이어서 URL을 동적으로 사용하는 방법에 대해 알아보자. Next.js 에서 Route에 대한 내용을 못봤더라면 Tistory 또는 Github에서 확인 할 수 있다. 지금 까지 정적(static)으로 라우트를 다루었지만, 이번에는 조금 더 깊게 동적(dynamic)하게 다루어 보자. 실제 앱에서는 동적인 컨텐츠를 표시하기 위해 페이지를 동적으로 만들어야 한다. Next.js에서는 query 파라미터와 Pathname 파라미터를 사용 한다. 그렇다면, query 또는 pathname 파라미터란 무엇일까? 쿼리 파라미터 쿼리 파라미터는 기본적으로 /post?title=Hello,Next.js 와 같은 형태를 지니고 있다. 간단한 예제를 통해 살펴보자. 예제코드는 이전 포스트에서 다.. 2022. 4. 7. Next.js 페이지 이동 및 공용 컴포넌트 사용하기 개요 Next.js 환경에서 페이지를 이동하는 방법과 공용 컴포넌트를 사용하는 방법에 대해 알아보자. 저번 포스트인 Next.js의 개념에 대한 내용에 이어서 글을 작성 하므로, 이전 내용을 참고 하자. [Github] (https://github.com/dlsgh120/blog-contents/tree/main/react/24-SSR-CSR-Nextjs) [Tistory] (https://dlsgh120.tistory.com/58) 라우팅에 대한 내용을 알아보기 전, Next.js 환경 세팅이 되어 있지 않다면, 환경 세팅을 하자. 페이지 라우팅 Next.js는 기본적으로 라우터를 내장 하고 있다. 다음과 같이 여러 페이지를 만들어 라우팅 하는법을 알아보자. pages폴더에 about.tsx 파일을 생.. 2022. 3. 26. SSR 과 CSR 그리고, Next.JS에 대해 알아보기 개요 리액트의 서버사이트렌더링를 도와주는 프레임워크인 Next.js 에 대한 개념 및, 주요기능 그리고 간단한 세팅방법에 대해 알아보도록 하자. React도 Server-Side-Rendering을 고려하여 설계 되었기 때문에, 자체적으로 구현이 가능하지만, 개발환경을 만들기 위해서는 생각보다 복잡하다. 하지만 이러한 복잡한 문제들을 Next.js를 사용하여 아주 쉽게 해결할 수 있다. 그렇다면 SSR이 무엇이며, 왜 사용할까? SSR vs CSR SSR은 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근 할때, 서버에 페이지에 대한 요청을 한다. 서버는 HTML, View와 같은 리소스 들을 어떻게 보여줄지 해석하고, 렌더링 하여 사용자에게 반환 한다. 이때, 웹서버에 요청할 때 마다.. 2022. 3. 12. 이전 1 2 3 4 ··· 7 다음
