Embed Size (px)
Citation preview
Startlink 는 어떻게 ./coding.sh 를 만들었을까 ?Startlink스타트링크http://startlink.iohttp://coding.sh
./coding.sh
• 도메인 coding.sh 를 구매하는 바람에 어쩔 수 없이 만든 것이 절대 아니다 !• 웹 브라우저에서 간단하게 코드를 실행하고 실행 결과를 받아볼 수
있는 아주 간단한 수준의 에디터• 팀원끼리 손발을 맞춰볼 수 있는 간단한 프로젝트
어떻게 만들까 ?
• 일단 화면을 3 분할 하자 . ( 파일 , 에디터 , 콘솔 )• 처음에는 간단한 기능만 구현하자• 콘솔에 직접 입력하는건 나중에 구현하자• 탭도 나중에 구현하자• 파일 트리도 간단하게 구현하자• 언어도 처음엔 C++ 만 지원하자
• 전체화면 UI 를 사용하자• 코드의 실행은 서버에서 알아서 처리하자
웹• 서버 : node.js + express + mongodb, socket.io• UI: Semantic UI• 코드 에디터 : CodeMirror• 파일 트리 : jsTree• 키보드 단축키 : mousetrap• 파일 Drag & Drop: Dropzone.js• 알림 (Alert): alertify.js
전체화면 UI
• 한 번도 전체화면 UI, 화면 자체가 스크롤이 되지 않는 웹 UI 는 만들어 본 적이 없었다 .• 어떻게 하는지 모르겠다 ㅠㅠ• 의외로 간단한 CSS 로 구현
전체화면 UI
body { overflow: hidden; margin: 0; padding: 0; position: relative;}
화면 분할• 먼저 , 사이드바와 컨텐츠를 나누기로 결정• 사이드바의 크기 조절이나 위치 이동은 어렵기 때문에 나중에
구현하기로• 사이드바의 크기를 고정해버리면 모바일 지원이 어려워지지만 , 어쩔
수 없음 ㅠㅠ• 사이드바의 크기는 240px 로 정함
화면 분할
사이드바#sidebar
내용#content
화면 분할 (HTML)
<body> <div id="container"> <div id="sidebar"> </div> <div id="content"> </div> </div></body>
화면 분할 (CSS)
#sidebar { position: absolute; width: 240px; left: 0; height: 100%; padding: 0; margin: 0;}
#content { position: relative; margin: 0px 0px 0 240px;}
메뉴 추가• 화면 상단에 메뉴를 추가하려고 한다 .• 어차피 스크롤이 되지 않는 UI 이기 때문에 , 상단 고정은 의미가 없음• 그냥 div 으로 추가• 높이는 35px 로 고정
메뉴 추가
사이드바#sidebar
내용#content
메뉴 #header
메뉴 추가 (HTML)
<body> <div id="header"></div> <div id="container"> <div id="sidebar"></div> <div id="content"></div> </div></body>
메뉴 추가 (CSS)
#header { height: 35px;}
#content 나누기• 상단에는 소스 코드 에디터 CodeMirror• 하단에는 콘솔을 추가• 콘솔은 출력만 할 것이기 때문에 , 그냥 HTML 로 구현• 에디터와 콘솔의 크기는 사이에 있는 탭을 이용해 마우스로 변경할 수
있어야 함
#content 나누기
사이드바#sidebar
내용#content
메뉴 #header
에디터#coding
탭 #console-tab
콘솔#console
#content 나누기 (CSS)
#content #console-tab { height: 35px; cursor: row-resize;}
• #coding 과 #console 은 어디에 ?• 자바스크립트에 ~
#content 나누기 (JS)
• 먼저 , #coding 과 #console 의 height 를 변경하는 함수를 작성하기
function changeContentHeight(codingHeight, consoleHeight) {
$("#content #coding").css('height',codingHeight);
$("#content #console").css('height',consoleHeight);
}
• 그런데 , 저 높이는 어디서 구하지 ?
#content 나누기 (JS)
• 가장 처음에 크기는 1:1 로 나누자• 아래 4 가지 height 를 합치면 window 의 height 가 되어야 함• #header• #coding• #console-tab• #console
• 간단한 수학을 통해 다음 페이지에 있는 코드를 작성할 수 있다 .
#content 나누기 (JS)
function handleViewportSizeChange() { var h = $(window).height(); var headerBarHeight = $('#header').height(); var contentHeight = h-headerBarHeight; var tabHeight = 35; if (contentHeight >= 0) { $("#content").css('height',contentHeight); var ratio = 0.5; var codingHeight = contentHeight * ratio; var consoleHeight = contentHeight - codingHeight; changeContentHeight(codingHeight, consoleHeight); }}
예쁘게 추가하기• 여기에 Semantic UI 를 추가하고• 5 페이지에 나와있는 것들을 추가한다
?????
• https://github.com/Startlink/coding.sh-demo• 여기를 참고합니다
컴파일과 실행• Python 을 이용해 정보를 받아온 다음 , Docker 를 이용해 컴파일과
실행을 해본다 .• 웹 서버와 Python 은 소켓을 이용해 통신함 .• 다른 좋은 방법도 많은데 왜 소켓을 사용했는지는 아직도 모름• 아마 다른 서버니깐 소켓으로 통신해야지 ! 라는 마음으로 결정한듯 .• 이게 현재 coding.sh 에서 에러가 발생하는 대표적인 이유
컴파일과 실행
웹 브라우저 웹 서버POST
실행 서버소켓
Docker컴파일 및 실행
실행 서버웹 서버웹 브라우저소켓socket.io
Dockerfile
• 원래는 Dockerfile 을 직접 만들어 사용했지만• 인터넷에 좋은 Dockerfile 이 있어서 그걸 사용하기로 했다• https://github.com/Baekjoon/Dockerfiles
실행 서버• https://github.com/Startlink/docker-sandbox-API
분업• ./coding.sh 를 처음 만들 당시에 회사에 두 명밖에 없었고• 만들어야 하는 것도 웹과 실행 서버 총 두 가지 였기 때문에• 완벽한 분업이 가능 !
배포• 웹 서버는 싱글 서버에서 pm2를 사용했다• 실행 서버는 screen 을 이용해 그냥 띄워놓았다 . ( 귀찮아서 절대 아
님 !)
./coding.sh 0.3
• 지금까지 설명한 방법을 사용하는 것이 0.3
./coding.sh 1.0
• MongoDB 대신에 MySQL 을 사용한다• acmicpc.net 회원 정보를 사용하지 않고 자체 회원 정보를 사용• View engine 을 ejs 에서 jade 로 변경• 2.0 을 위해 공개하지 않았음
./coding.sh 2.0
• 소켓을 사용하지 않고 Amazon SQS를 사용• Redis를 이용해 socket.io를 사용• 어떻게 배포할지 고민하다가 결국 3.0 으로 업하고 공개하기로 ㅠㅠ
./coding.sh 2.0
SQS
Redis
웹 브라우저
웹 서버
실행 및 컴파일DockerPOSTsocket.io
subscribe
polling
publish
./coding.sh 3.0
• Amazon Web Services 사용• 배포는 AWS Opsworks를 사용하기로• 실행 서버도 여러 개 사용해서 바로바로 결과를 받아보게 변경• 기능 향상보다는 배포 과정에 집중
해볼까 고민하는 것들• 다른 IDE 처럼 창 이동• 탭 지원• 도움말 ! ( 실행 하는 방법을 묻는 질문이 매우 많음 )• 콘솔을 Shell 처럼 사용할 수 있게 또는 SSH 지원 (c9.io가 너무
좋음ㅋㅋㅋㅋ )• 다양한 프로그래밍 언어 지원
끝 ~
• 감사합니다 .
