Create and Deploy a Blog width Next.js and Contentful.
예전에 학과 웹사이트 개발 을 진행하면서, Headless CMS에 대해 공부할 일이 곧 있을 거라고 했는데 그 날이 다가왔다. 지금 친구들과 함께 일하고 있는 스튜디오 YinYang의 포트폴리오 웹사이트 개발을 하게 되었고, 이 참에 디자이너 친구들도 컨텐츠 관리를 용이하게 할 수 있도록 CMS를 써보기로 했다.
광은씨의 조언으로, 리액트가 아닌 Next를 택했다. Next.js가 무료 웹 호스팅 서비스인 Vercel과 같이 사용하면 용이하다고 해서였다. Vercel은 Gatsby와 비슷하다고 하는데, 또 Contentful과 같은 Headless CMS와 결합하기에 편하다고 한다. Contentful과 같은 유사한 서비스로는 Prismic, Dato CMS 등이 있는데, 경험상 한국에서 데이터 서빙이 Contentful에서 압도적으로 빠르다고 한다. 장고 어드민을 한 번 경험해 보았으니, 이번에는 CMS를 이용하여 한번 시도해 보아야 겠다.
Next.js
기본적으로, React는 CSR (Client Side Rendering) 형태로 동작한다. 그런데 Next는 SSR (Server Side Rendering) 방식이다.
하나의 html 파일을 기반으로 자바스크립트를 이용해 동적으로 화면 구성을 바꾸어 주는 애플리케이션을 SPA (Single Page Application)이라고 하고, 사용자가 페이지를 요청할 때마다 웹 서버가 요청한 UI와 필요한 데이터를 html로 파싱해서 보여주는 웹 어플리케이션을 MPA (Multi Page Application) 이라고 한다.
보통 SPA 방식은 CSR, MPA 방식은 SSR 방식이다.
더 구체적인 내용은 여기를 참조한다.
Next의 경우는, SPA 방식을 채택하면서도 SSR 형태로 렌더링할 수 있다. React는 SPA 형태로 웹페이지를 렌더링 하는데, 이때 SSR 형태로 동작하려면 브라우저가 Html (Static Page)를 먼저 다운로드 해서 바로 사용자에게 보여준 후, 이후 JavaScript 코드를 불러온다.
Vercel
Vercel은 다양한 플랫폼을 https 보안 형태로 배포해 준다. 개인 github page를 연결하고, 레포지터리를 연결하면 지정한 브랜치를 기준으로 빌드하여 배포해 준다. Vercel 서비스 자체에서 선택한 레포지터리의 Push를 감지하기 때문에, 자동 빌드-배포 서비스를 간단히 사용할 수 있다.
코드를 빌드 및 배포하면, Global CDN에 배포된다. 정적 웹사이트, Jamstack 및 서버리스 함수까지 지원한다. Jamstack이란, JavaScript + API + Markup (HTML)의 머릿글자를 딴 Jam, 그리고 운영체제/서버 등 백엔드 관련한 부분들을 신경쓰지 않아도 된다는 의미에서의 Stack을 합성한 용어다.
정리하자면, JavaScript, API, Markup 즉 프론트엔드 개발자의 도구들만 가지고 사이트를 배포할 수 있게 해 준다.
사용법은 여기에 잘 정리되어 있음.
Contentful
Headless CMS (Content Management System). 쉽게 말해 백엔드 (장고 어드민)에서 관할하던 영역을 대리해 준다. 개발이 친숙하지 않은 일반 사용자들이 웹사이트에 컨텐츠를 올려서 반영되고 싶게 만들 때, 컨텐츠와 관련한 API를 만들어 제공해 준다고 생각하면 편하다.
진행 상황 및 공부해야 할 내용들
현재 Xd로 잡아준 디자인에서 Markup 부분을 반영하는 것을 진행하고 있다. 기본적인 틀은 잡아두었고, 반응형 뷰의 스케일 Breakpoint를 어떻게 하면 똑똑하게 진행할지에 대해 조금 더 고려해 봐야 한다.
광은님이 주신 조언으로, CSS 변수들을 JavaScript 단에서도 사용 가능하도록 하려면 리액트에서 컨텍스트를 만들고 이를 Provider로 각 컴포넌트들에서 사용할 수 있도록 만들어 주는 방법이 있을 것 같다.
Next.js의 사용법은 튜토리얼을 보면서 제법 학습해 둔 상태이고, Contentful에서 데이터 필드를 생성한 이후 Next와 연동하는 것을 진행해야 한다.
진행 계획
빌드 및 배포, 시스템 통합
- Contentful 데이터 필드 생성
- 데이터 필드 생성 후 코드와 연동 (테스트)
- Vercel, Github 연동 및 배포
- 매뉴얼 공유 및 데이터 업로드
뷰
- 반응형 Breakpoint 설정 및 적용
- 디테일한 디자인 수정
이번 주까지 테스트 및 Production 모드 배포를 끝내고, 이후 쇼핑몰 프로젝트를 시작하도록 한다!
