프론트앤드 개발환경 구축 - 프레임워크 선정

고은찬·2021년 8월 18일

react.js vue.js 기초 웹 프레임워크

새로 기획하는 서비스(음성채팅 놀이터)에서 어떤 프레임워크를 선택하게 되었는지를 정리한 글

▶바닐라 JS / SPA 프레임워크

기존에는 대부분 바닐라 JS or JQuery를 활용해 웹 개발을 진행했었는데 새로 프로젝트를 진행하면서 프레임워크를 썼을때의 장점은 무엇인지, 쓴다면 무엇을 선택하는것이 좋을지를 중점적으로 조사해보았다.

먼저 기존 방식의 MPA의 방식과 요새 트렌드인 SPA 방식을 살펴보고 새로 개발할 서비스에 뭐가 더 적합할지 고려해보았다. 그래서 우리 서비스에 질문을 던지게 되었다.

1. 만들려는 서비스의 특징(음성채팅 놀이터 서비스)

1. 이벤트가 많이 일어나는가?
-> 그렇다. 방선택, 방 만들기, 음성게임진행화면, 채팅 등 유저의 인터렉션이 많은 편이다.

2. UX가 중요한가?
-> 그렇다. 이벤트가 많이 일어나니 사용자가 느끼기에 편해야 한다.

3. SEO가 중요한가?
-> 중요하다. 서비스이다 보니 당연히 노출이 중요하다.

4. 초기 랜더링 속도가 중요한가?
-> 빠를수록 좋다. 필수로 엄청 빨라야하는건 아니지만

5. 추후 확장 가능성이 있는가?
-> 그렇다. 다양한 음성게임을 추가 할 수 있기 때문

우리서비스에서 가장 중요한 것은 결국 사용성, UX라고 생각했다.
그래서 SPA로 구현하는게 사용성 측면에서 더 좋다고 생각했고 SPA의 단점인
SEO와 초기 랜더링 속도는 SSR을 지원하는 SPA 프레임워크를 사용하므로서 해결 가능하다고 판단하였다.
결론 : SPA 프레임워크 방식

▶프레임워크 왜 쓰는지?

SPA방식을 바닐라 JS로도 구현할 수 있다. 프레임워크가 할 수있는 일은 모두 바닐라 JS로 할 수 있는데 프레임워크를 대부분 사용하는 이유를 찾아보았다.

1. 데이터의 변화를 화면에 적용하기 쉽다.

-> 바닐라 JS로 만들때 화면의 특정요소를 변경하려면
1) 바꾸려는 데이터가 쓰인 DOM Element를 가져온다.
2) 변경 내용을 적용한다.
3) DOM을 업데이트 한다.

여기서 웹 페이지의 규모가 커질수록 몇가지 문제가 발생한다.
1. 어느 데이터가 어느 DOM Element에서 왔는지 기억해야 한다.
2. 데이터의 업데이트가 많아질수록 중복적으로 작성하는 코드 (DOM 선택, 업데이트) 의 양이 많아진다.

이러한 문제는 프레임워크를 사용하면 간단히? 해결해준다.

-> 프레임워크를 사용해 화면의 특정요소 변경하려면
React에서는 state를 , Vue에서는 data를 변경하기만 하면 DOM은 알아서 업데이트된다.
데이터만 바꿔주면 알아서 재 랜더링되는 알고리즘이 있기 때문에 쉽게 DOM 업데이트가 가능하다.
리액트 홈페이지에는 이런 문구가 있다.

React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

2. 컴포넌트화 하기 쉽다.

컴포넌트란 간단히 말하면 (프론트에서) 독립된 역할을 하는 HTML코드 묶음으로서, 독립적인 기능을 단위별로 캡슐화한 단위를 말한다. (헤더,바디,푸터도 모두 컴포넌트 조각이라고 할 수 있다) 독립적이며, 재사용이 가능하다.

<div>
  <img src="#" alt="썸네일">
  <div>
    <h3>글 제목</h3>
    <p>글 내용</p>
  </div>
</div>

이 형식을 반복해서 사용하기 위해 컴포넌트화를 할떄

-> 바닐라 JS

const card = document.createElement('div');
const cardThumbnail = document.createElement('img');
const cardBody = document.createElement('div');
const cardBodyHeader = document.createElement('h3');
const cardBodyDescription = document.createElement('p');
card.appendChild(cardThumbnail);
card.appendchild(cardBody);
...생략

굉장히 길어지고 귀찮다.

-> 프레임워크사용시 (Vue)

<template>
  <div>
    <img :src="imgUrl" alt="썸네일">
    <div>
      <h3>{{ title }}</h3>
      <p>{{ description }}</p>
    </div>
  </div>  
</template>

<script>
  export default {
    name: 'Card',
    data() {
      return {
        imgUrl: '#',
        title: '글 제목',
        description: '글 내용',
      };
    },
  }
</script>

이 컴포넌트가 직관적으로 어떻게 생겼는지 알뿐만 아니라 데이터 바인딩까지 편리하게 된다.

<결론>
프론트 프레임워크를 사용하는 이유?
1. 데이터 갱신이 간편하다.
2. 컴포넌트 단위 개발을 하기 편리하다.

위 이유들은 개발하는 규모가 커지고 데이터가 많을수록 느끼기 좋다.
서비스의 확장 가능성을 고려해서 선택하자.
컴포넌트 단위 개발을 하면 유지보수에 편리하다.

▶프레임워크(or 라이브러리) 선택

SPA 방식을 구현하기 쉽게 도와주고, SSR을 지원하는 라이브러리, 프레임워크들을 찾아보았다.
먼저 여러 통계 사이트들을 참고하여 간추렸다.

sateofjs 라는 프론트 프레임워크 통계 사이트에서 사용량 순으로 정렬한 그래프다.

"늘 그래왔듯이 React와 Vue가 선두를 달리고 있지만, Svelte는 빠르게 선두 자리를 차지하기 위한 매우 진지한 경쟁자로 자리매김하고 있습니다." _stateofjs

컴포넌트 단위의 개발 방식,
virtural DOM

(우리 서비스와 함께 고려)

1. 우리 서비스 향후 고려사항

현재 도입할 것과 추후 도입할 기능을 분리하여 고려해보기

SSR 도입 할 것인가? (바로 도입)
ㅇㅇ -> 어느 프레임워크가 더 잘 지원하는지
국제화 할 것인가? (추후 도입?)
잘 모르겠다
웹 접근성 신경 쓸 것인가? (추후 도입)
ㅇㅇ
랜더링 최적화를 통한 웹 성능(랜더링 속도) (추후 도입)
ㅇㅇ

2. 커뮤니티가 활동적인가?

커뮤니티가 활동적이고 사용자가 많을 수록 자료가 많고 기술스택이 높음
=>svelte 탈락

3. 프레임워크 성능 비교

큰 차이는 없지만 vue 가 살짝 더 우세
https://stefankrause.net/js-frameworks-benchmark8/table.html 벤치마크 참고

4. 라이센스 확인

둘 다 MIT 라이센스여서 독점 소프트웨어에서도 재사용에 대한 제한이 없음 (더 알아봐야 함)

4. 우리 팀의 남은 기간

3개월안에 아웃풋이 나와야 하는 상황이여서 러닝커브가 낮을 수록 좋은 아웃풋이 나올 것 같다.

5. 프레임워크 결정

추가 : storybook, 유닛 테스팅 시간 고려

Angular는 모든 것이 준비된 주방으로 우리의 Web App에 필요한 모든 tools와 재료들을 가지고 있다. 만약 수 많은 개발자들이 일하는 거대한 회사라면, 나는 모든 개발자들이 동일한 패턴으로 일을 하는 Angular를 좋아한다.
React는 oven (오븐) 이다. 케이크를 굽는 과정에서 분명히 추가적인 tools가 필요하지만 이것은 필요한 것을 만드는 과정에서 tools를 선택하는 유연함을 줄 수 있다. 내가 기술적인 회사에서 능력있는 몇몇 senior 개발자들과 함께 일을 하고 있다면 React는 좋은 선택이다.
Vue는 쉽고 효율적인 방법으로 요리를 정말 빠르게 만들 수 있다. 만약 startup 회사에서 새로 생긴 팀에서 엄격한 deadline을 가지고 있다면 나는 VueJS를 좋아할 것이다.

결론

많은 고민 끝에 리액트로 결정하였다.
Vue.js와 React.js 중 고민하였는데 성능적인 면에서는 큰 차이가 없었고,
만드려는 서비스가 일반적이지 않은 서비스여서 조금이라도 자료가 많은 프레임워크가 더 도움이 될 것 같았다. 또 프론트부분도 혼자여서 Vue.js의 협업이 쉬워진다는 장점이 퇴색되었고 어짜피 나중에는 둘 다 하게 될텐데 먼저 상대적으로 더 어려운 걸 해보는게 나의 발전에 더 도움이 될 것이라 생각했다.
또한 기간도 3~4개월이 있기에 리액트를 깊게 파보기엔 충분한 시간이라 판단하였다.

<참고링크>

https://kr.vuejs.org/v2/guide/comparison.html#React
https://daniel-park.tistory.com/20
https://sewcode.tistory.com/29?category=1215986
https://ichi.pro/ko/peuleim-wokeu-seontaeg-bangbeob-beulaujeo-giban-peulojegteu-yong-249958276248672