웹 기반 문서 편집기 제작 프로젝트

과목 개요

React 와 Express 를 이용한 통합 프로젝트 수행

• 지금까지 배운 기술을 활용하여 데이터베이스와 사용자 인터페이스를 포함하는 웹 응용 개발
• 실제 사용을 염두에 둔 서비스를 개발 및 통합 (빌드, 테스트, 배포) 하는 과정을 자동화 파이프라인으로 구축

웹 개발 프로세스를 개발자 관점에서 이해

• 소프트웨어 개발자 (프론트엔드, 백엔드) 로서 직접 맡아서 해야 할 일들과 그 범위
• 타 팀 (예: DevOps) 에서 수행하는 코드 개발 이외 업무에 대한 이해
  • 이것을 잘 알고 있는 것은 역할 정의 및 부드러운 협업과 효율 향상에 필요한 일
• 프로덕션 환경을 고려한 응용 소프트웨어의 설계와 구현에서 염두에 두어야 할 점
  • 환경 구성 자동화를 통하여 도구의 지원을 받을 수 있는 부분과
  • 개발자로서 서로 다른 (개발, 통합 테스트, 프로덕션, ...) 환경 구성에 주의해야 할 부분

학습 포인트

• React 및 Express 를 활용한 응용 프로그래밍은 중점이 아님
  • 앞선 강의들과 프로젝트들을 통해서 익숙해져 있다고 가정
• 개발환경과 프로덕션 환경의 차이를 염두에 둔 프로그래밍은 중점에 해당
  • 웹 개발의 전체 싸이클을 한 프로젝트 내에서 경험하고자 하는 것이 이 과목의 주안점
• CI/CD 파이프라인 구축 기법은 중점이 아님
  • 이에 해당하는 내용은 앞서서 “웹 개발 파이프라인 구축” 과목에서 학습한 것으로 가정
    • 잘 기억나지 않는 부분이 있다면 각 부분을 다시 참고하는 것 추천
• CI/CD 관련으로 새로 도입되는 내용들이 있음
  • E2E 테스트, AWS 활용, 인프라 모니터링, …

전체적인 흐름

• 요구사항 분석과 구조 설계
• 백엔드 상세 설계와 개발환경 셋업
• 프론트엔드 상세 설계와 개발환경 셋업
• 단위테스트와 컨테이너화
• Selenium 을 이용한 E2E (end-to-end) 테스트
  • 브라우저 자동화를 통한 사용자 인터페이스 포함 웹 응용 테스트
• 배포 환경의 이해와 준비
  • AWS 클라우드 인프라를 이용한 프로덕션 환경 모사
• CI/CD 파이프라인 구축
• 모니터링과 시각화

프로젝트 개요

프로젝트 소개

이 프로젝트의 경우, 결과물에 대한 예상이 이미 구현되어 있는 샘플을 통하여 명확하게 드러남

• 하지만 실제 응용 개발에 있어서는 늘 그렇다고 예상할 수 없음
• 요구사항으로부터 전체 설계를 도출할 수 있는 능력은 매우

사용하는 기술 스택

Backend

• Main framework: Express.js (v4.18)
• DB: MariaDB 10.6.16

Frontend

• Main framework: React.js (v18)
• Tiptap library for editor component
• JsonWebToken library for user authentication

Production deployment

• AWS, Kubernetes, Minikube
• Jenkins, Terraform, Selenium

개발 환경과 배포 환경

개발용 컴퓨터

• 개발자 각각이 사용할 환경을 구성
• Node.js 설치 필요 ‒ 이 프로젝트에서 사용하기로 한 버전은 v18.x
• 테스트용 클러스터 ‒ docker desktop 으로 구성한 single-node cluster

배포 환경

• AWS 활용 - EC2 instance 하나에 minikube 로 구성한 k8s cluster
• 데이터베이스 ‒ 위와 같은 EC2 instance 에 MariaDB 설치 및 데이터베이스 스키마 생성되어 있음을 가정

CI/CD 에 적용할 도구들

• Jenkins ‒ 로컬 클러스터에 설치 및 운용되는 것으로 가정
• Selenium ‒ 로컬 클러스터에 필요시 (테스트 수행할 때마다) 구성하여 테스트 실행하는 것으로 설계

프로세스 명세

소프트웨어 요구사항 명세서

• 개발할 소프트웨어 (서비스) 의 요구사항을 기술한 것으로서 전체 프로젝트의 출발점이 됨

구조 설계서

• BE ‒ API 입/출력 및 동작에 대한 명세 (+ 소스 코드 패키지 구조)
• FE ‒ 컴포넌트 구분 및 계층 구조 명세 (+ 소스 코드 패키지 구조)

상세 설계서

• BE ‒ 생략
• FE ‒ 각 컴포넌트의 기능 명세 및 와이어프레임 (스크린샷)

개발 (및 그 이후) 과정의 흐름

요구사항을 분석하고 소프트웨어 아키텍처를 설계한다.

• 연습을 위한 프로젝트이기 때문에 아키텍처는 사실 제시되어 있음

개발 환경을 셋업하고 뼈대만 있는 코드로도 (BE, FE 각각) 개발 단계 테스트가 가능함을
확인한다.

단위 테스트를 확보하고 코드를 개발한다.

배포를 위한 컨테이너 구조를 설계하고 이에 연관한 각 요소들을 테스트를 통해 확인한다.

• 실제의 제품 (서비스) 개발 프로젝트에서는 이 설계가 코드 개발보다 앞서 이루어져야 함

CI/CD 파이프라인을 구축하고 통합 (인수) 테스트 시나리오를 설계, 적용한다.

코드 품질 (형태/기능) 을 확보하기 위한 개선 및 기능 추가를 수행한다.

• 지속적 유지보수와 자동화된 통합/배포 실습을 위해 도전과제를 활용하는 것을 추천

준비할 것들

구현 기술에 대한 이해

• Express.js
• React.js
  웹 서비스를 이루는 소프트웨어 (및 IP 네트워크 인프라) 에 대한 이해

로컬 테스트를 위한 환경

• Docker 엔진과 로컬 k8s 클러스터 ‒ docker desktop 이용을 가정
• Jenkins ‒ 위 로컬 클러스터에 설치되어 있음을 가정
• AWS 계정 ‒ IAM 으로 교육 운영에서 준비하여 배포하였음을 가정
• 적절한 권한 ‒ 교육 운영에서 이미 설정하였을 것으로 가정

프로젝트 개요

• Node.js 설치 ‒ 이전 프로젝트들을 통하여 완료하였을 것으로 가정

유의사항 요약

이 프로젝트에서 중점을 두고 있는 것

• 웹 개발 과정의 처음부터 끝까지를 (풀싸이클) 경험하고자 함
• 프론트엔드와 백엔드의 세부 구현에 대한 가이드는 없음
• 이전 프로젝트들에서 집중했던 것보다는 테스트 자동화 및 배포 프로세스에 무게를 둠

따라서

• 사용자 대상으로 서비스를 개방하기 위해 배포하는 단계를 개발 단계에서부터 염두에 두고 프로젝트 수행
• 단계별 자동화 (및 서로 다른 환경에 대한 구성 관리) 에는 어쩌면 코드 개발에 비해서 더 큰 시간과 노력이 들어갈 수도
  있음을 인식
• 그러나 한번 프로세스를 잘 만들어 두면 이후의 일들이 편해짐 🡪 이 프로젝트에서 가장 강조하고자 하는 것
• (또는) 이러한 프로세스를 올바르게 정립하지 않고서는 제품 (서비스) 을 개발할 수 없음