기술 스택 선택

백엔드 언어로 Python을 사용하고, 경량 웹 프레임워크로 Flask를, 프론트엔드 프레임워크로 Vue3를 선택합니다. 데이터베이스는 개발 단계에서 SQLite를, 프로덕션 환경에서는 MySQL을 사용하며 ORM으로 SQLAlchemy를 활용합니다.

시스템 아키텍처 설계

프론트엔드와 백엔드가 분리된 아키텍처를 채택하며, 백엔드는 RESTful API 인터페이스를 제공하고 프론트엔드는 axios를 통해 백엔드와 통신합니다. 인증은 JWT를 사용하고, 파일 저장은 로컬 저장소나 클라우드 스토리지 서비스(예: 치우윈)를 활용합니다.

백엔드 구현

Flask 애플리케이션을 생성하고 라우팅 및 뷰 함수를 구성합니다. 사용자 인증, 노트 관리, 분류 태그 등 핵심 API를 정의합니다. Flask-SQLAlchemy로 데이터베이스 작업을 처리하고 Flask-JWT-Extended로 JWT 인증을 구현합니다.

# 예시: 노트 모델 정의
class StudyNote(db.Model):
    note_id = db.Column(db.Integer, primary_key=True)
    subject = db.Column(db.String(100))
    text_content = db.Column(db.Text)
    creator_id = db.Column(db.Integer, db.ForeignKey('learner.id'))

프론트엔드 구현

Vue3 조합형 API를 사용하여 SPA 애플리케이션을 개발합니다. 노트 목록, 편집 페이지, 분류 관리 등 기능 컴포넌트를 생성합니다. Vue Router로 페이지 네비게이션을 구현하고 Pinia로 상태 관리를 수행합니다.

// 예시: 노트 목록 가져오기
const loadStudyMaterials = async () => {
  const response = await axios.get('/api/study-materials')
  studyNotes.value = response.data
}

기능 모듈

사용자 시스템은 회원 가입, 로그인 및 개인 센터를 구현합니다. 노트 모듈은 Markdown 편집, 태그 분류 및 전문 검색을 지원합니다. 데이터 통계 모듈은 학습 진행 상황 및 분석 보고서를 제공합니다.

개발 프로세스

1. 기본 프레임워크 및 환경 설정 구축
2. 핵심 기능의 백엔드 API 구현
3. 프론트엔드 인터페이스 및 상호작용 로직 개발
4. 시스템 테스트 및 성능 최적화 수행
5. 프로덕션 환경에 배포

배포 방안

Nginx를 리버스 프록시 서버로 사용하고 Gunicorn으로 Flask 애플리케이션을 실행합니다. 프론트엔드 정적 파일은 Nginx를 통해 직접 서비스하며 HTTPS를 구성하여 데이터 전송 보안을 확보합니다.

프로젝트 기술 지원

프론트엔드 개발 프레임워크: vue.js 데이터베이스: mysql (버무 제한 없음) 데이터베이스 도구: Navicat/SQLyog/ MySQL Workbench 등 호환

백엔드 언어 프레임워크 지원:

1. java(SSM/springboot/Springcloud)-idea/eclipse
2. Nodejs(Express/koa)+Vue.js -vscode
3. python(django/flask)–pycharm/vscode
4. php(Thinkphp-Laravel)-hbuilderx