‘스벨트로 시작하는 웹 프런트엔드’ 출판 후기
내가 Svelte를 알게된 것은 2020년 어느 때인가로 기억한다. 이 지긋지긋한 코로나 덕분에 밖에 나가기 보다 집에있을 시간이 많아지기 시작해서 인지 그때부터 흥미가 있을 만한 새로운 기술을 더 많이 찾아보게 되었고 그중에 하나가 바로 Svelte였다.
당시 Svelte에 대해서는 국내에는 별로 정리된 자료도 없고해서 강좌를 한번 만들어 보는 것도 좋을 것 같아 온라인 강좌를 만들게 되었고, 그것을 계기로 해서 결국 출판이라는 전혀 생각지도 못한 도전을 하게 되었던 것으로 기억한다. (출판사로 부터 전화를 받게 될줄이야…)
Svelte에 대한 책을 쓰다 보니 문득 떠오른 생각은 정말 몇년 사이에 프런트엔드와 관련된 기술은 많은 변화가 있었다는 것이다. 개인적으로 프런트엔드라는 분야가 태동된 것은 Jquery가 나온 후가 아닌가 생각한다. 2000년대 초중반 까지만 해도 고급 UI들은 대부분 플래시로 된 경우가 대부분이었다.(물론 유사 기술로 실버라이트? 도 있었다. ㅎ) 하지만 Jquery가 나오고 플래시로 만들어진 많은 것들이 Javascript로(아니 Jquery로) 갈아 엎어 갔던 것을 기억한다. 이때 농담으로 Jquery는 아는데 Javascript는 모른다는 말도 있었을 정도로 Jquery가 끼친 영향력은 대단했던 것으로 기억한다.
또 이후에 node.js가 나타나 백엔드 서버도 이제 Javascript로 만들 수 있게 되면서 Javascript라는 언어의 위상이 달라지 게 되었던 일도 있었던 것이 떠오른다. Javascript가 이렇게 계속해서 발전해 가면서 Jquery의 핵심 기술인 돔체인을 통한 UI 개발도 조금씩 새로운 변화를 맞이했던 것 같다.
그때 떠오른 기술이 Angular 1.0 였던 것으로 기억한다. Angular 1.0 도 개인적으로 참 즐겁게 사용 했었던 것 같다. Angular 1.0 버전에서 가장 핵심적인 기능으로는 scope를 이용한 양방향 바인딩 이었던 것으로 기억한다. 하지만 이것도 잠시, Angular가 버전 2로 되면서 거의 모든게 갈아엎어졌고, 이때 먼가 회의감? 이 들어 당시 뜨고 있던 React라는 것으로 관심을 돌려버렸다. (물론 Angular v2에서 이런 커다란 변화를 가진것에는 그만한 이유가 있었던 것 같다. scope중심으로 양방향 바인딩을 하게 되면 앱이 규모가 커지면 커질수록 많은 문제가 생길 수 있었던 것으로 기억한다.)
하지만 개인적으로 React에 대해서는 그리 좋은 기억이 있지는 않다. 이건 React가 문제가 있었다기 보다. 내가 주로 사용하던 방법들과 너무 다른 이질적인면들 때문 이었던 것 같다. 대표적으로 내가 적응하기 힘들었던 점은 크게 2가지 였다. jsx와 redux가 그것이다.
jsx의 경우 자바스크립트 안에 Html을 작성하는 부분이 먼가 계속해서 부자연 스럽게 느껴졌다. 사실 이부분은 위에서도 말했지만, Jquery, angular 그리고 blaze(아마도 모르는 사람이 많을 것 같은데 Meteor라는 플랫폼에서 front를 담당하는 라이브러리이다.) 모두에서 jsx처럼 html영역을 js에 합치는 방식보다 템플릿을 이용한 방식의 기술들만 써와서 그런게 아닌가하고 생각한다. 즉 이부분은 기술의 옳고 그름이 아닌 지극히 개인적인 취향의 문제라고 보는게 맞을 것이다. 만약 내가 React로 처음 프런트엔드를 다루었다면 다른 툴들이 이질적으로 다가왔을 수도 있으니 말이다.
그리고 또하나 redux가 정말 큰 벽으로 다가왔다. 상태값을 중앙에서 처리한다는 것은 좋은데 먼가 하나 변경하기 위해서 action, reducer, dispatch 등의 과정을 거쳐야 한드는게 참 어렵게 느껴졌던 기억이 난다. (물론 지금은 Hooks, Recoil 등이 등장하면서 좀 더 편하게 상태관리를 할 수 있는 것으로 알고 있다. ) 여튼 이 두가지의 경험으로 React와는 가까워지지 못했다.
그러다 만난것이 Vue 였다. Vue는 기본적으로 템플릿을 이용한 방식을 사용했고, Vue의 상태관리 툴인 Vuex는 확실히 Redux보다 심플해서 사용하기가 좋았다. Vuex의 경우 Mutation은 동기 Action은 비동기 이부분만 기억하고 있으면 사용하는게 크게 무리는 없었다.
그렇게 Vue가 나의 프런트엔드 최종 종착지일 줄 알았지만, 우연히 Svelte라는 툴이 치고 올라오는 것이 눈에 들어왔다. 그리고 Svelte 기본 예제 코드를 보고 살짝 당황했었다. 다른 프레임워크들을 사용했던 경험이 있던 나로서는 다음의 코드는 먼가 빠진게 있을 것 같은 느낌이 들 수 밖에 없었다. 자바스크립트 영역을 보면 count변수 선언과 이를 증가시키는 함수가 전부다. 물론 코드 상으로는 이상할게 없다. 하지만 분명 이 코드는 프레임워크 예제 코드라는 것이 이상한 부분이었다. 왜냐하면 스크립트영역의 코드에 프레임워크적인 문법이 하나도 들어가 있지 않았기 때문이다.
책에서도 썼던 것으로 기억하는데 Svelte 블로그에 첫 번째 글이 “Frameworks without the framworks” 라는 제목으로 시작한다. 이 문장은 위의 코드를 마치 한문장으로 설명한 구절이라고 생각한다. 프레임워크라는 것은 결국 어떤 틀을 제공하게 된다. 하지만 그 틀이 없이 결과물을 낼 수 있다면 그 틀이 어느 순간 부터 도움이 되기 보다 장애물이 될 수 있다는 생각을 이 때 하게 되었다. 개인적으로 Svelte에 매력을 느끼는 가장큰 이유가 바로 이런 심플함 이었다.
여튼 앞으로 어떨지 모르겠지만 현재까지 내 마음을 가장 사로잡은 프런트엔드 프레임워크는 Svelte이다. 단지 한가지 아쉬운 점이 있다면 아직까지 국내에 이 Svelte사용자가 아직은 많지 않다는 것이다. 책을 쓴 것도 조금이라도 국내 유저가 늘어나길 바라는 마음도 있고, 언젠가 이 코시국이 끝나면 사용자들이 모여서 함께 Svelte관련 컨퍼런스 같은것도 했으면 하는 바램이 있다.
‘스벨트로 시작하는 웹 프런트엔드’ 소개
이제 책에 대해서 조금 얘기해보도록 하겠다. 책의 구성은 다음과 같다. 챕터1에서 챕터7까지는 Svelte에 대한 기본 사용방법들을 정리했다. 개인적으로 생각하는 Svelte의 가장 기본적인 기능은 스크립트영역에서 생성한 상태값을 바탕으로 마크업영역(HTML영역)에 내가 원하는 결과물을 나타내는 것이다. 그리고 일반적인 프런트엔드의 핵심 역할도 이와 같다고 생각한다. 이 상태값과 상태값을 이용한 마크업영역에서의 표현에 대한 내용이 바로 이 챕터3, 챕터4 그리고 챕터5의 store가 해당한다. 사실 이정도만 기억하면 Svelte를 이용해 무언가를 만드는데 크게 무리가 없을 것이다.
다음으로 챕터7에는 첫번째 프로젝트인 Todo 만들기가 진행된다. 제일 단순한 프로젝트인 Todo만들기를 구현해 보면서 지금까지 배운 내용이 실제로 어떻게 적용될 수 있는지에 대한 감을 잡도록 도와주는 챕터라고 생각하면 된다. 이 챕터에서 유의해 볼 내용은 일단 기본기능으로 만들어진 Todo앱을 Svelte 내장 상태관리툴인 store를 이용해 리팩토링 하는 부분이다. 사실 react, vue 초기만 하더라도 redux 나 vuex 와 같은 중앙 상태관리 툴들은 덩치가 있는 앱에서만 사용하면 된다라고들 말했지만 어느 때부턴가 기본적으로 함께 가야하는 필수 옵션으로 여겨지기 시작했다. 이렇게 된 이유는 어떤 앱이라도 계속해서 확장되고 어느순간부터는 상태관리툴 없이는 개발이 매우 힘들어 지는 시기가 올 수 밖에 없기 때문이 아닌가하는 생각을 해본다. 여튼 챕터8에서는 Todo앱을 store가 없이 개발할 때와 store를 두고 개발할 때 어떤 차이점이 있고, 왜 이 store를 이용해 상태관리를 하는게 좋은지 알 수 있도록 구성을 해두었다.
다음으로 챕터9~ 챕터11에서는 서버통신과 이를 이용한 간한단 SNS서비스를 만드는 부분이다. 실무에서는 많은 경우 백엔드서버가 있고 이 서버와 REST API라는 것으로 통신을 하게 된다. 그래서 이와 유사한 환경을 만들고 실제 백앤드 서버와 통신을 하는 프로젝트를 통해 실제 프로젝트를 수행하는 것과 유사한 경험을 제공하려고 노력했다. 챕터11을 통해서 토큰인증, 라우터, axios를 이용한 통신, 무한스크롤 페이지네이션 등과 같은 기능들을 구현해 볼 수 있게 했고, 이를 통해서 실무적 감각을 조금이나마 익힐 수 있도록 챕터를 작성했다.
그외에도 챕터12의 rollup번들러, 챕터13의 특수요소들, 그리고 챕터14에서는 map, filter 화살표함수 등모던 자바스크립트의 문법을 간단하게 정리해 두었다.
책을 다 쓰고 몇번의 검수 끝에 출판이 완료되면서 제일 먼저 들었던 생각은 역시 해방감이었다. 사실 검수를 하는 과정에서 같은 책을 그것도 내가 쓴 책을 몇번이나 읽어가는 것은 결코 쉬운 작업이 아니었다. 하지만 또 한편으로는 아쉬운 부분도 있었다. 가장 아쉬운 점이 있다면 책을 쓰는 중에 아직 sveltekit이 완전한 v1이 나오지 않아 다루지 못한 부분이다. 이부분은 아마도 블로그나 추가 영상강좌를 통해서 공개하도록 할 예정이다.
여튼 결론은 혹시 Svelte에 관심있거나 프런트엔드로 먼가를 만들어 볼 생각이 있는 분들은 한번쯤 이 ‘스벨트로 시작하는 웹 프런트엔드’ 라는 책에 관심을 주기를 바란다는 것이다.
구입링크
