web01-GitChallenge

KO | EN

gitlite — search

#python #hacktoberfest #ai #typescript #llm #go #machine-learning #nodejs #macos #kubernetes #awesome-list #vue #ios #openai

web01-GitChallenge

(★ 56)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- - backend-deploy.yml
  - frontend-deploy.yml
- pull_request_template.md
- commit-msg
- pre-commit
- - integrations.yml
- - .dockerignore
  - .eslintrc.js
  - .gitignore
  - .prettierrc
  - Dockerfile
  - git-challenge-quiz.csv
  - nest-cli.json
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
- - .dockerignore
  - .eslintrc.json
  - .gitignore
  - .prettierrc
  - Dockerfile
  - jest.config.mjs
  - next.config.js
  - package.json
  - README.md
  - tsconfig.json
.gitignore
package.json
README.md
tsconfig.json
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <h1>Git Challenge</h1>
  
![Frame 30](https://github.com/boostcampwm2023/web01-GitChallenge/assets/79246447/fe5e7fbd-93fe-40ea-be09-a902b712f6c3)
</div>

> 배포 링크 <br />
> **https://git-challenge.com/**

<br/>

<p align=center>
  <a href="https://bow-snail-89d.notion.site/MergeMasters-c9a78b108ea445f8b2281f2e6ae80369?pvs=4">팀 노션</a>
  &nbsp; | &nbsp; 
  <a href="https://github.com/orgs/boostcampwm2023/projects/80">백로그</a>
  &nbsp; | &nbsp;
  <a href="https://www.notion.so/04317c11a3d240408383dab9249527a2">기획서</a>   &nbsp; | &nbsp;
  <a href="https://www.figma.com/file/vD1EMVIfvS2vKCMzmShnSV/git-challenge-figma?type=design&node-id=14%3A47&mode=design&t=43Jcxt1P3zB1mMZK-1">figma</a> 
  <br />
  <a href="https://github.com/boostcampwm2023/web01-GitChallenge/wiki/%EA%B7%B8%EB%9D%BC%EC%9A%B4%EB%93%9C-%EB%A3%B0">그라운드 룰</a>
  &nbsp; | &nbsp; 
  <a href="https://bow-snail-89d.notion.site/1fdb15f654164f6cb953ab658cb9a92e?v=10f58ac6aaa443b9900ffd5d43c9e702&pvs=4">개발 위키</a>
</p>

## 📄 목차

- [📄 목차](#-목차)
- [✍🏻 프로젝트 개요](#-프로젝트-개요)
- [🚀 핵심 기능](#-핵심-기능)
  - [자주 마주칠 수 있는 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-시스템-프롬프트-설정하기)
- [🧡 팀원 소개](#-팀원-소개)

<br />

## ✍🏻 프로젝트 개요

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

<br />

## 🚀 핵심 기능

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

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

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

</aside>

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

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

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

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

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

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

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

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

<br />

## ⚙️ 기술 스택

<table>
    <thead>
        <tr>
            <th>분류</th>
            <th>기술 스택</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <p>공통</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Jest-341f0e?logo=jest&logoColor=FF0000">
            </td>
        </tr>
        <tr>
            <td>
                  <p>프론트엔드</p>
            </td>
            <td>
                  <img src="https://img.shields.io/badge/Next.js-000000?logo=Next.js&logoColor=white">
                  <img src="https://img.shields.io/badge/Vanilla extract-ccfbf1">
            </td>
        </tr>
        <tr>
            <td>
                <p>백엔드</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/Nest.js-E0234E?logo=NestJS&logoColor=white"/>
                <img src="https://img.shields.io/badge/MongoDB-114411?logo=mongodb">
                <img src="https://img.shields.io/badge/Mongoose-114411?logo=mongodb">
                <img src="https://img.shields.io/badge/SQLite-07405E?logo=sqlite">
                <img src="https://img.shields.io/badge/TypeORM-FF4716?logo=typeorm&logoColor=white"/>
                <img src="https://img.shields.io/badge/Docker-2496ED?&logo=Docker&logoColor=white">
            </td>
        </tr>
                <tr>
            <td>
                <p>패키지 매니저</p>
            </td>
            <td>
              <img src="https://img.shields.io/badge/Yarn Berry-2C8EBB?logo=yarn&logoColor=ffffff">
            </td>
        </tr>
                <tr>
            <td>
                <p>배포</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/Nginx-014532?logo=Nginx&logoColor=009639&">
                <img src="https://img.shields.io/badge/Naver Cloud Platform-03C75A?logo=naver&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Docker-2496ED?&logo=Docker&logoColor=white">
                <img src="https://img.shields.io/badge/GitHub Actions-000000?logo=github-actions">
            </td>
        </tr>
        <tr>
            <td>
                <p>협업</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/Notion-000000?logo=Notion">
                <img src="https://img.shields.io/badge/Figma-F24E1E?logo=Figma&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Slack-4A154B?logo=Slack&logoColor=ffffff">
            </td>
        </tr>
    </tbody>
</table>

<br />

## 🏛️ 시스템 아키텍처

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

<br />

## 🔎 FE 기술적 도전

### 디자인 시스템 구축

| 컬러, 타이포그래피 시스템                                                                                                       | Semantic Token                                                                                                                  |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/38512eb4-9a99-48bf-a2df-0bf9a89bb83d" /> | <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/d61c67c7-f2b9-4109-b8a5-7fd7ab97a518" /> |

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

### 컴포넌트 테스트 코드

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

### D3를 이용한 데이터 시각화

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

| 라이브러리 비교                                                                                                                 | 문제 해결                                                                                                                       |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/c6c77b30-a9d1-461e-bee8-11df0a317232" /> | <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/b01a4a30-5d4b-4bf2-80c7-8a7dd0e6a3ca" /> |

### UX 개선

| 랜딩 페이지                                                                                                                     | Git 그래프 변화                                                                                                                 |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/aae4947d-5782-4a1e-97b5-23c445cbe573" /> | <img alt="" src="https://github.com/boostcampwm2023/web01-GitChallenge/assets/96400112/1ad9a125-1137-4a8d-b5c0-140360a987c4" /> |

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

<br />

## 🔎 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과 무관한 답변은 하지 않도록 하였습니다.
- 교육을 위해 창의적인 해결법 보다는 학습을 위한 **전형적인 해결법**을 답하도록 하였습니다.

<br />

## 🧡 팀원 소개

|                                     박용준                                     |                                     박정제                                      |                                    박유현                                    |                                    윤채현                                    |
| :----------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |
| <img src="https://avatars.githubusercontent.com/u/50614833?v=4" width="120" /> | <img src="https://avatars.githubusercontent.com/u/104267255?v=4" width="120" /> | <img src="https://avatars.githubusercontent.com/u/96400112?v=4" width="120"> | <img src="https://avatars.githubusercontent.com/u/79246447?v=4" width="120"> |
|                                     **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)                |

web01-GitChallenge

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

web01-GitChallenge

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README