headless project

프론트엔드와 백엔드룰 분리하여 개발하는 프로젝트에 대한 가이드입니다.

기본 개념

• CMS (Content Management System): 콘텐츠를 관리하는 시스템
• SPA (Single Page Application): 단일 페이지 애플리케이션
• headless: 프론트엔드와 백엔드를 분리하여 개발하는 방식
• API (Application Programming Interface): 프로그램 간의 통신을 위한 인터페이스

목적

• 프론트엔드와 백엔드를 분리하여 개발하면, 프론트엔드 개발자와 백엔드 개발자가 전보다는 각자 작업에 집중할 수 있습니다.
• 콘텐츠를 입력 관리하는 사용자와 콘텐츠를 보여주는 사용자를 분리할 수 있어서 불필요한 API 노출 표면 최소화, 정보 노출 방지, 네트워크 분리 등의 보안상 이점이 있습니다.
• 워크로드 분산으로 양쪽 성능 향상을 기대할 수 있습니다.
• 각자 더 잘하는 것에 집중하기 위해 데이터와 시각적 스타일, 사용자 경험을 분리할 수 있습니다.

구현 방식

• 데이터 backend: [php] drupal, wordpress
• 시각적 스타일, 사용자 경험 frontend: [js] jquery, vue, alpinejs, react, svelte
• 구현 방식
  • CMS + Jquery
  • CMS + SPA
  • headless

격리에 따른 특징!

네트워크 요청에 따라 세션, 데이터베이스 등 필요한 연산을 마치고 최종 결과로 HTML을 반환하던 전통 방식의 입장에서 생각해보면, 프론트엔드와 백엔드를 분리하면서, 프론트엔드는 백엔드로부터 데이터를 받아서 화면을 그리는 역할만 하게 됩니다. 한마디로 view, theme 등의 표현 계층에 대한 전권을 frontend에게 넘겨주는 것입니다. 전통 방식에서는 데이터를 조회하고 수정하고 화면에 표시하기 위해 HTML 렌더링 API가 단일하게 통일되어 있었지만, 프론트엔드와 백엔드를 분리하면서, 데이터를 조회하고 수정하는 API와 화면을 표시하는 API가 분리되어야 합니다. 간단히 말하면 frontend가 이해할 수 있도록 파일이 되었던 HTTP 요청이 되었던 json 형식으로 데이터를 주고 받아야 합니다. 또한 node가 직접 redis, memcache 등의 KV store나 mysql, postresql 등의 RDBMS에 직접 접근해서 데이터를 가져올 수도 있습니다. 부분 headless라면 CMS가 출력하는 화면에 필요한 데이터를 json 형식으로 출력해주면 frontend가 데이터를 소비할 수 있습니다.

• 표현 계충의 전권은 frontend에게!
• 데이터의 전권은 backend에게!

예를 들어 관리자가 CMS 화면에서 메뉴나 사이트 로고를 변경했는데, 홈페이지에서 바뀌지 않는 것을 기대하지 않을 겁니다. 또는 다양한 콘텐츠에서 사용하는 기관명 선택 목록을 추가, 삭제, 수정하고 콘텐츠를 작성했는데 홈페이지에서 에러가 발생하는 것을 기대하지 않을 겁니다. 마치 예전에 한몸이었던 것처럼! 백엔드는 온전히 데이터를 잘 전달하고 처리해주고, 프론트는 시각적인 아름다움과 즐거운 사용자 경험을 제공해주어야 합니다.

백엔드 개발자가 자료 구조와 화면 표시를 모두 담당할 때는 작지만 훌륭한 두뇌로 어떻게든 혼자서 이 복잡한 일들을 다 처리했지만, 이제 백엔드도 프론트엔드도 그때보다 훨씬 복잡해졌습니다. 그래서 이제는 백엔드 개발자와 프론트엔드 개발자가 서로 협력하여 프로젝트를 진행해야 합니다. 그런데 둘은 서로 관심사가 다르고 언어도 다르고, 개발 방법론도 다르기 때문에 서로 협력하기가 쉽지 않습니다. 프론트는 자료 구조를 모르고, 백엔드는 화면 표시 따위는 관심이 없습니다. 이렇게 프로젝트를 진행하면 반드시 문제가 발생하고 차리리 전처럼 혼자 짊어지고 하는게 나을 겁니다.

서버 구성 유형

• 공유:
  • CMS의 서브 디렉토리 (SPA client | partial headless)
  • 별도 웹루트 (node server)
• 분리:
  • CMS 및 API 서버 (관리자)
  • 홈페이지 서버 (일반 사용자)
  • cloudflare, vercel, netlify, firebase 등의 EDGE 서버 (일반 사용자)
  • CDN (이미지, 동영상)

TODO

• 백엔드 API Document 정리 필요. (Drupal or Wordpress base)
• Front-end language 선택
  • React (main) - Next.js NextDrupal client view
  • Svelte (beta)
• Back-end API 웹사이트 테마 개발 및 획일화 (고객 납품시 필요)
• 단일 호스팅 (Cafe24 등) 사용시, Front-end, Back-end 웹서버 단일화 방법 정리 필요
  • Subfolder: API
  • Cloudflared 사용 가능시, 프론트를 탑재