팀 노션
|
백로그
|
기획서 |
figma
그라운드 룰
|
개발 위키
](https://hits.seeyoufarm.com){kind=icon}
Git Challenge는 사용자들이 git을 사용하며 발생할 수 있는 다양한 상황을 미리 체험하고, 학습할 수 있도록 도와주는 서비스입니다. 이 서비스를 통해 사용자들은 git 명령어에 대해 실습하고, 실제로 발생할 수 있는 문제 상황을 해결하는 경험을 할 수 있습니다.
총 세가지 난이도로 구성되어 있습니다. 프로젝트를 진행하며 겪을 수 있는 Git 문제 상황을 실습하며 연습해보세요!
- 튜토리얼 정도의 난이도 Git start
- Git start보다 어려운 난이도이며 스토리 형식의 Git advanced
- 원격 저장소와 관련된 문제이며 스토리 형식의 Remote start
터미널 환경에서 직접 Git 명령어를 입력하고, vi 편집기를 사용하며 문제를 풀어보세요.
Git 명령어 동작에 따라 변화되는 Git 그래프를 보며, Git에 대한 이해를 높여보세요.
문제 풀이에 필요한 핵심 명령어와 모범 답안으로 Git을 학습한 후 문제를 다시 풀어보세요.
문제를 맞췄다면 내 풀이를 다른 사람들과 공유해 보세요.
| 분류 | 기술 스택 |
|---|---|
|
공통 |
|
|
프론트엔드 |
|
|
백엔드 |
|
|
패키지 매니저 |
|
|
배포 |
|
|
협업 |
|
| 컬러, 타이포그래피 시스템 | Semantic Token |
|---|---|
- 색상과 글꼴을 디자인 토큰으로 추상화한 컬러, 타이포그래피 시스템으로 디자인 일관성을 유지하고 코드베이스를 더 쉽게 관리할 수 있었습니다.
- 색상과 글꼴에 의미를 부여한 Semantic Token으로 커뮤니케이션 비용을 절약할 수 있었습니다.
- 디자인 변경이 필요할 때 변수에 주입된 색상 코드만 수정하면 되어 초기 개발 단계에서 디자인 변경에 대한 유연성을 확보할 수 있었습니다.
- Describe-Context-It, DCI 패턴으로 테스트 케이스를 계층화하여 테스트 결과의 가독성을 개선했습니다.
- 복잡한 로직을 각 구문, 함수, 분기별로 철저히 테스트하여 기능 추가 및 리팩토링 시에도 컴포넌트의 무결성을 유지할 수 있었습니다.
- 테스트 케이스를 작성하며 놓친 기능 요구사항을 파악하여 TDD로 구현했습니다.
- Problem
- D3 tree는 트리 데이터를 위한 레이아웃입니다. 하지만 Git 로그 데이터는 트리가 아닌 네트워크 그래프 데이터이기 때문에 D3 tree 레이아웃에 적용할 수 없는 문제가 있었습니다.
- Solved
- Git 로그 데이터에서 Multiple Parents 노드를 처리하기 위해, 일부 간선을 분리하여 트리 데이터로 가공한 후 D3 tree 레이아웃에 적용했습니다. 이후에는 분리한 간선을 다시 추가하여 네트워크 그래프를 시각화했습니다.
| 라이브러리 비교 | 문제 해결 |
|---|---|
| 랜딩 페이지 | Git 그래프 변화 |
|---|---|
- Intersection Observer를 사용하여 브라우저 화면에서 현재 보이는 영역을 동적으로 감지하고, 이를 기반으로 스크롤 이벤트 애니메이션을 설계하고 구현했습니다. 이를 통해 서비스에 처음 진입했을 때 사용자에게 적절한 맥락을 전달하고, 자연스러운 화면 전환을 제공하기 위해 노력했습니다.
- 사용자가 입력한 Git 명령어의 동작을 시각적으로 파악할 수 있도록 Git 그래프 변화에 애니메이션을 적용했습니다. D3의 데이터 조인을 이용해 데이터 추가, 수정, 그리고 삭제 애니메이션을 구현했습니다.
- 사용자별 격리된 git 문제 풀이 환경을 제공하면서도, git의 전역 설정들이 다른 사용자들에게 영향을 미치지 않도록 하기 위해 도커 컨테이너를 이용했습니다.
- 컨테이너 생성 시간을 아끼고자 각 문제 별로 미리 생성된 컨테이너 환경에 사용자를 할당하고 새로운 컨테이너를 생성합니다.
- 서버 자원을 효율적으로 사용하기 위해 오래 된(30분) 컨테이너는 자동 정리되며 사용자 재접속 시 log 기반으로 복구됩니다.
- 네트워크 차단, 실행 가능 명령어 검증, 유저 권한 제한 등으로 사용자의 입력을 검증하고 제한했습니다.
- ssh로 컨테이너에 명령을 전달하고 받아오도록 구현했으나 충분히 빠르지 않았습니다.
- 컨테이너 관리 및 조회를 위한 작은 데이터를 단발적으로 전송할 때 효율적인 HTTP/1.1을 사용하는 서버를 추가 도입했습니다.
- HTTP 서버를 추가로 개발하는 것이 쉬우면서도 빠른 방법임을 리서치했습니다.
- 직접 구현한 터미널과 백엔드 구조로는 vi Editor와 같은 상호작용이 불가능합니다.
- 편집기의 동작을 편집할 파일을 읽는 과정, 파일을 편집하는 과정 두 단계로 이원화하여 Git에서 core.editor로 사용할 편집기 프로그램을 직접 작성했습니다.
- Jest는 테스팅 프레임워크로, 단위 테스트 및 통합 테스트를 위해 널리 사용되고, 다양한 테스트 기능을 제공합니다. 사용자의 문제 환경 컨테이너가 Jest 테스트를 통과하면 정답입니다.
- Jest를 사용하면 채점 로직에 대해 멀티프로세스를 이용해 병렬 실행이 가능합니다.
- Jest 자체적으로 테스트 환경 설정과 테스트 실행 환경을 준비하는 과정이 필요했고, 이 때문에 일반 코드로 채점하는 것에 비해 속도가 느렸기 때문에 사용하지 않았습니다.
- HyperCLOVA X 엔진은 충분히 방대한 정보를 대답할 수 있습니다.
- Git 설치나 Git과 무관한 답변은 하지 않도록 하였습니다.
- 교육을 위해 창의적인 해결법 보다는 학습을 위한 전형적인 해결법을 답하도록 하였습니다.
| 박용준 | 박정제 | 박유현 | 윤채현 |
|---|---|---|---|
| BE | BE | FE | FE |
| @flydog98 | @LuizyHub | @YuHyun-P | @yunchaehyun |