개발 블로깅/Next.js
-
[2019.08.26] Next.js + Mobx + TypeScript 사용 예시개발 블로깅/Next.js 2019. 8. 26. 19:24
기존에 있던 Next.js + typescript 프로젝트에서 Mobx를 적용시켜 리펙토링을 해야했다. next.js에 mobx를 올리려 하니까, 새롭게 알게된 소소한 부분이 있어서 블로깅으로 남기려고 한다. # Next.js에서 mobx의 Provider 적용 기존의 React에서 Provider를 적용하려면, 최상한 index.js에서 태그를 이용하여 를 감싸는 방식으로 사용했다. 그러나 next.js에서는 최상단이 Pages폴더가 되는데, 여러개의 페이지가 있어서 어디에 적용해야 될지 모를 수가 있다. 그러나 사실 Pages 폴더 내 파일 중 제일 최상위 파일인 _app.tsx(js)가 따로 있다. _app.tsx 파일을 아래와 같이 생성한다. pages/_app.tsx import App, { C..
-
[2019.08.18] Next.js - React의 Server Side Rendering 프레임워크개발 블로깅/Next.js 2019. 8. 18. 20:28
우선 Next.js를 설명하자면, 리액트를 서버사이드 렌더링 방식으로 쉽게 구현할 수 있도록 환경을 제공해주는 프레임워크이다. # 서버사이드 렌더링이란? 서버사이드 렌더링이란, 클라이언트 단에서 작업하던 View와 Controller를 서버에서 직접 작업하는 것이다. 클라이언트 사이드 렌더링은, 리액트로 뷰를 만들고, 각 각 필요로 한 데이터를 서버 API에 요청하여 사용하는 방식으로, 클라이언트와 서버가 분리되어 가동되는 방식이다. 서버사이드 렌더링은 클라이언트에서 하는 모든 작업을 서버에서 작업하여 뷰를 사용자에게 보여주는 방식이다. Next.js를 사용하면, 리액트에서 이러한 서버사이드 렌더링을 쉽게 구현할 수 있다. # Next.js 기본 세팅 프로젝트 환경을 우선 구축한다. 프로젝트 폴더 생성과..