발표 README.md
- 소개: 성남시 담당 사천왕 && 커피, 밀크티 중독자
- 역할: 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
"처음 JavaScript 배우는데 너무 어려운데...?"
const banana = 'ba' + 'str'/2 + 'a'; console.log(banana); //!?Canyoufixme에서
JavaScript를 익혀볼까?
개발을 하면서 버그를 잡느라 시간을 낭비한 경험이 있으신가요? 누구나 개발을 하면서 다양한 버그를 맞닥뜨리게 되는데요, 혼자 디버깅을 하면서 버그를 고치는 것도 좋지만 버그를 찾아내고 해결하는 과정을 서로 공유할 수 있다면, 혹은 다른 사람이 마주친 버그를 내가 해결해볼 수 있다면, 더욱 값진 경험이 되지 않을까요?
- 출제자는 실제 개발 과정에서 마주칠 만한 버그가 포함된 코드를 출제합니다.
- 사용자는 디버깅하여 의도된 동작을 하도록 출제된 코드를 수정하고 제출합니다.
- 해당 코드에 대한
체크포인트✅를 만족하는 지 확인하면서 디버깅에 관한 능력을 향상시킬 수 있습니다.
흐름도?
-
자세히 보기
- 서비스가 성장하고 트래픽이 집중될 때에도 사용자 경험을 유지하고 싶었습니다.
- 이를 위해 JavaScript의 싱글스레드 환경에서 여러 클라이언트에 대한 동시 채점이 가능해야 했습니다.
-
workerpool모듈을 이용해 일정 스레드 개수 만큼 동시에 채점할 수 있습니다 (with 대기큐)
-
자세히 보기
- 코드 실행부를
sandbox="allow-scripts"옵션을 주어iframe태그 내부로 옮겼습니다. - 웹 워커를 사용하여 코드 실행 시간이 오래 걸리거나 무한 루프에 빠진 경우, 코드 실행이 브라우저의 UI 메인 스레드에 영향을 주지 않도록 했습니다.
-
Content Security Policy를 적용하여 XSS 및 CSRF 공격 등에 대한 보안을 강화했습니다.
- 코드 실행부를
-
자세히 보기
- 회원 관리와 출제한 문제, 풀이한 문제 등 관계가 필요한 데이터에 대해서는 RDBMS인
MySQL을 통해 데이터 저장에 대한 신뢰성을 높이고 싶었습니다. - 가변적인 데이터(ex. string, 배열)를 저장하기 위해서 추가적으로 NoSQL인
MongoDB를 동시에 채택하였습니다.
- 회원 관리와 출제한 문제, 풀이한 문제 등 관계가 필요한 데이터에 대해서는 RDBMS인
-
자세히 보기
- 채점이 진행되는 상황을 클라이언트에 전달해주고 싶었습니다.
-
Socket.io를 통해 각 테스트가 완료될 때 마다 데이터를 전달합니다. - 테스트가 완료되면 세션으로 검증합니다.
- 검증이 완료되면 제출기록을 DB에 저장합니다.
- 클라이언트에서 채점 상황을 실시간으로 확인 할 수 있습니다.
-
자세히 보기
- 프로젝트의 패키지 관리 방법으로
lerna와yarn workspace를 사용한 Monorepo 구조를 사용하고 있습니다. - 필요한 기능(
styled-component,debounce)들을 직접 구현한 뒤, 패키지로 만들어 사용하고 있습니다.
- 프로젝트의 패키지 관리 방법으로
-
자세히 보기
- Github Action을 사용하여
dev브랜치로push이벤트가 발생할 경우 서버에 저장된[deploy.sh](http://deploy.sh)파일을 실행하여 배포가 자동으로 이루어지도록 구현했습니다. - 또한, Docker를 사용하여 프로젝트 빌드 및 서버 실행을 하며, 빌드 시간을 단축시키기 위해 캐시를 고려하여 패키지 설치 레이어 순서를 배치하였고,
Alpine이미지 같은 경량화된 이미지를 사용했습니다. - 빌드된 이미지의 크기를 줄이기 위해 Multi-stage build 방법을 사용하여 불필요한 파일이 포함되지 않도록 하여 경량화 하였습니다.
- Github Action을 사용하여
- 문제 리스트 페이지 입니다.
-
IntersectionObserver API를 이용해서 무한 스크롤을 구현하였습니다.
- 에디터 크기를 좌우 스크롤을 통해 조절할 수 있습니다.
- 조절된 크기는
localStorage에 저장되어 페이지를 이동하더라도 반영됩니다.
- 제출 버튼을 클릭하면 웹 소켓 통신이 이루어지고 채점 결과를 모달창으로 보여줍니다.
- timeout 5초 제한을 두어 무한 루프를 방지했습니다.