Codeveloper 개발기

Codeveloper
실시간 협업형 웹 기반 IDE 플랫폼
개발자 이재민
https://github.com/j911

Codeveloper?
코드벨로퍼는 실시간으로 여러 개발자가 함께 코드를 함께 수정
하고 디버깅 할 수 있는 웹기반 IDE 플랫폼 입니다.

목표
Cookie & Session 최소화
Ecma Script 6 문법
보안 이슈 최적화
누구나 이해할 수 있는 코드
그냥 개발하면 재미 없으니까

IDE 구조
파일 목록
편집기
콘솔

DOM
{ explorer }
{ editor }
{ console }
Document Object Model

IDE == 통합 개발 환경
코드 작성 뿐만이 아니라 코드 실행도 가능해야한다

아이디어 1
로컬 쉘에 접근해 코드를 실행한다.

아이디어 1
$ rm -rf /
Drop database
…

아이디어 1
$ rm -rf /
Drop database
…너무
많은
보안
이슈

아이디어 2
가상 환경을 구현해 명령을 실행신다

아이디어 2
Node C(GCC) JAVA

아이디어 2
Node C(GCC) JAVA
보안이슈
해결!

구조
Codeveloper
editor Terminal-API

Terminal-API
https://github.com/J911/Terminal-API

기능
공동 개발자
공동 개발자의 파일
내가 작성한 파일
새파일 만들기

Flow
!
codeveloper
Terminal-API
compile

Flow
!
codeveloper
Terminal-API
C1 C2 C3 C4
run!
유저마다 가상 컨테이너 생성

Flow
!
codeveloper
Terminal-API
C1 C2 C3 C4
Feedback!

Flow
!
codeveloper
Terminal-API
C1 C2 C3 C4
!
!

전체 기능
export const UPDATE_USER = 'UPDATE_USER'
export const UPDATE_FILE = 'UPDATE_FILE'
export const UPDATE_CURRENT_IDX = 'UPDATE_CURRENT_IDX'
export const UPDATE_FILE_LIST = 'UPDATE_FILE_LIST'
export const UPDATE_MASTER_FILE_LIST = 'UPDATE_MASTER_FILE_LIST'
export const UPDATE_CODE = 'UPDATE_CODE'
export const UPDATE_CODE_STATE = 'UPDATE_CODE_STATE'
export const SHOW_DIMMER = 'SHOW_DIMMER'
export const HIDE_DIMMER = 'HIDE_DIMMER'
export const SHOW_MESSAGE_BOX = 'SHOW_MESSAGE_BOX'
export const HIDE_MESSAGE_BOX = 'HIDE_MESSAGE_BOX'
export const SHOW_REGIST_BOX = 'SHOW_REGIST_BOX'
export const HIDE_REGIST_BOX = 'HIDE_REGIST_BOX'
export const SHOW_PROFILE_BOX = 'SHOW_PROFILE_BOX'
export const HIDE_PROFILE_BOX = 'HIDE_PROFILE_BOX'
export const SHOW_LOADING = "SHOW_LOADING"
export const HIDE_LOADING = "HIDE_LOADING"
export const UPDATE_CONTRIBUTORS = 'UPDATE_CONTRIBUTORS'
export const ADD_CONTRIBUTOR = 'ADD_CONTRIBUTOR'
export const SWITCH_CONSOLE_MENU = 'SWITCH_CONSOLE_MENU'
export const UPDATE_CONSOLE_LOG = 'UPDATE_CONSOLE_LOG'
export const GET_USER = 'GET_USER'
export const GET_FILE = 'GET_FILE'
export const GET_MASTER_FILE = 'GET_MASTER_FILE'
export const NEW_FILE = 'NEW_FILE'
export const GET_FILE_LIST = 'GET_FILE_LIST'
export const GET_MASTER_FILE_LIST = 'GET_MASTER_FILE_LIST'
export const UPDATE_FILE = 'UPDATE_FILE'
export const GET_HOSTS = 'GET_HOSTS'
export const GET_CONTRIBUTORS = 'GET_CONTRIBUTORS'
export const ADD_CONTRIBUTOR = 'ADD_CONTRIBUTOR'
mutation-types.js
action-types.js
export const JOIN_IDE = "JOIN:IDE"
export const UPDATE_CODE = "UPDATE:CODE"
export const CHAT_MESSAGE = "CHAT:MESSAGE"
export const CONTAINER_INIT = "CONTAINER:INIT"
export const CONTAINER_CP = "CONTAINER:CP"
export const CONTAINER_COMMAND = "CONTAINER:COMMAND"
socket-types.js

Frontend 구조
codeveloper-frontend
.
├── src
│   ├── components. // 공통 컴포넌트
│   ├── conﬁg // 설정
│   ├── locale // 언어 설정
│   ├── socket // 소켓통신 모듈
│   ├── spa
│      ├── Home.vue // 메인 페이지
│      ├── Login.vue // 로그인 페이지
│      └── IDE.vue // IDE 페이지
│   ├── style // 컴포넌트 스타일
│   ├── App.vue
│   └── main.js
└── index.html

Backend 디렉토리 구조
codeveloper-backend
.
├── src
│   ├── auth // 공통 컴포넌트
│   ├── cookie-session
│   ├── docker // 도커 관련 모듈
│   ├── mysql // 데이터베이스 접근 모듈
│   ├── routes // 라우팅 모듈
│   └── socket //소켓 통신 모듈
└── index.js

Stack 기술 스택
Backend
Frontend
Express JsNode Js MariaDB Socket.ioUbuntu Server
Vue Js Webpack3 AxiosVuex FontAwesome CodeMirror
Docker

OpenSource Project
https://github.com/J911/codeveloper
GitHub

OpenSource Project
https://github.com/J911/codeveloper

DEMO
https://youtu.be/lpQRb---oGI

Codeveloper 개발기

More Related Content

What's hot (11)

Similar to Codeveloper 개발기 (20)

Codeveloper 개발기