Next.js + Strapi 로 블로그 만들어보기(1) - 구성

Mopsy·2021년 1월 24일
2

블로그 처음부터 끝까지 만들어보기

프로젝트의 목적

나는 새로운 언어나 라이브러리를 익힐 때 블로그를 만들어보고는 하는데, 이번 프로젝트는 디자인부터 시작해 백엔드 / 프론트엔드 / 배포환경까지 한번에 진행해보고자 한다.

쭉 따라해보기만 해도 만들 수 있도록 세세하게 써볼 예정이니, 만약 자신의 블로그를 만들어보고 싶다면 한번 도전해봐도 좋을 것 같다.

사용할 스킬셋은 다음과 같다.

Skillset

Design

  • Figma

Backend

  • Strapi (Headless CMS Framework)
  • PostgreSQL

Frontend

  • Next.js (React.js SSR Framework)
  • Recoil (React State Management Library)
  • CSS module, SCSS

Deployment env

  • Backend - AWS ec2 instance
  • Frontend - AWS elasticbeanstalk
  • Database - RDS postgreSQL

개발환경

  • OS - macOS Big Sur 11.1
  • Node - Node.js 12.5.0
  • Shell - Iterm, zsh, oh-my-zsh

Tool, Framework, Library 소개

Figma

Figma는 웹 기반으로 만들어진 UI 디자인 툴이다. 웹 기반이어서 공유가 쉽고 공동작업이 가능한데다, Autolayout과 Varient가 추가되면서 Design System을 구축하고 관리하는 데에 가장 적합한 툴로 평가받고 있다.

https://www.figma.com/

브라우저에서 사용도 가능하고, OSX / window10 용 어플리케이션을 다운받아 사용하는 것도 가능하다.

Strapi

Strapi는 Headless CMS 로 코드 없이도 기본적인 REST API를 만들어준다. Strapi를 설치하면 Backend CMS 클라이언트를 실행할 수 있는데, 거기서 데이터베이스 테이블을 구성하고 콘텐츠를 관리할 수 있으며, 구성한 테이블마다 기본적인 API가 생성된다.

PostgreSQL

PostgreSQL은 확장 가능성 및 표준 준수를 강조하는 강력한 오픈소스 객체-관계형 데이터베이스 관리 시스템이다. 개인적인 취향이기도 하고 strapi에서도 RDS 연결 시 예제를 postgreSQL 로 제공하고 있어 선택했다.

Next.js

Next.js는 React의 SSR Framework로 유명한데, SSR 이외에도 프로덕션 레벨에서 필요로 하는 다양한 기능들을 기본적으로 제공해준다.

Recoil

React를 만든 Facebook이 개발한 상태관리 라이브러리다. 기존에는 redux와 mobX를 사용했는데 아무래도 React전용 라이브러리들이 아니었던지라 따로노는 느낌이 많이 들었는데, recoil은 통합된 사용경험을 준다는 평이 많아 사용해보기로 했다.
(대규모 프로덕션 레벨에서 사용하기에 어떨지는 아직 잘 모르겠다)

CSS Module, SCSS

기존에는 Styled-components를 많이 사용했었는데 CSS-in-JS 가 퍼포먼스 측면에서 불리하다는 글 을 읽어보고나니, CSS Module을 사용해 CSS-in-CSS방식으로도 한번 프로젝트를 진행해봐야겠다는 생각이 들었다.
사실 CSS-in-JS에서 props를 적극적으로 사용하면 오히려 코드가 더러워지는 경험을 종종 했어서 props를 잘 사용하지 않던 터라, 굳이 CSS-in-JS를 사용해야 하나? 라는 생각을 하던 참이기도 했다.
무엇보다 Next.js에서 기본적으로 지원해 별도의 설정이 필요없는 점도 마음에 들었다.

AWS EC2, ElasticBeanstalk, RDS

AWS을 이용한 환경 구성을 혼자서 다 해본 경험이 없어, 이번 기회에 처음부터 해보고자 결정했다.

2편 예고

다음 포스트에서는 Figma를 이용해 블로그의 전체적인 레이아웃과 컴포넌트 단위 디자인을 진행해볼 예정이다.

질문의나 의견, 잘못된 설명에 대한 정정요청은 댓글 혹은 페이스북 을 통해 부탁드린다.

-끗-

profile
Dev & Design

2개의 댓글

comment-user-thumbnail
2021년 1월 24일

관심있는 기술스택들이라 도움이 많이 될것 같습니다.
실제 개발 진행하시면서 블로깅하시는건가요?

1개의 답글