전체 글31 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. 리액트 프로젝트 github pages에 배포하기 개요 완성된 리액트 프로젝트를 github pages에 배포하는 법에 대해 알아보겠다. 기존에는 localhost:3000 등 로컬 환경에서 완성된 프로젝트를 확인 하였는데, 다른 사람들이 볼 수 있도록, 배포하는 법에 대해 간단히 알아보겠다. 프로젝트 생성 배포를 위해서, CRA환경으로 프로젝트를 하나 생성 하였다. npx create-react-app react-project-deploy 로컬 저장소에 commit 하기 CRA 으로 리액트 프로젝트를 생성하셨다면, 기본적으로 git 저장소가 생성 된다. 만약 git 저장소가 없다면 다음 명령어를 입력해야한다. git init 이제 리액트 프로젝트의 파일 및 폴더의 추가 및 변경 사항을 로컬 저장소에 기록을 하기 위해, 다음과 같이 명령어를 입력하자. .. 2022. 2. 1. 이전 1 2 3 4 5 ··· 8 다음
