2019.10.19. 개발 계획을 정리함
2019.12.23. 개발을 마치고 소감을 추가/정리함
0. 배경
- 간단한 Admin 포탈을 개발해야 하는 상황을 맞이함
- 이에 웹 프론트엔드 개발에 사용할 기술스택을 조사, 그 선택 과정과 결과를 공유함
- 선택 과정에서 https://bestofjs.org 의 자료가 유용했음
1. 웹 프론트엔드 프레임워크
- React.js vs. Vue.js 를 고민
- React.js
- 페이스북이 개발
- Virtual DOM 개념을 활용한 빠른 화면 처리 (Virtual DOM 개념의 원조)
- MIT 라이선스 (페이스북 독자 라이선스 모델이었으나 커뮤니티의 요구로 변경됨)
- Vue.js
- 커뮤니티가 개발
- Virtual DOM 개념을 활용한 빠른 화면 처리 (Virtual DOM 개념 따라쟁이)
- MIT 라이선스 (상용 사용이 가능한 무료/오픈소스 라이선스)
- 결론: Vue 선택
- React.js가 잘 팔린다는 말에 고민했으나 Vue.js 학습 난이도가 낮다는 말에 Vue.js로 결정
Virtual DOM?
브라우저 안에서 DOM-tree 조작 (HTML 요소의 추가/삭제/변경)이 일어나면
이후 Render-tree를 만들고 이를 화면에 출력하는 프로세스가 진행됨.
이는 처리비용이 큰 프로세스여서 DOM-tree 조작을 줄일수록 화면 처리 성능이 개선됨.
Virtual DOM은 별도의 메모리 공간에서 DOM-tree 조작 작업을 수행한 다음
최종 결과만 실제 DOM-tree에 복사해서 브라우저 화면을 갱신하는 방식 (그래서 화면 갱신을 최소화 하는 방식).
==> 2019.12.23. 회고
Vue.js 선택에 후회 없었다. 처음 생각처럼 학습 장벽이 극히 낮아서 쉽게 배워 쓸 수 있었다. Vue.js의 SFC (Single File Component) 개념은 아주 멋졌다. 다음 프로젝트가 있다면 주저없이 Vue.js를 계속 쓸 것 같다.
2. UI 컴포넌트 라이브러리
UI 컴포넌트 라이브러리?
디자인된 UI 구성요소들(버튼, 콤보박스, 리스트박스 등의 화면 구성요소들)의 모음
- Bootstrap vs. Vuetify 를 고민
- Bootstrap
- 트위터가 개발한 역사와 전통의 UI 컴포넌트 라이브러리
- 반응형 웹디자인 (모바일 화면과 데스크탑 화면을 적절히 지원)
- Vuetify
- 커뮤니티가 개발
- 구글이 제안한 '머티리얼라이즈 디자인' 제공 (플랫 스타일 디자인)
- 결론: Vuetify 선택
- Vue 프로젝트와 궁합이 더 좋을 것 같다고 생각
==> 2019.12.23. 회고
Vuetify 선택에도 후회 없었다. Bootstrap의 Grid System을 거의 그대로 지원한다. 그래서 반응형 UI (Responsive UI)를 만들기 좋았다. 라이브러리의 개념체계가 직관적이어서 Bootstrap보다 사용법이 쉽다고 느꼈다. 특히 문서가 정갈하고 좋았다.
3. 모듈 번들러
모듈 번들러?
브라우저와 서버 사이의 통신비용을 낮추고 처리속도를 높이기 위해,
브라우저 안에서 실행될 여러개의 JS 파일들을 한개의 파일로 묶어주는 도구
- Webpack vs. Browserify 를 고민
- Webpack
- JS 파일 뿐 아니라 HTML, CSS, 이미지 파일들도 번들링 가능
- Browserify
- JS 파일만 번들링
- 결론: Webpack 선택 (별로 고민할 거리가 없었음)
==> 2019.12.23. 회고
이건 vue cli가 만들어주는 틀을 그냥 따랐던 것이 잘했던 것 같다. 내가 무엇을 선택해서 쓴다는 느낌이 들지 않았다. 모든 것이 자연스러웠다.
4. 테스트 프레임워크
- Mocha vs. Jasmine 을 고민
- 결론: Mocha 결정 (별로 고민할 거리가 없었음)
==> 2019.12.23. 회고
UI를 위한 유닛 테스트를 작성하지 않았다. 이번 개발 범위가 워낙 단촐해서 테스트 코드를 만드는 것이 오버헤드라고 판단했다. 하지만 이 프로젝트가 살아남는다면 반드시 해야 할 일이라고 생각한다 (다음을 기약).
(이상)
