Weitere ähnliche Inhalte Ähnlich wie 윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018 (20) Mehr von devCAT Studio, NEXON (20) 윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC20182. 발표자 소개
• 윤석주 ( @noricube )
• 9년차 서버 프로그래머
• 데브캣 스튜디오 낫게임팀
• 2012:서울, 퍼즐 주주 제작
3. 이야기 하려는 경험
• 데브캣 스튜디오 서버엔진팀 소속일때
• 기존에 있던 인하우스 웹 프레임워크 Jul7을 만든 이유와
• Jul8로 개선한 이야기
4. 시작하기 전에
• 웹 프레임워크 어떤 거 쓰세요?
• 웹 개발을 처음 시작한다고 하면?
• 아마 React, Angular, Vue.js
5. 툴을 만든다면?
• 게임 운영툴
• 게임 제작에 필요한 도구들
• 게임 내부 페이지
• 아마 대부분 앞에 말한 React, Angular, Vue.js 중에 고를 것
6. 기존 웹 프레임워크 사용 이유
• 프레임워크 제작 시간이 필요
• 만들었다고 좋다는 보장 없음
• 그러니까 있는 것 쓰자
8. 목차
• 왜 인하우스 웹 프레임워크를 직접 만들었나?
• 직접 만들어보니 어땠는가?
• 만든 프레임워크를 실제로 사용해보니 어땠는가?
11. 모던 웹 프레임워크를 썼을때
• 환경 구축이 어렵다
• 기술이 빠르게 변한다
• 러닝 커브가 길다
12. 환경 구축이 어렵다
• 기본 적인 환경 구축에 노하우가 필요함
• Webpack
• 사용하는 라이브러리를 묶어줌
• Babel
• 다른 언어를 변환
• 대부분 브라우저에서 사용 가능하게 ES6->ES5 변환
13. 구축한다고 끝이 아님
• Gulp, Browserify, Webpack
• 환경도 대세가 빠르게 바뀜
• Webpack
• 1년 마다 major version up
• 대세가 된지 2년 정도
14. 기술이 빠르게 변한다
• 지금 핫 한 프레임워크? Vue.js, React
• 5년전? AngularJS
• React는 5년전에
• Vue.js는 4년전에 출시됨
17. 5년 전에 툴을 만들었으면
• Angular v1으로 개발한 툴
• 지금 쓰는 사람도 상대적으로 적고
• 개발하려면 마이그레이션에 큰 비용 소요
18. 5년 뒤를 가정하면
• 우리가 선택하는 프레임워크 사용자가 없거나
• 있더라도 메이저 버전업을 16번 정도 했거나
• React v0.1 -> v16까지 5년!
19. 실제 사례
참고로 React 0.12는 2014년 10월에 출시 됨
@disjukr님 트위터 인용
( https://twitter.com/disjukr/status/961615682419830784 )
21. 러닝 커브가 길다
• 모던 웹 프레임워크는 맥가이버 칼 같음
• 범용적으로 모든 상황에 사용 가능
• 웹 개발의 어려운 점을 많이 해결함
22. 기능이 많다
• 데이터 바인딩
• Virtual DOM으로 변경된 것만 추적
• 변수 watch
• 그 외 많은 편의 기능들
25. 직접 만들었을때 장점
• 필요한 기능만 넣을 수 있다
• 오랜 유지보수가 가능하도록 만들 수 있음
• 러닝 커브를 짧게 유지가능
26. 필요한 기능만 넣을 수 있다
• 필요한 최소한의 기능 구현
• HTML에 이벤트 바인딩
• 요소 객체화
• 리스트 객체
• 텍스트 템플릿 엔진
27. 오랜 유지보수 가능
• 오래 살아남은 라이브러리만 취사 선택 가능
• jQuery
• 출시한지 12년 되었으며
• 경쟁자들(ProtoType, Jindo, …)에게서 살아남음
28. 러닝 커브를 짧게 유지
• 필요한 기능을 최소한으로 구현하고
• 알아보기 쉬운 문법으로 구현해서
• 누구나 1-2시간이면 코딩 할 수 있도록 제작
31. 개발 목표
• 템플릿 파일은 독립적으로 실행 되도록
• 작업도중 템플릿 파일만 열어서 확인 가능하도록
• 디자이너가 템플릿 파일만 수정해도 되도록
33. 개발 목표
• MFC 같은 프레임워크
• 논리적인 요소 정의
• 정의한 요소를 생성
• 이벤트를 바인딩 해서 사용
35. 논리적인 요소 정의
• data-templateId
• 템플릿 요소를 정의
• data-controlId
• 템플릿 요소에 속한 요소들을 정의
49. 뭔가 아쉬움
• 코딩할때 템플릿 요소 이름을 알아야 되서 불편함
• 자동 완성이 됐으면 좋겠다
• 템플릿 파일 파싱해서 codegen 하면?
• 객체를 생성하면 html요소도 자동 생성되도록 매핑
57. 앞에 언급한 장점 극대화
• 러닝 커브가 짧아짐
• 웹을 처음 접하는 프로그래머도 15분만에 코딩 시작!
• 디자이너, 퍼블리셔도 바로 이해하고 사용
• 오히려 vue.js보다 이게 훨씬 편하다고…
58. 앞에 언급한 장점 극대화
• 환경 셋팅도 단순함
• 파서 돌리고 컴파일 하는 것이 끝이라서
• 배치파일만 복사하면 설정 완료!
61. 운영툴
• 웹을 처음 접해보는 게임 개발자도 예제만 보고 기능 추가
• 툴 기능에만 집중 할 수 있었음
• 일관성 있는 환경 제공이 강점
63. NYPC 대회 사이트
• NYPC 대회 진행시 문제 결과를 제출과 채점을 하는 사이트
• 실버바인서버 엔진과 결합하여 쉽게 사용(RPC)
• 템플릿과 구현이 완전히 분리되어 있는 Jul8 덕을 많이 봄
• 디자이너는 다른 팀 소속, 비동기로 작업
64. 비공개 프로젝트 프로토타입
• Jul8로 만든 사이트 중에 제일 큰 규모였는데
• 두 달 동안 빠르게 프로토타이핑을 진행 가능했음
• 결과물도 만족스러웠고 신입 프로그래머도 교육 없이 바로 투입
• 모던 웹 프레임워크 기능이 필요한 부분이 있어 vue.js로 교체
66. 정리
• 직접 만든 프레임워크를 사용해서
• 러닝 커브를 짧게 유지하고
• 오래 유지보수 가능한 환경을 만들고
• 도구를 사용하여 개발환경을 개선하는
• 이런 환경에서 개발하는 것도 꽤 괜찮은 선택