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에 복사해서 브라우저 화면을 갱신하는 방식 (그래서 화면 갱신을 최소화 하는 방식).

 

2. UI 컴포넌트 라이브러리

UI 컴포넌트 라이브러리?
디자인된 UI 구성요소들(버튼, 콤보박스, 리스트박스 등의 화면 구성요소들)의 모음

  • Bootstrap vs. Vuetify 를 고민
  • Bootstrap
    • 트위터가 개발한 역사와 전통의 UI 컴포넌트 라이브러리
    • 반응형 웹디자인 (모바일 화면과 데스크탑 화면을 적절히 지원)
  • Vuetify
    • 커뮤니티가 개발
    • 구글이 제안한 '머티리얼라이즈 디자인' 제공 (플랫 스타일 디자인)
  • 결론: Vuetify 선택
    • Vue 프로젝트와 궁합이 더 좋을 것 같다고 생각

 

3. 모듈 번들러

모듈 번들러?
브라우저와 서버 사이의 통신비용을 낮추고 처리속도를 높이기 위해,
브라우저 안에서 실행될 여러개의 JS 파일들을 한개의 파일로 묶어주는 도구

  • Webpack vs. Browserify 를 고민
  • Webpack
    • JS 파일 뿐 아니라 HTML, CSS, 이미지 파일들도 번들링 가능
  • Browserify
    • JS 파일만 번들링
  • 결론: Webpack 선택 (별로 고민할 거리가 없었음)

 

4. 테스트 프레임워크

  • Mocha vs. Jasmine 을 고민
  • 결론: Mocha 결정 (별로 고민할 거리가 없었음)

(이상)

Posted by ingee

댓글을 달아 주세요