🍀 시스템 아키텍처

서비스의 전반적인 구조

Naver Cloud Platform 위에서 클라이언트와 백엔드 서버를 포함한 웹 애플리케이션 구조로 설계하였습니다. 클라이언트와 백엔드는 각각 Docker 컨테이너화되어 있으며, GitHub Actions와 Docker Hub를 활용한 CI/CD 파이프라인을 통해 배포됩니다.

세부적인 서비스 흐름

클라이언트

총 두 페이지로 구성됩니다.

• 홈 페이지에서 워크스페이스 조회, 생성, 삭제할 수 있습니다.
• 워크스페이스 페이지에서 HTML/CSS 블록 생성, 조립한 후 저장 및 되돌리기 가능합니다.

Storybook을 활용하여 컴포넌트 테스트 및 문서화하고 있습니다.

백엔드

Mongoose와 MongoDB를 통해 요청 데이터를 처리하고 필요한 정보를 반환합니다.

Github Actions를 통해 Docker 이미지를 자동으로 빌드하고 배포합니다.

---

변경 사항

• 12.03: 학습 가이드 영상 목록 보기 → 워크스페이스 샘플 제공