🎯 웹 기반 문서 편집기 제작 프로젝트를 제작합니다.

📗 Today I Learned

문서 편집기 프로젝트

문서 편집기 프로젝트는 React와 Express를 기반으로 한 웹 애플리케이션입니다. 사용자는 회원가입 및 로그인을 통해 개인 노트를 생성하고, 브라우저 상에서 직접 내용을 작성·편집·저장할 수 있습니다.

Tiptap 기반의 리치 텍스트 에디터를 활용하여 문서 편집 환경을 제공합니다.

---

주요 목적

• React, Express, MariaDB 등 배운 기술을 종합적으로 활용

• 로그인부터 문서 작성까지의 사용자 흐름을 포함한 실제 서비스 개발

• CI/CD 자동화 파이프라인, 컨테이너화, 배포 환경 설정까지 경험

• 개발환경과 프로덕션 환경의 차이를 고려한 설계

---

실습 흐름

1. 요구사항 분석과 구조 설계

2. 백엔드 상세 설계와 개발환경 셋업

3. 프론트엔드 상세 설계와 개발환경 셋업

4. 단위테스트와 컨테이너화

5. Selenium을 이용한 E2E 테스트

6. AWS 기반 배포 환경 구성

7. CI/CD 파이프라인 구축

8. 모니터링과 시각화

---

기술스택

영역	사용 기술
Backend	- Main framework: Express.js - DB: MariaDB
Frontend	- Main framework: React.js - Editor: Tiptap - Auth: JsonWebToken (JWT)
테스트/자동화	- 단위 테스트: Jest - E2E 테스트: Selenium
배포 인프라	- AWS, Kubernetes, Minikube
CI/CD & IaC	- 자동화 도구: Jenkins - 인프라 코드화: Terraform

---

요구사항 명세서 (SRS)

Software Requirement Specification(SRS)는 소프트웨어가 무엇을 해야 하는지 정의한 공식 문서로, 개발자가 구현할 기능과 시스템 제약 조건을 명확히 하기 위해 사용됩니다.

• 기능적 요구사항 : 소프트웨어가 갖추어야 하는 기능

• 비기능적 요구사항 : 성능, 자원 사용량 등에 존재하는 여러 측면 제약

개발 방법론과 SRS의 관계

• 워터폴 모델

  • SRS는 필수 산출물

  • 전체 요구사항을 개발 이전에 명확히 정의하고 문서화

• 애자일 모델

  • 빠른 반복과 유연한 대응을 중요시

  • 민첩성을 높이기 위해 SRS 문서를 생략하거나 간략화하는 경우가 많음

---

랜딩페이지

🔐 인증/계정 기능

REQ-01-01: 로그인

구분	내용
요구사항 ID	REQ-01-01
요구사항명	로그인
개요 (목적, 내용)	가입된 이메일과 비밀번호를 이용해 로그인할 수 있다.
입력	로그인하지 않은 상태에서 서비스 방문
출력	로그인 화면이 표시됨

REQ-01-02: 회원가입

구분	내용
요구사항 ID	REQ-01-02
요구사항명	회원가입
개요 (목적, 내용)	이메일과 비밀번호를 이용해 회원가입을 할 수 있다.
입력	로그인 화면에서 회원가입 버튼 클릭
출력	회원가입 화면이 표시됨

REQ-01-03: 로그아웃

구분	내용
요구사항 ID	REQ-01-03
요구사항명	로그아웃
개요 (목적, 내용)	로그아웃할 수 있다. 로그아웃 성공 후에는 로그인했던 사용자의 정보가 유지되지 않아야 한다.
입력	화면 상단의 로그아웃 버튼 클릭
출력	로그아웃 후 로그인 화면으로 복귀됨

📚 노트 기능

REQ-02-01: 노트 목록 조회

구분	내용
요구사항 ID	REQ-02-01
요구사항명	노트 목록 조회
개요 (목적, 내용)	생성일 기준으로 정렬된 노트 목록이 표시된다.
입력	메인 페이지 방문
출력	화면 사이드바에 클릭 가능한 노트 목록이 표시됨

REQ-02-02: 노트 선택

구분	내용
요구사항 ID	REQ-02-02
요구사항명	노트 선택
개요 (목적, 내용)	노트 목록에서 노트를 선택할 수 있다.
입력	노트 목록에서 선택할 노트를 클릭
출력	노트 목록에서 선택한 노트가 하이라이트됨

REQ-02-03: 노트 조회

구분	내용
요구사항 ID	REQ-02-03
요구사항명	노트 조회
개요 (목적, 내용)	선택한 노트의 내용을 조회할 수 있다.
입력	사이드바 노트 목록에서 노트를 클릭하여 선택
출력	우측 화면에 노트의 내용이 표시됨

REQ-02-04: 노트 생성

구분	내용
요구사항 ID	REQ-02-04
요구사항명	노트 생성
개요 (목적, 내용)	새 노트를 생성할 수 있다.
입력	화면 상단의 노트 생성 버튼 클릭
출력	노트 목록의 가장 위에 새 노트가 추가되고, 해당 노트가 선택 및 조회된다.

REQ-02-05: 노트 편집

구분	내용
요구사항 ID	REQ-02-05
요구사항명	노트 편집
개요 (목적, 내용)	조회 중인 노트를 편집할 수 있다.
입력	조회 중인 노트의 내용을 클릭
출력	커서가 깜빡이며, 편집 가능한 상태가 된다.

REQ-02-06: 노트 변경사항 저장

구분	내용
요구사항 ID	REQ-02-06
요구사항명	노트 변경사항 저장
개요 (목적, 내용)	노트의 변경사항을 저장할 수 있다.
입력	화면 상단의 저장 버튼을 클릭한다.
출력	노트의 변경사항이 저장된다.

REQ-02-07: 노트 삭제

구분	내용
요구사항 ID	REQ-02-07
요구사항명	노트 삭제
개요 (목적, 내용)	조회 중인 노트를 삭제할 수 있다.
입력	노트를 조회하고, 화면 상단의 삭제 버튼을 누른다.
출력	노트가 삭제된다.

---

✏️ 회고

실제 개발부터 배포까지 하나의 흐름을 경험해볼 수 있어서, 단순 기능 구현을 넘어서 전체적인 웹 개발 사이클을 이해하는 데 큰 도움이 될 것 같다.