개발/React 5

[Next.js] Next js를 배워보자 #5 - Pre-rendering과 Data Fetching

이번장에선 외부 데이터를 어떻게 fetching하는지 살펴본다. 이번 장에서는 이번 장에선 아래와 같은 내용을 살펴본다. Next.js 의 pre-rendering 피쳐를 살펴본다. pre-rendering의 두가지를 살펴본다. Static Generation Server-side Rendering 데이터 유무에 따른 static Generation방식을 살펴본다 [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) 와 사용법에 대해 알아본다. [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#get..

개발/React 2020.09.10

[Next.js] Next js를 배워보자 #4 - Assets, Metadata와 CSS

이번엔 Css 스타일을 입혀보도록 하자 Next.js has built-in support for CSS and Sass. For the purposes of this course we will use CSS. Next.js는 CSS와 Sass가 내장되어있다. 이번엔 css를 사용해볼 예정이다. 어떻게 Next.js가 이미지나 메타데이터와 같은 정적 assets을 다루는지 알아본다. 목표 이번장에선 아래와 같은 내용을 배울것이다. 어떻게 정적 파일을 Next.js에 추가하는지 어떻게 각 페이지별안에 내용을 커스텀 하는지 어떻게 CSS 모듈을 사용하여 React Component를 재사용 하는지 어떻게 global CSS를 적용하는지 몇가지 Next.js에서의 스타일링 팁 좀더 자세한 내용을 보고싶다면 C..

개발/React 2020.09.10

[Next.js] Next js를 배워보자 #1

React나 angular, vue 같은 프레임워크(라이브러리) 를 보면 서버에서 완성된 HTML, CSS, Js 파일을 내려주는것이 아니라 간단한 뼈대만 내려주고, 클라이언트 측에서 Javascript를 사용하여 화면을 그리는 클라이언트 사이드 렌더링 방식을 주로 사용한다. 서버사이드 렌더링과 클라이언트 사이드 렌더링은 각각의 장단점을 가지고 있고, 특징에 맞게 잘 활용해야 한다. 그중, React를 사용할때 서버사이드 렌더링이 필요한경우 Next.js를 자주 접하게 되는데, 어떤 특징이 있고, 어떻게 사용하는지 간단히 살펴보고 맛을 보도록 하자. https://nextjs.org/

개발/React 2020.09.10