[80일차]웹 기반 문서 편집기 제작 프로젝트 설계

📄 BE 설계

📑 구조 설계서

구조 설계서는 소프트웨어의 구조를 설계하여 기술한 문서이다. 이 문서는 사용 도구와 도구의 버전, 패키지 구조 설정 방법 등을 다룬다.

주요 내용

• 도구 및 도구의 버전: 프로젝트에서 사용할 도구들과 그에 따른 버전을 정의한다.
• 패키지 구조: 패키지 구조를 설계 및 설명한다.
• 세팅: 프로젝트 초기화 및 기본 설정 과정을 다룬다.
• 라우터: 경로 관리와 라우팅을 담당하는 구조를 정의한다.
• 모델: 데이터베이스와의 상호 작용을 담당하는 모델을 설계한다.
• 유틸: 공통적으로 사용될 유틸리티 함수들을 정의한다.
• 미들웨어: 요청과 응답 사이의 작업들을 처리하기 위한 미들웨어를 정의한다.

📑 데이터베이스 설계

프로덕션용(실제 운영) 데이터베이스와 로컬 테스트용 데이터베이스를 명확히 구분하여 사용해야 한다.

📑 개발 환경 셋업

빈 프로젝트에 기본 패키지를 설치하고, 환경 변수와 설정 코드를 작성한 후 응용 코드와 뼈대를 작성한다. 작성된 코드를 이용해 로컬 실행 및 빌드 결과를 간단히 확인한다.

TIP

• 빌드 후 별도의 서버 배포 없이 결과를 확인하려면 아래 명령어를 활용한다.

  npx serve <빌드 폴더 위치>

📑 사용자 인증(Authentication)

사용자 인증은 인증 정보를 통해 사용자가 유효한지 확인하는 과정이다. 인증은 암호화된 비밀번호와 이메일을 통해 이루어진다. 이 과정에서는 bcrypt 라이브러리를 활용하여 비밀번호를 암호화한다.

📑 사용자 인가(Authorization)

사용자 인가는 요청한 자원에 대해 사용자가 접근 권한을 가지고 있는지를 확인하는 과정이다.

📑 CORS 정책

CORS 정책은 특정 URL로부터의 요청만 허용하여 보안을 강화하는 정책이다.

---

📄 FE 설계

📑 구조 설계서

구조 설계서는 프로젝트 전반의 구조를 정의한 문서이다. 주요 도구와 버전, 패키지 구조 등을 기술한다.

주요 내용

• 도구 및 도구의 버전: 프로젝트에서 사용하는 도구와 해당 버전을 명시한다.
• 패키지 구조: 프로젝트에서 사용되는 파일 및 폴더 구조를 설계한다.
• 컴포넌트: 재사용 가능한 컴포넌트를 설계하고 구성한다.
• Utility: 공통 함수들을 설계 및 정의한다.
• React Query Hooks: 리액트 환경에서 데이터 관리를 효율적으로 처리하기 위한 퀴리 훅스를 정의한다.

📑 상세 설계서

상세 설계서는 구조 설계서를 기반으로 각 파일의 위치와 역할을 더욱 구체적으로 기술한 문서이다.

주요 내용

• 컴포넌트:
  • 일반 컴포넌트: 재사용 가능한 기본 컴포넌트를 정의한다.
  • 페이지 컴포넌트: 각각의 페이지를 구성하는 컴포넌트를 설계한다.
  • HOC (Higher-Order Component): 컴포넌트 로직의 재사용성을 높이기 위한 고차 함수형 컴포넌트를 정의한다.
  • 디자인 컴포넌트: UI와 스타일링을 위한 컴포넌트를 설계한다.

📑 개발 환경 셋업

개발 환경은 react와 typescript를 기반으로 설정한다. CRA(Create React App)를 이용하여 기본 템플릿을 생성하고, craco를 통해 추가 설정을 적용한다.

TIP

• 깔끔한 경로 설정: 상대 경로 사용을 간소화하고 명확히 하기 위해 tsconfig-paths-webpack-plugin 라이브러리를 활용할 수 있다.
• 환경 변수 처리: .env 파일을 사용해 환경 변수를 정의하되, production build에는 적용되지 않을 수 있다. 이를 해결하기 위해 빌드 단계에서 env.js 파일을 생성하고 DOM의 window 객체에 환경 변수를 정의하여 사용한다.

---

이 문서는 웹 기반 문서 편집기 제작 프로젝트의 설계 및 구현 단계를 정리한 것으로, 백엔드와 프런트엔드 설계를 각각 다루고 있다. 상세한 설계와 구현 전략을 통해 효율적이고 안정적인 프로젝트 개발을 도모한다.