많이 늦은 실무자들이 전하는 최신 프론트엔드 프레임워크 Angular, React, Vue 이야기 후기

이 글의 처음이자 마지막 사진이다.

  시간이 조금지나 그 때의 감정을 오롯히 적을 수는 없겠지만, 그 때 당시 작성한 메모를 보니 어느정도 그때의 분위기나 내용이 생각나게 되어서 후기를 작성하게 되었다. 이번 글은 각 세션의 대한 설명을 작성하고 느낀점을 짧게 얘기한 다음 마지막으로 전체 세션에 대한 느낀점을 작성하도록 하겠다.

  지난 8월 27일 서울 역삼동 마루 180 지하 1층에서 진행된 '실무자들이 전하는 최신 프론트엔드 프레임워크 Angular, React, Vue 이야기'라는 밋업을 다녀왔다. 서울은 익숙하지 않지만, 저번 PWA Roadshow도 동일한 장소에서 했기 때문에 무리 없이 찾아갈 수 있었다. 

  물론 나도 Angular를 이용해서 프로덕트를 만들고 있는 실무자이지만 사실 내가 잘하고 있는지 의문이 들때가 많기 때문에 다른 사람들은 어떻게 하고 있는지 궁금해서 갔다 왔다. 참가비는 5천원이었고 그 참가비는 스타벅스 커피와 각종 다과가 되었다. 커피를 홀짝 홀짝 먹다보니 세션마다 먹게 되었다.

  세션은 총 4개 세션이었고 각 세션마다 그 프레임워크(라이브러리)의 성격을 잘 나타내 준 것 같았다. 각 세션의 발표자료는 아래 리스트의 링크를 따라가면 볼 수 있다. 리액트 세션의 발표자료는 찾지 못했다.

• 목적에 맞게 Angular, React, Vue : https://www.slideshare.net/GunheeLee2/angular-react-vue
• 엔터프라이즈 프로젝트와 리액트
• Angular 기본 개념 잡기 : https://www.slideshare.net/janghyunhan/angular-79195313
• One moment, Vuejs 도입기 : https://www.slideshare.net/ssuserd3aacb/vue-js-79169830/1

목적에 맞게 Angular, React, Vue

  이 세션에서는 프론트엔드가 이렇게 성장하게 된 배경과 어떤 프레임워크를 어떤 프로젝트에 선정해야 할 지 각 프레임워크의 특징을 설명하면서 이야기를 풀어나갔다.

프론트엔드 성장 배경

  프론트엔드가 이렇게 성장하게 된 배경은 브라우저의 성능이 높아짐에 따라 프론트엔드의 로직이 복잡해지고 프론트와 백엔드의 분리가 이뤄지면서 더욱더 명확해졌다. 또한 모놀리틱한 서비스보다는 마이크로 서비스가 점점 대세가 되면서 프론트엔드의 중요성이 점차 대두되었다.

  그런 상황에서 Jquery -> backborn -> Angularjs, React -> Angular, Vue 순으로 프레임워크가 점점 늘어남에 따라 프론트엔드 개발자는 어떤 프레임워크를 선택해야 하는지에 대한 선택의 기로에 서있다.

  프론트엔드 개발자는 '클라이언트/서버 사이드 렌더링',  '프레임워크/라이브러리',  '언어' , '유지보수' 등의 선택 조건을 가지고 있으며, 프로젝트에 맞는 프레임워크, 라이브러리를 선택해야한다. 그럼 각각의 프레임워크를 각 파트별로 살펴보자.

각 기술의 특징

1. 코드 구성

• Angular는 로직과 템플릿, 스타일이 각각의 파일로 분리 되어 있다. 
• React는 로직과 템플릿, 스타일이 한 곳에 있다. 또 ES6와 ES5를 둘다 사용할 수 있다.
• Vue는 로직과 템플릿, 스타일이 어느정도 분리가 되어 있다. Angular 처럼 파일 분할을 할 수도 있으나, Vue의 철학은 한 곳에 코드를 놓길 권장한다.

  코드 구성 면에서 봤을 때, 개발자에게 자유를 준다는 것은 같은 프로젝트를 수행할 때 커뮤니케이션을 해야하는 것이 많아진다는 것이다. 

2. 타입체크

Angular는 Typesript를 이용하기 떄문에 타입 체크가 가능하다.

Vue도 라이브러리 상에서 타입체크를 해준다.

3. React

React는 이벤트 처리를 Redux라는 라이브러리를 통해 진행한다.

React Native, Electron, React VR을 통해 멀티 플랫폼에 대한 대응이 가능하고, 인력관리에 있어서 유연성이 있다.

4. Vue

Angular와 React의 장점을 잘 섞어 놓았다.

Angular에서는 양방향 바인딩, 디렉티브를, React에서는 코어와 컴페니언의 분리, Virtual DOM의 장점을 가져왔고, 코드 구조는 두 프레임워크의 장점을 잘 버무렸다.

  이 세션에서는 각 프레임워크(라이브러리)의 특징을 잘 설명했다고 생각한다. Angular, React, Vue를 모두 써보지 않은 사람한테도 어렵지 않은 수준이었고, 다른 프레임워크와 내가 써본 프레임워크를 비교를 할 수 있는 좋은 기회였다. 이 세션을 듣고나서 다음에 배울 언어에 대해 React와 Vue 사이에서 고민하던 나는 다음에는 Vue를 공부해보면 좋겠다 라는 생각을 확고하게 해주었다. (참고로 이후 세션에서도 리액트는 그렇게 좋은 평을 받지 못한다.)

엔터프라이즈 프로젝트와 리액트

  이 세션에서는 네이버 에디터를 개발하면서 리액트를 선정하게된 계기와 프로젝트를 수행하면서 느낀점을 이야기하는 방식으로 진행 되었다.

1. No React - 에디터 개발 초기

  네이버 에디터 개발 초기에는 Jquery와 underscore를 이용해 개발했다, 요구사항은 상당히 복잡한데 변경도 많은 서비스였다. 소잡는데 닭 칼을 들고 있던거 같았다.

2. React + Flux - 카드형 에디터 개발

  프레임워크를 선정하기로 하였고 그 당시 Angular 2는 베타 버전이어서 React를 선정했다. 하지만 아직 React에 익숙하지 않아 Jquery와 React의 불편한 동거가 시작되었다. 또 설계를 잘 하지못해 컴포넌트가 난잡해지고 데이터의 흐름이 예측하기 힘들어졌으며, 스토어가 비대해져서 슈퍼 스토어가 되어버렸다. 또 마크업 개발자와 이야기를 더 했어야 했는데 그러지 못해 용어가 통일 되지 못했다.

3. React Native + Redux - 모바일 에디터 개발

  이전의 잘못을 다시 하지 않기 위해 스터디와 설계논의를 열심히 하고 코드 리뷰와 단위 테스트도 빡세게 했다. 또 Flux에서 Redux로 바꾸게 되었는데 더 좋아졌다는 사람과 간단한 동작도 변경할 곳이 많아져서 싫어하는 사람도 있었다. 그래서 Redux thunk가 쉽고 단순하길래 가져다 썼는데 막 쓰기에 좋았지만 테스트 하기 어려웠다.

4. React + Mobx - No React 리팩토링

  컴포넌트를 다 뜯어내서 개발하고 하나의 코어 컴포넌트에서 조합하는 형태로 만들자고 얘기를 했다. 이에 따라 컴포넌트간에 상태가 엮에는 상황에서는 리액티브하게 상태를 바인딩할 수 있도록 하려했고 MobX를 채택하게 되었다. 하지만 Redux보다 더 작은 바인딩 사이즈 때문에 고난을 겪고 있다.

5. 발표자 견해

  리액트는 뷰를 잘 만질 수 있다. 하지만, 리액트만 가지고는 아무것도 할 수가 없다. 리액트에 따르는 것들을 이용하기 위해서는 스터디등 비용이 발생한다. 장점과 단점은 동전의 앞과 뒤이다. 언제든지 장점이 단점이 될 수가 있고 단점이 장점이 될 수 가 있다. React way는 이해하되, 기술에 의존하지 말것, How 보다는 Why를 더 잘 알아야한다.

  이 세션은 네이버 에디터를 개발하면서 React를 사용한 것을 가감없이 날것 그대로를 잘 보여줬다고 생각한다. 커뮤니케이션의 중요성과 How보다는 Why를 더 잘 알아야한다는 말도 좋았던 것 같다. 리액트를 많이 써본 만큼 리액트에 대한 단점, 불편한 점을 잘 얘기 해줬다고 생각한다. (다른 세션에서는 소개하는 프레임워크가 이렇게 저렇게 해서 좋다는 걸 말했다.)

Angular 기본 개념 잡기

  이 세션에서는 Angular를 처음 써보는 사람들, 아직 써보지 않은 사람들을 위해 Angular가 어떤 프레임워크인지 소개를 하는 세션이었다. 글을 쓰기 위해서 PPT를 다시 보았는데 많은 내용을 잘 정리해 놓으셨고, 그 내용들을 모두 소개하면 글이 너무 길어 질것 같아 중요하다고 생각되는 몇가지만 추려서 소개하겠다.

1. Angular는 종합 프레임워크다.

  종합 프레임워크기때문에 전체를 아우르는 구조를 제공한다. 이 부분에서 경쟁 프레임워크와는 큰 차이를 보인다. 뷰에서 부터 테스트까지 많은 모듈을 가지고 있으며, 기본 제공되는 모듈이기 때문에 각 모듈의 정합성을 보장할 수 있고 자연스러운 데이터 연결이 보장된다.

2. Angular는 컴포넌트 기반이다.

  Angular가 MVC 패턴이라고 하지만, Component Based Framework가 더 맞다고 생각한다. Angular는 템플릿과 클래스 코드로 이루어진 컴포넌트를 가지고 있다. 이 컴포넌트는 어노테이션을 통해 Angular에 등록되며, Angular는 객체의 생성, 주입을 관리하고 컴포넌트에 대한 라이프 사이클을 지원한다. 만들어진 컴포넌트는 조합되어 트리 형식으로 구성된다.

3. Angular는 모듈화를 지원한다.

  Angular의 모듈은 ES6의 그것을 대체하는 것은 아니고 연장선에 있다고 본다. Angular의 모듈은 @NgModule인데 여기에 여러 key들을 이용해 모듈을 제어한다. (필자의 의견을 첨부하자면 @NgModule은 모듈에 속하는 컴포넌트에 대한 레시피라고 생각한다. 이 컴포넌트를 만들기 위해서는 이러저러한 것들이 필요하고 결국에는 이러저러하게 하면 잘 동작한다. 라는 것을 명시하기 때문이다.)

4. Angular는 최신 트렌드를 적극 도입한다.

  Angular에서는 웹 컴포넌트, PWA, 크로스 플랫폼, 리액티브 프로그래밍, 서버 사이드 렌더링, 머티리얼 디자인, CLI, Augury(디버깅 툴)을 지원 혹은 지원할 예정에 있다.

5. 지금 공부해야 할 것과 앞으로 공부해야 할 것

  Angular를 쓰기 위해선 Typescript, Angular, 컴포넌트 기반 아키텍트, 리액티브 프로그래밍을 공부해야하며, Angular를 더 잘 쓰기 위해선 Webpack 최적화, 서버 사이드 렌더링, SEO, 머티리얼 디자인, 애니메이션을 공부해야한다.

  이 세션은 앞서 말했듯 Angular를 써보지 않은 사람들을 위해 Angular가 어떤 것인지 소개하는 세션이었기 때문에 Angular를 실제로 사용해본 필자로써는 딱히 새로울 것이 없는 세션이었다. 조금 아쉬운 느낌은 있었지만, Angular를 써보지않은 사람들이 듣기에는 무겁지도 않고 Angular를 잘 알아갈 수 있는 기회였다고 생각한다. 다른 세션에서도 Angular에 대해 칭찬을 계속 한것 같아서 Angular의 단점을 조금 소개 해줬어도 괜찮지 않았을까 생각한다.

One moment, Vue.js 도입기

  이 세션은 One moment라는 꽃배달 서비스를 하는 회사에서 Vue를 이용해 홈페이지를 만드는 것을 기반으로 Vue를 소개했다. 발표자님이 개인적으로 얘기하시면 할인 쿠폰을 주신다고 발표하시기 전에 말씀하셨지만, 쓸 일이 없어서 한 귀로 듣고 한 귀로 흘렸다. 역시나 PPT가 아주 잘 되어 있고 모든 슬라이드를 소개하게 되면 글이 너무 길어질 것 같아 필요한 부분만 잘라 소개 하겠다. 

1. Vue.js 소개

  Vue의 장점은 *.vue 파일 하나가 단일 컴포넌트로 template, script, style을 가진다. 낮은 러닝커브를 가지고 있으며, 하루만에 공식문서를 정독하고 다음 날 바로 실무에 적용할 수 있었다. 한국어 문서가 아주 잘 번역이 되어있으며, 커뮤니티가 친절하다.

2. 레거시와의 전쟁

  메인 페이지에서 불러오는 SQL 수는 421 쿼리였다. 어느 한 타임에서 동시 접속자 수를 보니 256명이었다. 또한 결제 루틴 상에 문제가 있어 결제를 했음에도 불구하고 관리자 페이지에 정보가 없는 경우가 파다했다.

  결국 처음부터 다시 만드는 수준의 개선이 필요했고, 백엔드는 확장성을 고려해 RESTFul API를 사용하기로 했고, 프론트는 가장 빨리 적용할 수 있는 프레임워크를 써보자고 생각해 Vue를 선정했다. 따라서 시스템 아키텍쳐도 수정이되었고 컴포넌트 별로 페이지를 구성할 수 있어서 유지보수에도 용이했다.

3. 오픈소스 만들기

  서비스에서 음력달력이 필요해 라이브러리를 찾아봤지만 중국어 밖에 없었다. 그래서 하나 만들기로 했다. Webpack과 Yarn을 이용해 환경을 구축하고 음력달력을 Vue로 만들었다. 그 후 데모 사이트를 만들어 코드와 같이 Github과 npm에 올렸다. i18n을 지원하기 위해 코드를 몇가지 수정했다. 그 후 awesome-vue 리포지토리에 등록을 했고, 몇 주후 이탈리아어를 추가 해달라는 PR이 왔다.

  이 세션은 프론트엔드 프레임워크를 처음 써보는 사람이 하나의 프로젝트를 수행하면서 겪은 이야기를 재미있게 풀어나갔다고 생각한다. 그 와중에 Vue에 대한 설명을 빼놓지 않고 설명하면서 지루하지 않은 세션이었다.(다른 세션이 지루했다는 것은 아니였다. 보통 마지막 세션쯤 되면 지루해지지 않는가...) 오픈 소스를 만드는 필자에게는 새로운 경험도 소개를 해줬기 때문에 흥미가 있었던 것 같다. 그리고 Vue의 개발 방법이 겉보기에는 Angular와 크게 달라 보이지 않아서 아마도 다음에 공부하게 되면 Vue를 하지 않을까 라는 생각을 들게한 세션이었다.

전체적인 느낀점

  실무에서 프론트엔드 프레임워크를 사용하시는 분들을 데려다가 프레임워크를 써보지 않은 사람들에게 "우리 프레임워크가 어떤 애냐면요~" 하는 느낌으로 친절하게 설명해주는 느낌으로 진행된 밋업이었다. 세션도 각 프레임워크당 하나씩 들어가 있어서 편중되지 않은 것도 좋았고, 각 세션마다 배울 점 혹은 느낀 점들이 있어서 아주 좋았다. 

  하지만, 나는 밋업에 참가하기 위해서 11시에 서울역에 도착하기 위해 5시부터 집에서 나서야 했고 움직이면 돈이 들기 때문에 쓴 돈도 꽤 됐다. '그것들을 감수 할만한 밋업이였냐?'라고 물으면 나는 '조금 부족한 감이 있었다.' 고 할 것 같다. 왜냐하면, 실무자들이 전하는 이야기였지만 프레임워크 판촉행사의 느낌이었다. 실제 프레임워크를 써본 사람만이 할 수 있는 이야기를 하지 않았다고 생각한다. (리액트 섹션에서는 어느정도 나왔다고 생각하지만) 이 프레임워크가 이래서 조금 별로 라던지, 이게 고쳐지면 정말 좋을 것 같다던지, 이게 문제기 때문에 이런 프로젝트를 할 때는 쓰면 안된다던지. (나는 Angular를 쓰면서 서드파티 라이브러리를 쓸 때 typescript로 모듈이 있지 않으면 일반적인 방법으로는 사용할 수 없다는 게 상당히 아쉬운 부분이라고 생각한다. 또 cli를 이용하면 webpack 커스터마이징이 어려운 것도 단점이라 생각한다.) 이런 것들은 실제로 써본 사람만이 할 수 있는 이야기이기 때문에 그런 부분들을 조금더 이야기를 해줬다면 더 좋은 밋업이 되지 않았을까 생각해본다.

  위와 같은 아쉬운 점이 있다고 하더라도, 다음에 이런 기회가 있으면 다시 참석할 예정이며, 혹시라도 내가 더 성장을 해서 발표를 할 수 있다면 더 배우는 것이 많지 않을까 라는 생각을 할 수 있는 계기가 되었다.