프론트엔드 개발환경 구축 - 프레임워크란? 바닐라 JS vs 프레임워크

지난 시간에 이어, 이번에는 프레임워크를 조사해보았습니다. 평소에 저는 팀 프로젝트 외에는 주로 바닐라 JS로 개발을 진행하기 때문에, 프레임워크를 썼을 때의 장점은 무엇인지, 쓴다면 무엇을 선택하는 것이 좋을지를 중점적으로 살펴보았습니다.

 

프레임워크(Framework) 또는 라이브러리

프론트엔드 프레임워크는 컴포넌트별 개발을 용이하게 도와주며, 유저 인터랙션에 따라 반응하는 웹을 구현해야 할 때 DOM과 state의 처리를 도와줍니다. 주로 많이 사용되고 있는 것으로는 라이브러리인 React와 프레임워크인 Vue.js, Angular가 있습니다.

 

우선 Angular는 러닝 커브가 크고, 장기 프로젝트 또는 대형 프로젝트에 좀 더 알맞기 때문에 제외하였고, Vue.js와 React를 비교해보았습니다.

	Vue.js	React
공통	- Component 단위 개발 - Virtual Dom - state 관리 - Server Side Rendering
장점	- Template과 Render Fuction 모두 사용 가능 - 간편한 Syntax와 프로젝트 설정 - 빠른 렌더링과 작은 용량 - 가장 낮은 러닝커브	- Vue에 비해 큰 규모에 더 적합 - Web과 Native 앱 개발에 모두 사용 가능 - 더 큰 개발자 생태계 - 레퍼런스가 많음 - 프레임워크가 아니므로, 다른 프레임워크와 혼용 가능
단점	1개의 파일에 1개의 컴포넌트	Vue.js에 비해 높은 러닝커브

 

 

최종 선정 : React

저는 최종적으로 React를 활용하기로 했습니다. 처음에는 바닐라 JS를 마음에 두고 있었지만 아래와 같은 장점들이 에디터 개발에 있어서 도움이 될 것이라 생각되어, React를 도입하기로 결정했습니다.

( Vue와 React 중 React를 선택한 이유는 다음 포스팅을 참고해 주세요: React vs Vue )

 

• Virtual Dom
  앞으로 개발하게 될 에디터의 경우, 유저의 인터랙션에 따라 자연스럽게 반응하는 것이 중요하다고 생각됩니다. DOM이 빈번하게 변화하게 된다면, Virtual Dom을 활용하여 빠른 렌더링을 하는 것이 유리하다고 생각했습니다. 에디터를 사용하면서 지연이 생기는 것은 최대한 방지하고 싶습니다.
• Component단위 개발
  일단 에디터를 개발한 이후에도, 계속해서 다양한 기능을 추가하고 발전시킬 가능성을 열어두고 싶습니다. 그런 측면에서, component단위 개발이 유지 보수하기에 편리하다고 생각합니다.

 

 

이후에는 본격적으로 개발환경 구축에 돌입하고, 자세한 과정을 기록해보겠습니다.