Git Challenge

배포 링크
https://git-challenge.com/

팀 노션   |   백로그   |   기획서   |   figma
그라운드 룰   |   개발 위키

📄 목차

• 📄 목차
• ✍🏻 프로젝트 개요
• 🚀 핵심 기능
  • 자주 마주칠 수 있는 Git 문제를 해결해 보세요
  • 터미널 환경에서 Git을 조작할 수 있어요
  • Git 그래프로 변화되는 Git 상황을 확인할 수 있어요
  • 문제 해결이 어렵다면 도움받을 수 있어요
  • 정답을 맞추면 내 답안을 공유할 수 있어요
• ⚙️ 기술 스택
• 🏛️ 시스템 아키텍처
• 🔎 FE 기술적 도전
  • 디자인 시스템 구축
  • 컴포넌트 테스트 코드
  • D3를 이용한 데이터 시각화
  • UX 개선
• 🔎 BE 기술적 도전
  • 도커 컨테이너
  • HTTP로 원격 터미널 조작하기
  • Git editor 커스텀
  • 채점을 위해 Jest를 쓰지 않은 이유
  • AI 시스템 프롬프트 설정하기
• 🧡 팀원 소개

✍🏻 프로젝트 개요

Git Challenge는 사용자들이 git을 사용하며 발생할 수 있는 다양한 상황을 미리 체험하고, 학습할 수 있도록 도와주는 서비스입니다. 이 서비스를 통해 사용자들은 git 명령어에 대해 실습하고, 실제로 발생할 수 있는 문제 상황을 해결하는 경험을 할 수 있습니다.

🚀 핵심 기능

자주 마주칠 수 있는 Git 문제를 해결해 보세요

총 세가지 난이도로 구성되어 있습니다. 프로젝트를 진행하며 겪을 수 있는 Git 문제 상황을 실습하며 연습해보세요!

• 튜토리얼 정도의 난이도 Git start
• Git start보다 어려운 난이도이며 스토리 형식의 Git advanced
• 원격 저장소와 관련된 문제이며 스토리 형식의 Remote start

터미널 환경에서 Git을 조작할 수 있어요

터미널 환경에서 직접 Git 명령어를 입력하고, vi 편집기를 사용하며 문제를 풀어보세요.

Git 그래프로 변화되는 Git 상황을 확인할 수 있어요

Git 명령어 동작에 따라 변화되는 Git 그래프를 보며, Git에 대한 이해를 높여보세요.

문제 해결이 어렵다면 도움받을 수 있어요

문제 풀이에 필요한 핵심 명령어와 모범 답안으로 Git을 학습한 후 문제를 다시 풀어보세요.

정답을 맞추면 내 답안을 공유할 수 있어요

문제를 맞췄다면 내 풀이를 다른 사람들과 공유해 보세요.

⚙️ 기술 스택

분류	기술 스택
공통
프론트엔드
백엔드
패키지 매니저
배포
협업

🏛️ 시스템 아키텍처

🔎 FE 기술적 도전

디자인 시스템 구축

컬러, 타이포그래피 시스템	Semantic Token

• 색상과 글꼴을 디자인 토큰으로 추상화한 컬러, 타이포그래피 시스템으로 디자인 일관성을 유지하고 코드베이스를 더 쉽게 관리할 수 있었습니다.
• 색상과 글꼴에 의미를 부여한 Semantic Token으로 커뮤니케이션 비용을 절약할 수 있었습니다.
• 디자인 변경이 필요할 때 변수에 주입된 색상 코드만 수정하면 되어 초기 개발 단계에서 디자인 변경에 대한 유연성을 확보할 수 있었습니다.

컴포넌트 테스트 코드

• Describe-Context-It, DCI 패턴으로 테스트 케이스를 계층화하여 테스트 결과의 가독성을 개선했습니다.
• 복잡한 로직을 각 구문, 함수, 분기별로 철저히 테스트하여 기능 추가 및 리팩토링 시에도 컴포넌트의 무결성을 유지할 수 있었습니다.
• 테스트 케이스를 작성하며 놓친 기능 요구사항을 파악하여 TDD로 구현했습니다.

D3를 이용한 데이터 시각화

• Problem
  • D3 tree는 트리 데이터를 위한 레이아웃입니다. 하지만 Git 로그 데이터는 트리가 아닌 네트워크 그래프 데이터이기 때문에 D3 tree 레이아웃에 적용할 수 없는 문제가 있었습니다.
• Solved
  • Git 로그 데이터에서 Multiple Parents 노드를 처리하기 위해, 일부 간선을 분리하여 트리 데이터로 가공한 후 D3 tree 레이아웃에 적용했습니다. 이후에는 분리한 간선을 다시 추가하여 네트워크 그래프를 시각화했습니다.

라이브러리 비교	문제 해결

UX 개선

랜딩 페이지	Git 그래프 변화

• Intersection Observer를 사용하여 브라우저 화면에서 현재 보이는 영역을 동적으로 감지하고, 이를 기반으로 스크롤 이벤트 애니메이션을 설계하고 구현했습니다. 이를 통해 서비스에 처음 진입했을 때 사용자에게 적절한 맥락을 전달하고, 자연스러운 화면 전환을 제공하기 위해 노력했습니다.
• 사용자가 입력한 Git 명령어의 동작을 시각적으로 파악할 수 있도록 Git 그래프 변화에 애니메이션을 적용했습니다. D3의 데이터 조인을 이용해 데이터 추가, 수정, 그리고 삭제 애니메이션을 구현했습니다.

🔎 BE 기술적 도전

도커 컨테이너

• 사용자별 격리된 git 문제 풀이 환경을 제공하면서도, git의 전역 설정들이 다른 사용자들에게 영향을 미치지 않도록 하기 위해 도커 컨테이너를 이용했습니다.
• 컨테이너 생성 시간을 아끼고자 각 문제 별로 미리 생성된 컨테이너 환경에 사용자를 할당하고 새로운 컨테이너를 생성합니다.
• 서버 자원을 효율적으로 사용하기 위해 오래 된(30분) 컨테이너는 자동 정리되며 사용자 재접속 시 log 기반으로 복구됩니다.
• 네트워크 차단, 실행 가능 명령어 검증, 유저 권한 제한 등으로 사용자의 입력을 검증하고 제한했습니다.

HTTP로 원격 터미널 조작하기

• ssh로 컨테이너에 명령을 전달하고 받아오도록 구현했으나 충분히 빠르지 않았습니다.
• 컨테이너 관리 및 조회를 위한 작은 데이터를 단발적으로 전송할 때 효율적인 HTTP/1.1을 사용하는 서버를 추가 도입했습니다.
• HTTP 서버를 추가로 개발하는 것이 쉬우면서도 빠른 방법임을 리서치했습니다.

Git editor 커스텀

• 직접 구현한 터미널과 백엔드 구조로는 vi Editor와 같은 상호작용이 불가능합니다.
• 편집기의 동작을 편집할 파일을 읽는 과정, 파일을 편집하는 과정 두 단계로 이원화하여 Git에서 core.editor로 사용할 편집기 프로그램을 직접 작성했습니다.

채점을 위해 Jest를 쓰지 않은 이유

• Jest는 테스팅 프레임워크로, 단위 테스트 및 통합 테스트를 위해 널리 사용되고, 다양한 테스트 기능을 제공합니다. 사용자의 문제 환경 컨테이너가 Jest 테스트를 통과하면 정답입니다.
• Jest를 사용하면 채점 로직에 대해 멀티프로세스를 이용해 병렬 실행이 가능합니다.
• Jest 자체적으로 테스트 환경 설정과 테스트 실행 환경을 준비하는 과정이 필요했고, 이 때문에 일반 코드로 채점하는 것에 비해 속도가 느렸기 때문에 사용하지 않았습니다.

AI 시스템 프롬프트 설정하기

• HyperCLOVA X 엔진은 충분히 방대한 정보를 대답할 수 있습니다.
• Git 설치나 Git과 무관한 답변은 하지 않도록 하였습니다.
• 교육을 위해 창의적인 해결법 보다는 학습을 위한 전형적인 해결법을 답하도록 하였습니다.

🧡 팀원 소개

박용준	박정제	박유현	윤채현
BE	BE	FE	FE
@flydog98	@LuizyHub	@YuHyun-P	@yunchaehyun