SPA
SPA는 Single Page Application의 약자로 말 그대로 하나의 웹 페이지에서 동작하는 웹 어플리케이션 혹은 웹 사이트를 의미한다.
이러한 방식이 왜 특별한지를 의미하려면 이전의 Static Sites를 알아야한다.
Static Sites란 1990년 즈음의 대부분의 웹 페이지 형태로, 정적 웹 페이지라고 한다.
사용자의 요청에 따라 단순히 새 페이지가 불러와져 보여지는 방식의 웹 페이지를 Static Sites라고 하는데, 이는 위키피디아를 떠올리면 이해하기 쉽다.
SPA는 이러한 방식에서 AJAX라는 기술을 통해 페이지 전체가 아니라 필요한 데이터만을 가볍게 받아올 수 있게 되면서 생긴 방식이다. 필요한 데이터를 받아와 현재 페이지를 동적으로 다시 작성함으로써 사용자는 하나의 웹 페이지를 사용하는 느낌을 받고, 사용성이 높아지게 된다.
이러한 SPA를 작성하는데 사용되는 자바스크립트 라이브러리와 프레임워크는 계속해서 발전하고 개발되는데, 대표적인 것들로 React, Vue, Svelte가 있다. 이에 대해 간단히만 알아보자.
React.js
리액트는 이미 대중적으로 많이 알려진 SPA제작에 사용되는 자바스크립트 라이브러리이다.
페이스북에 의해 개발되었으며 독특하게 컴포넌트의 형태로 개발한다는 특징이 있다.
이 컴포넌트에는 props라는 것을 넣을 수 있는데, 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 수 있다. 다만, 컴포넌트의 계층에서 한 계층으로만 넘겨줄 수 있으므로 자식 컴포넌트의 자식 컴포넌트에게 값을 넘겨주려면 props를 두 번 활용하는 식으로 더 많은 계층을 넘으려면 더 많이 사용해야한다는 단점이 존재하고, 이를 상태관리라는 이름으로 해결해 사용하고있다.
리액트는 컴포넌트 작성에 JS가 아닌 JSX(JavaScript XML)파일의 형태를 사용한다.
JSX는 XML문법을 사용하는 자바스크립트라고 보면 이해가 쉬우며 일반적으로 사용되는 형태가 JSX일 뿐 꼭 그렇게 할 필요는 없다.
같은 이름의 리액트인 React Native가 있는데, React Native는 모바일 어플리케이션 프레임워크로 React.js와는 다르니 헷갈리지 않도록 주의하자.
Vue.js
뷰는 자바스크립트 프레임워크로 고성능의 SPA 제작을 위해 설계되었다.
웹 개발을 단순화하고 정리하기위해 개발되어서 진입장벽이 리액트보다 낮다는 특징이 있다.
리액트는 보다 자바스크립트 하나로 다 해낼 수 있다는 느낌을 주는데, 뷰는 HTML, CSS, JS 세 가지를 다 편하게 사용해볼 수 있다라는 느낌을 준다.
다양한 기능들이 이미 구현이 되어 리액트보다 사용하기 편하고 생산성이 높은 장점을 지녔지만 커뮤니티가 리액트에 비해 조금 더 작고 플러그인이 조금 더 적다는 단점이 있다.
Svelte
스벨트는 독특하게도 라이브러리나 프레임워크가 아닌 컴파일러의 개념이다.
기존의 리액트와 같은 방식은 사용자가 웹에 접근할 때,
개발자가 작성한 코드와 라이브러리의 코드를 둘 다 내려받아 사용해야 한다.
하지만 스벨트는 스스로 코드를 분석하고 컴파일하여 하나의 자바스클비트 코드로 작성한다. 따라서 기존의 웹, 앱 사이즈보다 훨씬 작은 사이즈로 작성이 가능하게 된다.
또한 스벨트는 리액트나 뷰보다 훨씬 빠른 속도를 자랑한다. vanilla js와 같은 속도를 내는 정도로 빠른 속도를 자랑하는데, 외에도 기존에 리액트나 뷰를 공부한 적이 있다면 스벨트를 배우기에 매우 편하다는 장점과, 코드가 깔끔하고 직관적이라는 장점들이 있다.
아직 커뮤니티가 충분히 크지 않다는 단점이 조금 있다는 것 외에는 충분히 매력적인 장점들이다.
무엇을 사용해야하나
사실 무엇을 사용해야하는지는 취향이거나 회사에 의해 정해지게 된다.
특별히 무엇이 더 낫다라고 하기 보다는 각자들의 장점들을 이용해 더 좋은 웹을 작성해내는 것에 중점을 두고 공부를 한 뒤, 사용을 하는 것이 바람직하다고 생각한다.
