- 소개: 성남시 담당 사천왕 && 커피, 밀크티 중독자
- 역할: PT 담당자 && 면접관(질문 많이합니다) 👍🏻
- 보드게임 좋아합니다. 🧐
- Frontend 개발자
Python,JavaScript
- Canyoufixme CEO + 수원시 담당 사천왕
- 파이팅 담당!!!🤸♂️
- 발표 컨셉 아이디어 뱅크
- 팀원 너무 좋아 사랑해❤️ from. 막내올림 💛
- 소개: 고양시 담당 사천왕
- 역할: 🦒 🏂 😱
- g.dev/springboot +
Backend Developer+Java - New York 가고 싶습니다. I
♥️ NY 🗽 사과 농장 주인
- 소개: 화성시 담당 사천왕
- 역할: CTO, 기술자문, 패키지 개발
- Front-End Dev
- Bug Hunter
- Terminal ❤️
- g.dev/vim
안녕하세요! 저희는 canyoufixme 수리공 4명으로 이루어진 경기사천왕입니다. 👑 저희 팀의 궁극적인 목표는 ✨소통을 통한 성장✨인데요.
🔎 중요한 사항을 결정할 때 하루 이상이 걸릴 정도로 학습하고 토론했습니다. 어떤 구조가 좋을지, 어느 기술을 사용할지에 대한 대화를 충분히 나누고, 이유를 생각해보았습니다. 🤔
💬 말을 하지 않으면 어떤 생각을 하는지 알 수 없습니다. 매일 스크럼과 회고를 진행하면서 모든 팀원이 동일한 방향을 바라볼 수 있도록 노력했습니다.
📈 타인과 비교하지 않으며, 어제의 코드보다 더 나은 코드를 작성하는 오늘, 팀원과 스스로의 발전에 집중하며 점진적이고 지속적인 성장을 추구합니다.
✅ "매몰되지 말자."가 팀 내의 슬로건 입니다. 해결되지 않는 문제를 너무 많이 고민하지 말고 의견교환을 통해 다양한 관점에서 솔루션을 찾아가고 있습니다.
"처음 JavaScript 배우는데 너무 어려운데...?"
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인 `MySQL`을 통해 데이터 저장에 대한 신뢰성을 높이고 싶었습니다.
- 가변적인 데이터(ex. string, 배열)를 저장하기 위해서 추가적으로 NoSQL인 `MongoDB`를 동시에 채택하였습니다.
- 채점이 진행되는 상황을 클라이언트에 전달해주고 싶었습니다.
- `Socket.io`를 통해 각 테스트가 완료될 때 마다 데이터를 전달합니다.
- 테스트가 완료되면 세션으로 검증합니다.
- 검증이 완료되면 제출기록을 DB에 저장합니다.
- 클라이언트에서 채점 상황을 실시간으로 확인 할 수 있습니다.
- 프로젝트의 패키지 관리 방법으로 `lerna`와 `yarn workspace`를 사용한 Monorepo 구조를 사용하고 있습니다.
- 필요한 기능(`styled-component`, `debounce`)들을 직접 구현한 뒤, 패키지로 만들어 사용하고 있습니다.
- Github Action을 사용하여 `dev` 브랜치로 `push` 이벤트가 발생할 경우 서버에 저장된 `[deploy.sh](http://deploy.sh)` 파일을 실행하여 배포가 자동으로 이루어지도록 구현했습니다.
- 또한, Docker를 사용하여 프로젝트 빌드 및 서버 실행을 하며, 빌드 시간을 단축시키기 위해 캐시를 고려하여 패키지 설치 레이어 순서를 배치하였고, `Alpine`이미지 같은 경량화된 이미지를 사용했습니다.
- 빌드된 이미지의 크기를 줄이기 위해 Multi-stage build 방법을 사용하여 불필요한 파일이 포함되지 않도록 하여 경량화 하였습니다.
