TodoWithGit ‐ 깃 연동이 가능한 투두리스트 개발 - dongu1015/TodoWithGit GitHub Wiki
프로젝트 소개
- 프로젝트 이름 : TodoWithGit
- 오픈소스 : TodoMVC
- 목적 및 목표
- 오픈소스 기능 분석과 기능 확장
- GitHub 협업 구조 확립 (브랜치, PR, 이슈 등)
- 프로젝트에 필요한 오픈소스(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 사용방법
- 사용자 정보와 로컬 저장소 경로를 입력한다.
- 지정된 로컬 저장소의 브랜치와 파일 목록을 불러옴
- 아래 'add task' 입력창에 투두리스트를 만들어 낸다.
- 커밋과 별개로 투두리스트를 만들어 체계적인 설계가 가능
- 투두리스트를 체크하면 커밋 메시지를 입력하고 브랜치를 선택하여 커밋한다.
- 지정된 로컬 저장소에 생성 및 수정된 파일들을 모두 커밋
- 커밋이 완료되면 투두리스트는 취소선으로 구분된다.
- 커밋을 할 때마다 실시간으로 투두리스트 진행 현황을 볼 수 있음
- 푸시를 위해 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 정리 + 영상 제출