Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/boostcampwm-2021/web04-canyoufixme
:construction: :bug: 개발자를 위한 디버깅 훈련 플랫폼 :hammer_and_pick: :construction:
https://github.com/boostcampwm-2021/web04-canyoufixme
debugging javascript online-judge programming-challenges react training typescript
Last synced: 2 months ago
JSON representation
:construction: :bug: 개발자를 위한 디버깅 훈련 플랫폼 :hammer_and_pick: :construction:
- Host: GitHub
- URL: https://github.com/boostcampwm-2021/web04-canyoufixme
- Owner: boostcampwm-2021
- Created: 2021-10-25T06:40:50.000Z (about 3 years ago)
- Default Branch: dev
- Last Pushed: 2022-06-23T22:41:55.000Z (over 2 years ago)
- Last Synced: 2024-07-29T19:20:52.316Z (5 months ago)
- Topics: debugging, javascript, online-judge, programming-challenges, react, training, typescript
- Language: TypeScript
- Homepage: https://canyoufix.me
- Size: 1.75 MB
- Stars: 19
- Watchers: 3
- Forks: 7
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛠 Canyoufixme
[](https://hits.seeyoufarm.com)
[](https://github.com/boostcampwm-2021/web04-canyoufixme/actions/workflows/dev-deploy.yml)
# ⚓ 배포 링크
[Can you fix me?](https://canyoufix.me/)
# 🎞 우리의 Memories
[Can you fix me의 모든 기록](https://www.notion.so/longnh214/Canyoufixme-Notion-df8eb573696145f3af32594ed601248d)
# 👨🏻💻 팀원 소개
### 🌚 **J094 박춘화**
- 소개: 성남시 담당 사천왕 && 커피, 밀크티 중독자
- 역할: PT 담당자 && 면접관(질문 많이합니다) 👍🏻
- 보드게임 좋아합니다. 🧐
- Frontend 개발자
- `Python`, `JavaScript`
**👉 [Github Repository](https://github.com/winters0727)**
### 👨🏻💼 **J165 이창엽**
- Canyoufixme CEO + 수원시 담당 사천왕
- 파이팅 담당!!!🤸♂️
- 발표 컨셉 아이디어 뱅크
- 팀원 너무 좋아 사랑해❤️ from. 막내올림 💛
**👉 [Github Repository](https://github.com/dlckdduq1107)**
### 👨🏻💻 **J205 최낙훈**
- 소개: 고양시 담당 사천왕
- 역할: 🦒 🏂 😱
- [g.dev/springboot](http://g.dev/springboot) + `Backend Developer` + `Java`
- New York 가고 싶습니다. I♥️NY 🗽
- ` 사과 농장 주인`
**👉 [Github Repository](https://github.com/longnh214)**
### 🤔 **J206 최영근**
- 소개: 화성시 담당 사천왕
- 역할: CTO, 기술자문, 패키지 개발
- Front-End Dev
- Bug Hunter
- Terminal ❤️
- [g.dev/vim](https://g.dev/vim)
**👉 [Github Repository](https://github.com/Xvezda)**
# ✅ 슬로건, 마음가짐, 모토
안녕하세요! 저희는 **canyoufixme** 수리공 4명으로 이루어진 경기사천왕입니다. 👑
저희 팀의 궁극적인 목표는 ✨**소통을 통한 성장**✨인데요.
🔎 중요한 사항을 결정할 때 하루 이상이 걸릴 정도로 **학습하고 토론**했습니다.
어떤 구조가 좋을지, 어느 기술을 사용할지에 대한 대화를 충분히 나누고, **이유**를 생각해보았습니다. 🤔
💬 말을 하지 않으면 어떤 생각을 하는지 알 수 없습니다.
**매일 스크럼과 회고**를 진행하면서 모든 팀원이 **동일한 방향**을 바라볼 수 있도록 노력했습니다.
📈 타인과 비교하지 않으며, 어제의 코드보다 더 나은 코드를 작성하는 오늘,
팀원과 스스로의 발전에 집중하며 **점진적이고 지속적인 성장**을 추구합니다.
✅ "매몰되지 말자."가 팀 내의 슬로건 입니다.
해결되지 않는 문제를 너무 많이 고민하지 말고 의견교환을 통해 **다양한 관점**에서 솔루션을 찾아가고 있습니다.
# 🗽 프로젝트 소개
> **_"처음 JavaScript 배우는데 너무 어려운데...?"_**
>
> ```jsx
> const banana = 'ba' + 'str' / 2 + 'a';
>
> console.log(banana); //!?
> ```
>
> **Canyoufixme에서 `JavaScript`를 익혀볼까?**
**_개발을 하면서 버그를 잡느라 시간을 낭비한 경험이 있으신가요? 누구나 개발을 하면서 다양한 버그를 맞닥뜨리게 되는데요, 혼자 디버깅을 하면서 버그를 고치는 것도 좋지만 버그를 찾아내고 해결하는 과정을 서로 공유할 수 있다면, 혹은 다른 사람이 마주친 버그를 내가 해결해볼 수 있다면, 더욱 값진 경험이 되지 않을까요?_**
## **코딩은 직접 부딪히고 경험해야 실력이 향상 된다고 합니다!**
- _출제자는 **실제 개발 과정에서 마주칠 만한 버그가 포함된 코드**를 출제합니다._
- _사용자는 디버깅하여 의도된 동작을 하도록 출제된 코드를 수정하고 제출합니다._
- _해당 코드에 대한 `체크포인트✅`를 만족하는 지 확인하면서 디버깅에 관한 능력을 향상시킬 수 있습니다._
# 🚀 기술 스택
# 🚀 페이지별 기능
### 🚧 **메인 페이지**
- 서비스에 대한 간단한 소개
- 전체 문제수, 전체 제출 수, 많이 틀린 문제 등 전반적인 통계 자료 표시
### ⚠️ **문제 리스트 페이지**
- 출제된 문제를 리스트 형태로 확인
- 무한 스크롤(Intersection Observer API) 기능 적용
### 🔑 **풀이 페이지**
- 작성한 코드 실행 가능
- 코드 편집기 에디터에 코드작성 가능(prettier 적용)
- 에디터 크기 조절
- 제출을 통해 문제 채점
### ⌨️ **출제 페이지**
- 출제 전 코드 실행 가능
- 마크다운, 코드 에디터를 통해 문제해설과 코드 작성 가능
- 에디터 크기 조절(3등분)
- 테스트 코드 작성(`?`를 눌러 가이드라인 확인 가능)
### 🏅 **결과 페이지**
- 제출 결과를 테스트케이스 별로 확인 가능
# 🔨 프로젝트 아키텍쳐 / 구조
# 🎯 기술 특장점 소개
### ⚙️ 백엔드 멀티 스레드
- 서비스가 성장하고 트래픽이 집중될 때에도 사용자 경험을 유지하고 싶었습니다.
- 이를 위해 JavaScript의 싱글스레드 환경에서 여러 클라이언트에 대한 동시 채점이 가능해야 했습니다.
- `worker_thread` 와 `vm2`를 이용해서 백엔드에 악의적인 코드를 방지하였습니다.
- 부하 테스트를 통해 현재 동시에 3 건의 채점까지 처리 가능합니다.
### 🚨 프론트엔드 샌드박스, 웹워커 + 보안
- 코드 실행부를 `sandbox="allow-scripts"` 옵션을 주어 `iframe` 태그 내부로 옮겼습니다.
- 웹 워커를 사용하여 코드 실행 시간이 오래 걸리거나 무한 루프에 빠진 경우, 코드 실행이 브라우저의 UI 메인 스레드에 영향을 주지 않도록 했습니다.
- `Content Security Policy` 를 적용하여 XSS 및 CSRF 공격 등에 대한 보안을 강화했습니다.
### 📊 RDBMS + NoSQL 조합
- 회원 관리와 출제한 문제, 풀이한 문제 등 관계가 필요한 데이터에 대해서는 RDBMS인 `MySQL`을 통해 데이터 저장에 대한 신뢰성을 높이고 싶었습니다.
- 가변적인 데이터(ex. string, 배열)를 저장하기 위해서 추가적으로 NoSQL인 `MongoDB`를 동시에 채택하였습니다.
### 📶 Socket.io를 통해 채점 결과 전달
- 채점이 진행되는 상황을 클라이언트에 전달해주고 싶었습니다.
- `Socket.io`를 통해 각 테스트가 완료될 때 마다 데이터를 전달합니다.
- 테스트가 완료되면 세션으로 검증합니다.
- 검증이 완료되면 제출기록을 DB에 저장합니다.
- 클라이언트에서 채점 상황을 실시간으로 확인 할 수 있습니다.
### 📦 모노 레포 구조의 패키지 관리 with styled-component, debounce
- 프로젝트의 패키지 관리 방법으로 `lerna`와 `yarn workspace`를 사용한 Monorepo 구조를 사용하고 있습니다.
- 필요한 기능(`styled-component`, `debounce`)들을 직접 구현한 뒤, 패키지로 만들어 사용하고 있습니다.
### 🐳 Github Action + Docker 사용한 배포 자동화
- Github Action을 사용하여 `dev` 브랜치로 `push` 이벤트가 발생할 경우 서버에 저장된 `[deploy.sh](http://deploy.sh)` 파일을 실행하여 배포가 자동으로 이루어지도록 구현했습니다.
- 또한, Docker를 사용하여 프로젝트 빌드 및 서버 실행을 하며, 빌드 시간을 단축시키기 위해 캐시를 고려하여 패키지 설치 레이어 순서를 배치하였고, `Alpine`이미지 같은 경량화된 이미지를 사용했습니다.
- 빌드된 이미지의 크기를 줄이기 위해 Multi-stage build 방법을 사용하여 불필요한 파일이 포함되지 않도록 하여 경량화 하였습니다.
# 📽️ 데모 영상
[](https://www.youtube.com/watch?v=T3ZrmI_XteA)