웹 풀사이클 데브코스 TIL 81일차

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

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

• 실제 사용을 염두에 둔 서비스를 개발 및 통합, 자동화 파이프라인으로 구축

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

• 타 팀(DevOPs) 에서 수행하는 코드 개발 이외 업무에 대한 이해

• 프로덕션 환경을 고려한 응용 소프트웨어의 설계와 구현에서 염두에 두어야 할 점

• React 및 Express를 활용한 응용 프로그래밍은 중점이 아님

• 개발환경과 프로덕션 환경의 차이를 염두에 둔 프로그래밍은 중점에 해당

• CI/CD 파이프라인 구축 기법은 중점이 아님

• CI/CD 관련으로 새로 도입되는 내용들이 있음

프로젝트 개요

웹 기반 문서편집기를 만드는 프로젝트. 이 프로젝트에는 결과물에 대한 예상이 이미 구현되어 있는 샘플을 통하여 명확하게 드러남. 하지만 실제 응용 개발에서는 예상할수 없을수도 있음 따라서 요구사항으로부터 전체 설계를 도출할 수 있는 능력이 중요.

사용되는 기술 스택

Backend

• Express.js(v4.18)
• MariaDB(10.6.16)

Frontend

• React.js(v18)
• Tiptap library for editor component(https://tiptap.dev)
• JsonWebToken library for user authentication(www.npmjs.com/package/jsonwebtoken)

Production deployment

• Aws, Kubernetes, Minikube
• Jenkins, Terraform, Selenium

개발환경과 배포 환경

Aws EC2 instance 하나에 minikube로 구성한 k8s cluster를 사용
데이터베이스는 EC@ instance 에 MariaDB 설치 및 데이터 베이스 스키마 생성되어 있음을 가정

Jenkins, Selenium

프로젝트 명세

• 소프트웨어 요구사항 명세서: 개발할 소프트웨어의 요구사항을 기술한 것으로서, 전체 프로젝트의 출발점
• 구조 설계서: BE- API 입/출력 및 동작에 대한 명세(+ 소스코드 패키지 구조)
  FE - 컴포넌트 구분 및 계층 구조 명세(+ 소스코드 패키지 구조)
• 상세 설계서: BE- 생략, FE- 각 컴포넌트의 기능 명세 및 와이어 프레임(스크린샷)

개발 과정의 흐름

• 연습프로젝트이기 때문에 아키텍쳐는 제시
• 뼈대만 있는 코드로도 개발단계 테스트가 가능함을 확인
• 단위테스트를 확보하고 코드를 개발
• 배포를 위한 컨테이너 구조를 설계하고 이에 연관한 각 요소를 테스트
• CI/CD 파이프라인을 구축하고 통합(인수) 테스트 시나리오를 설계, 적용
• 코드 품질을 확보하기 위한 개선 및 기능추가