TodoWithGit ‐ 깃 연동이 가능한 투두리스트 개발 - dongu1015/TodoWithGit GitHub Wiki

프로젝트 소개

  • 프로젝트 이름 : TodoWithGit
  • 오픈소스 : TodoMVC
  • 목적 및 목표
    1. 오픈소스 기능 분석과 기능 확장
    2. GitHub 협업 구조 확립 (브랜치, PR, 이슈 등)
    3. 프로젝트에 필요한 오픈소스(TodoMVC) 사용 및 이해
  • 사용 기술 : Django, GitPython, JavaScript, Webpack, HTML/CSS

역할 분담

김기룡

백엔드 구현, API 설계, GitPython 연동

  • TodoMVC 오픈소스 코드 내 프론트엔드와 새로 추가한 기능들에 대해 필요한 API 파악 및 설계
  • Git 명령어를 Python 코드로 직접 실핼할 수 있게 Repo() 객체를 통해 특정 Git 저장소를 로드하고 명령어 실행 가능하게 GitPython 연동
  • 필수 기능(커밋, 커밋메시지, 브랜치 목록, 푸시, 원격 저장소 연결) API 구현

강동원

프론트엔드 기능 구현, UI 구성

  • TodoMVC오픈소스 코드 내 프론트엔드 자바스크립트를 이용한 추가 기능구현
  • 웹 내 Git연결, 커밋, 푸시를 위한 Web UI 구성
  • 프론트엔드 서버 - 백엔드 서버 통신을 위한 HTTP 주소 연결

설치 및 실행 방법

백엔드

cd backend python -m venv .venv .venv\Scripts\activate python manage.py runserver

프론트엔드

cd frontend npm install npm start

TodoGit 사용방법

  1. 사용자 정보와 로컬 저장소 경로를 입력한다.
    • 지정된 로컬 저장소의 브랜치와 파일 목록을 불러옴
  2. 아래 'add task' 입력창에 투두리스트를 만들어 낸다.
    • 커밋과 별개로 투두리스트를 만들어 체계적인 설계가 가능
  3. 투두리스트를 체크하면 커밋 메시지를 입력하고 브랜치를 선택하여 커밋한다.
    • 지정된 로컬 저장소에 생성 및 수정된 파일들을 모두 커밋
  4. 커밋이 완료되면 투두리스트는 취소선으로 구분된다.
    • 커밋을 할 때마다 실시간으로 투두리스트 진행 현황을 볼 수 있음
  5. 푸시를 위해 Git Remote 설정을 한 후 gitHub에 push한다.
    • 리모트 설정에 필요한 사용자명, 리포지토리명을 자동으로 조합하여 자동으로 URL을 만들어 내고 토큰을 입력함

폴더 및 파일 구조 설명

  • TodoGit/ : 프로젝트 폴더
  • backend/ : 벡엔드 폴더
  • todoapp/ : Django기반의 앱
  • views.py : 핵심 API 로직으로 구현된 파일
  • urls.py : views.py의 함수들과 URL 경로를 연결하는 파일
  • manage.py : Django 서버를 관리하는 명령어를 실행할 수 있는 CLI 도구
  • frontend/ : 프론트엔드 폴더
  • todo.controller.js : 기능들을 처리하는 컴트롤러 js 파일
  • webpack/ : 웹팩 설정 폴더
  • webpack.dev.js : 개발용 빌드 설정

API 목록

  • GET | /api/branches/ | 로컬 브랜치 목록 조회
  • GET | /api/all-branches-files/ | 모든 브랜치의 파일 목록 조회
  • GET | /api/files/all/?branch=브랜치명 | 특정 브랜치의 전체 파일 목록
  • GET | /api/changed-files/?branch=브랜치명 | 특정 브랜치의 변경된 파일 목록
  • POST | /api/commit/ | 변경 사항 커밋
  • POST | /api/setup-user/ | Git 사용자 정보 설정
  • POST | /api/branches/create/ | 브랜치 생성
  • POST | /api/branches/delete/ | 브랜치 삭제
  • POST | /api/set-remote/ | 원격 저장소 URL 설정
  • POST | /api/push/ | 원격 저장소로 push

날짜 | 목표

  • 5/6 | 프로젝트 구조 셋업 / 오픈소스 코드 분석 완료
  • 5/10 | Django API 완성 (commit 기능)JS → API 연동 성공
  • 5/20 | 주간 리포트 기능 / 커밋 로그 파싱 구현 (선택사항)
  • 5/25 | 최종 기능 완성 / UI 마무리
  • 5/30 | 발표자료(PPT) + GitHub 정리 + 영상 제출