목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포 - 현재 글 Deploying a Next.js App▲ZEIT Now 를 통해 애플리캐이션을 매우 간단하고 확장 가능한 배포를 할 수 있습니다.Node.js를 통해서도 비교적 간단하게 가능합니다. 그럼 Next.js를 배포하는 방법에 대해 알아 봅시다 Setup아래의 예제를 다운로드해주세요git clone https://github.com/zeit..
목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 - 현재 글Next js 튜토리얼 8편 : 배포 Styling Components지금까지 컴포넌트의 스타일링을 많이 하지 않았습니다. 하지만 앱에는 스타일이 필요합니다.리엑트 앱에는 스타일을 적용하는 많은 기술들이 있으며, 크게 두가지의 방법으로 분류할 수 있습니다 1. 전통적인 css 파일 기반에 스타일링 (SASS, PostCSS 등)2. CSS in Js 스타일링 전통적인 css ..
목록Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 - 현재 글Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Fetching Data for Pages지금까지 next.js의 routing API를 활용하는 방법에 대해 배웠습니다. 이것만으로도 꽤 괜찮은 앱을 만들 수 있지만, 실제로 서비스 되는 앱들은 보통 데이터를 가지고 와서 앱에 뿌려주어야 합니다. Next.js에는 데이터를 가지고 오는 표준 API가 제공됩니다. 우리는 비동기 함수인 'ge..
목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 - 현재 글Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포 Clean URLs with Dynamic Routing이전 장에서 query string을 사용하여 동적 페이지를 만드는 방법에 대해서 배웠습니다. 이를 통해 링크를 눌러 이동하면 아래와 같이 나옵니다.http : // localhost : 3000 / post? title = Hello % 20Next.js 이번 장에서는 http : ..
목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 - 현재 글Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Create Dynamic Pages여러 페이지로 기본적인 next.js 앱을 만드는 방법을 알게 되었습니다. 그러나 실제 앱에는 동적 컨텐츠를 표시하기 위해 페이지를 동적으로 만들어야 합니다. next.js에는 여러 가지 방식이 있습니다 이번장에서는 query strings를 이용해 간단한 블로그 앱을 만들어 봅시다. Setup다음 예제를..
목차Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 - 현재 글Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Using Shared Components앞에서 Next.js에서 페이지를 만드는 방법에 대해 알게 되었습니다. 우리는 react 컴포넌트를 pages 폴더에 넣어서 페이지를 만들 수 있었습니다. pages폴더의 파일 이름은 url로 접근 할 수 있습니다. pages는 자바스크립트 모듈임으로 다른 자바스크립트 컴포넌트를 넣을 수도 있습니..
Next js 튜토리얼 2편 : 페이지 이동
목차Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 - 현재 글Next js 튜토리얼 3편 : 공통 컴포넌트 사용 Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Navigate Between Pages간단한 Next.js를 실행 시켜 보았습니다. 이전 편에서 index.js를 추가했던 것처럼 원하는 만큼 여러가지의 페이지를 추가할 수 있습니다.이번에는 about 페이지를 만들어 봅시다. pages/about.js를 생성하고 아래의 내용을 추가해 주세요 export default function ..
처음으로 next js를 사용하여 자사 홈페이지를 리뉴얼 하는 프로젝트를 진행했습니다.어떻게 학습하며 프로젝트를 진행했는지 정리하려 합니다. 가장 우선적으로 한 일은 next js docs에서 제공하는 튜토리얼을 학습했습니다.그에 따라 next js docs를 기반으로 작성하겠습니다목차Next js 튜토리얼 1편: 시작하기 - 현재 글Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포 NEXT.js의 기능 - 기본적으로 서버사이드 렌더링 지..