이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.

필자는 프론트 개발자가 아니라서 프론트에 대한 생각이 프론트 개발자와 다를 수 있습니다. 낮은 진입 장벽, 쉬운 사용, 유지보수 관점에서만 살펴봅니다.

이전글에서 이어지는글 입니다.

가리사니의 FE는 시간이 지남에 따라 바닐라 -> 라온(직접만든 템플릿엔진) -> React -> Vue.js -> Svelte 로 작성되었습니다. Svelte 에서 한동안 정착할 줄 알았는데 6개월만에 다시 Vue.js로 다시 만들었습니다.

다시 Vue.js 로 만든 이유.

• 가리사니는 SPA를 가정하고 만든 사이트지만 Svelte는 SPA를 전혀 염두하지 않았다.
• 사용자가 만든 SPA플러그인이 여러 개 존재하지만 4~5개를 6개월간 써본결과 쓸 수 없을 정도로 버그가 많다.
• 버그는 주로 페이지 이동시 이벤트가 불리지 않거나, 페이지가 바뀌지 않거나 이벤트가 소멸되지 않는 등 조금 큰 버그들이며 심지어 소멸되지 않은 이벤트가 무한호출되는 경우도 존재했다.
• 사실 패치를 기다리고 있었지만 공식 지원이 아닌 사용자들이 만든 플러그인어여서 그런지 6개월이 지나도록 나아지질 않았다.

Svelte, Vue.js, React 를 다 써보고 느낀 장단점, 추천/비추천 유형.

Vue.js

• 진입장벽 : 하
• 장점
  • 쉽다.
  • 렌더링 부분과 코드부분이 뒤섞여 있지 않고 분리되어 있어서 가독성이 뛰어나며, 이 둘 이 섞인 이상한 코드가 만들어질 확률이 현저히 낮다.
• 단점
  • 컴포지션 API로 조금 나아졌지만 코드가 조금 비대한 편이다.
  • 반복문에서 key지정이 귀찮다.
  • vue 3.0에서 문법적으로 변경된 점이 있는 편이다.
    • 이건 가볍게 보면 안된다 (앵귤러가 버전마다 문법을 바꾼게 망한 결정적 이유라고 생각하기 때문에.)
    • 때문에 플러그인(컴포넌트)이 호환되지 않는다.
• 추천
  • 전문적인 프론트엔드 개발자가 상주하지 않는 경우.
    • 진입장벽이 낮은 만큼 프론트엔드 개발자가 없더라도 금방 이해 시킬 수 있다.
  • 규모가 큰 프로젝트
    • 렌더링 (HTML/CSS), 데이터-처리영역, 스토어 영역이 쓰기 쉽게 나누어져 있어서, 프로젝트가 커졌을 때에도 비교적 가독성이 높다.
  • SI / 은행권처럼 아직도 서버스크립트위에 제이쿼리를 올려 작업하는 경우.
    • 이 3개의 엔진 중 프론트엔드 프로젝트를 만들지 않고 사용할 수 있는 유일한 엔진이다.
• 비추천
  • 프로젝트 맴버가 대부분/전원 초보들로 구성된 경우.
    • 뷰의 장점이 이것저것 자동으로 다 해주는 만큼, 자바스크립트를 거의 모르는 사람이 쓰면 의도와 원리를 모르고 이상하게 쓸 가능성이 높음. (이 현상은 제이쿼리에서도 나타난다.. 참신한(?) 코드들을 볼 수 있다….)

Svelte

• 진입장벽 : 하
• 장점
  • 간결하다는 vue도 씹어먹을 정도의 간결함을 보여준다.
  • 완성된 파일의 용량이 매우 작고 가볍다.
  • #if 같은 문법이 눈에 띄기 때문에 html 코드 사이에서 가독성이 좋다.
• 단점
  • SPA 미지원
  • $: 의 사용이 까다로움.
  • 기능이 매우 적다.
• 추천
  • 사이트의 구조가 단순한 경우.
  • 더 작은 js파일 크기를 원하는 경우.
• 비추천
  • SPA를 사용할 프로젝트 (비추천을 넘어서 사용 유의)
  • 대형 프로젝트나 주요 프로젝트
    • 아직까지 사용된 프로젝트가 적어서 정보를 찾기 어려울 수 있다.

React

• 진입장벽 : 중
• 장점
  • React, Vue, Svelte 에서 사용자 수 사용된 사이트 수가 압도적으로 많다.
  • 이 3가지 중에서 가장 오래되었다.
  • 위 두가지 장점으로 문제 발생시 가장 빠르게 해결책을 찾을 수 있으며, 플러그인도 그만큼 많다.
  • 어느정도 자바스크립트에 대한 이해가 있어야 사용할 수 있다는 것은 반대로 말하면 이 3개의 엔진 중 사용자의 평균 프론트엔트 실력이 가장 높을 수 있다.
• 단점
  • 뷰와 코드가 혼합된 스타일이다.
  • 이 3가지 중에서 진입장벽이 높지만 그만한 장점이 없다.
  • 국내의 베타적인 커뮤니티
• 추천
  • 프론트 엔드 개발자
    • 취업을 생각하면 필수이다.
    • 프론트 엔드 개발자면 사실 이 3가지를 다 할 줄 알아야 한다.
    • 단점만 적어 둔 거 같지만 아직 까지도 국내외에서 가장 많이 사용되는 엔진이다.
• 비추천
  • 신규 프로젝트