Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/boostcampwm2023/web01-gitchallenge

🧑🏻‍💻 Git Challenge | 𝑮𝑰𝑻에 대해 얼마나 알고있니~?
https://github.com/boostcampwm2023/web01-gitchallenge

git

Last synced: 2 months ago
JSON representation

🧑🏻‍💻 Git Challenge | 𝑮𝑰𝑻에 대해 얼마나 알고있니~?

Host: GitHub
URL: https://github.com/boostcampwm2023/web01-gitchallenge
Owner: boostcampwm2023
Created: 2023-11-06T01:18:53.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-06-06T08:13:03.000Z (8 months ago)
Last Synced: 2024-06-06T09:36:07.901Z (8 months ago)
Topics: git
Language: TypeScript
Homepage: https://git-challenge.com
Size: 2.45 MB
Stars: 174
Watchers: 5
Forks: 2
Open Issues: 11
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

Git Challenge

![Frame 30](https://github.com/boostcampwm2023/web01-GitChallenge/assets/79246447/fe5e7fbd-93fe-40ea-be09-a902b712f6c3)

> 배포 링크

> **https://git-challenge.com/**

팀 노션
|
백로그
|
기획서 |
figma

그라운드 룰
|
개발 위키

## 📄 목차

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

## ✍🏻 프로젝트 개요

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

## 🚀 핵심 기능

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

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

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

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

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

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

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

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

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

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

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

## ⚙️ 기술 스택

분류
기술 스택

공통

프론트엔드

백엔드

패키지 매니저

배포

협업

## 🏛️ 시스템 아키텍처

![시스템 아키텍처](https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/d94724b8-a7a7-48e6-bba8-891bc7bfd696)

## 🔎 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 기술적 도전

### 도커 컨테이너

docker container

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

### HTTP로 원격 터미널 조작하기

protocol test

- 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](https://github.com/flydog98) | [@LuizyHub](https://github.com/LuizyHub) | [@YuHyun-P](https://github.com/YuHyun-P) | [@yunchaehyun](https://github.com/yunchaehyun) |