포토/동영상 (1)
|
매년 설문조사를 해서 업계 트랜드를 발표하는 "State Of Javascript"라는 곳이 있습니다. 어김없이 올해도 작년 트랜드로 설문조사한 내용이 소개되었는데요. 프런트엔드 프레임워크(링크)에 대해서도 "만족도, 관심도, 사용량, 인지도"에 대해 설문한 내용이 있습니다. 그 중 스벨트는 사용량이 꾸준히 상승하고 있습니다. (만족도, 관심도는 1위이고 인지도는 4위입니다.)
리액트, 뷰, 앵귤라를 제외하면 사용량이나 인지도면에서도 1위라고 볼 수 있습니다. 그래서, 언젠가는 스벨트에 대한 책을 꼭 읽어야겠다는 생각을 하고 있었습니다. 우연히 비제이퍼블릭에서 "스벨트"책 도서 리뷰 이벤트를 하는 것을 알게 되었습니다. 잠을 자려고 누워서 페이스북을 서핑하고 있는데 눈에 띄더군요. 기회다 싶어서 신청을 했는데, 당첨이 되었다는 연락과 함께 책을 받아보게 되었습니다.
책에 대한 전반적인 느낌은 꽤 좋았습니다. 스벨트가 무언지 정말 확실하게 설명하고 있었고요.
특히 "가상돔 없이"라는 부분은 많은 생각을 하게 했는데요. 제가 React를 좋아하게된 이유가 가상돔에 있었기 때문입니다.
브라우저에서 화면을 그리는 역할을 하는 건, DOM(Document Object Model) 엔진 입니다. 그리고 자바스크립트를 동작시키는 건 "자바스크립트 엔진"이라고 부르는데요. 브라우저가 서버에서 HTML코드를 받으면 이를 분석해서 DOM엔진이 화면을 그리고, HTML에 포함되어 있는 자바스크립트는 자바스크립트 엔진에게 넘겨서 실행하게 만들고 있죠. 따라서 자바스크립트가 화면에 변화를 주려면 DOM엔진에 의뢰해야 합니다. DOM API를 사용해야 하는 거죠. 하지만 API는 엔진과 엔진 사이를 넘어서 요청을 던지는 것이기 때문에 엔진 내부에서 처리하는 것에 비해 느릴 수 밖에 없습니다. 그러니 자바스크립트 엔진 내부에서 DOM 모델을 만들어서 관리하면서 가장 최소한의 요청만 DOM엔진에게 전달하게 하는 개념이 필요한데요 이것이 바로 "가상돔"입니다. 가상돔을 쓰면 데이터의 변화마다 DOM API를 호출할 필요가 없으니 효율적인 구조가 됩니다.
하지만 가상돔이 화면의 변화를 주도한다는건, 가상돔을 관리하는 자바스크립트 엔진이 할일이 많아진다는 것입니다. 가상돔을 관리하는 프레임워크가 할일이 많아지고 프레임워크의 크기가 늘어나게 됩니다. 서버가 브라우저에 던져줘야 하는 자바스크립트 코드 크기가 커지게 되겠죠. 따라서, 가상돔을 쓰지 않아도 될만큼, DOM API 호출 속도를 높일 수 있는 다른 방법을 찾아낸다면, 가상돔을 쓰지 않는쪽이 더 현명해집니다. 가상돔을 쓰기 시작한지 꽤 여러해 지났습니다. 그동안 브라우저도 DOM엔진도 자바스크립트 엔진도 진화 했고요. 그러니 가상돔을 쓰지 않는 새로운 프레임워크가 주목받을 만한 시기가 된것 같군요.
이 책은 스벨트의 개념을 설명하는데 촛점을 두고 있습니다. 자바스크립트나 다른 기술을 알고 있지 않더라도, 천천히 책을 읽으면서 예제를 따라하다보면, 스벨트에 익숙해질 것 같았습니다. 특히 실전프로젝트 두가지는 초보자가 스벨트로 프런트엔드 기술에 대해 공부하려 할때 도움이 될 것 같습니다. 결국 코딩 공부는 환경과 방식에 적응하는 것이기 때문에, 이런 예제 프로젝트를 해보는 것도 괜찮거든요. 다만, 프런트엔드 개발에 충분히 경험이 있는 사람에 입장에서는 전부 따라해보기는 부담이 될것 같기도 했습니다.
소프트웨어 개발자는 변화를 추적하는 사람입니다. 업계의 변화에 민감하게 반응하며 열심히 공부해야 하는 사람이죠. 그런면에서 리액트나 앵귤라, 뷰를 쓰는 개발자라도 이 책을 통해 스벨트를 접해보는건 지금 시점에서 상당히 중요한 일이 아닐까 싶습니다.
"비제이퍼블릭에서 책을 제공받아 작성된 서평입니다." |
|
최근 프론트엔드 프레임워크 3대장이라고 한다면 리액트, 뷰, 스벨트 3가지를 얘기할 수 있는데요. 주변에서 보면 리액트는 B2C, 뷰는 B2B에 많이 사용을 하고 있더라구요. 그리고 스벨트가 최근 각광받으면서 신규 개발건에 스벨트를 도입하려는 곳도 종종 있는 것 같습니다. 이 책을 보기 전에 리액트와 뷰가 있는데 굳이 스벨트까지라고 생각을 했는데, 스벨트는 늦게 나온만큼 리액트와 뷰의 장점을 가져다가 만들어지게 되어 훨씬 적은 코드량으로 빠르게 개발을 할 수 있는게 장점이라고 하더라구요. 그리고 예스24에서 스벨트로 검색을 해봤을 때, 총 4권이 나오는데 현재 이 책이 가장 최근에 출간 되었네요. 우선 책 내용은 스벨트의 소개와 개발환경 세팅부터 시작을 하게 됩니다. 하나하나 자세히 나와있어서 따라하는데 어렵지 않았었습니다. 그리고 SPA의 기본이라고 할 수 있는 컴포넌트와 스타일링 하는 부분을 총 4챕터로 나누어 다루는데요. 따라 해보면 리액트나 뷰에 비해서 스벨트만의 문법을 사용하기 때문에 좀 이질감이 있을 수 있는데 거의 대부분의 SPA 책에서 기본 프로젝트로 다루는 TODO 리스트를 만들어 보면 왜 요새 스벨트를 추천하는지 알 수가 있었습니다. 다음 프로젝트로는 SNS 서비스 만들기를 하는데요. 서비스의 기본인 CRUD를 다 활용하기에 꼭 따라해보면 스벨트로 어떻게 서비스를 만들고 응용하는지 알 수 있었습니다. 그리고 코드가 바뀌는 부분은 검은색으로 진하게 처리가 되어 있어 따라하면서 확인하기가 좋았습니다. 그리고 마지막 부분엔 Rollup이 소개가 되어 있어 기대가 되었는데, 비중이 작아서 조금 아쉬웠습니다. 웹팩의 단점을 보완해서 나왔다고 최근 도입하는데가 많아지고 있다고 들었는데, 자세히 소개해주는 책이 아직은 없는 것 같습니다. 마지막으로 스벨트가 먼지 모르시겠다면 노마드코더의 유튜브 내용을 한 번 보시고 선택하셔도 좋을 것 같습니다. 스벨트가 어떤 장점이 있고, 왜 쓰는지를 알 수 있는데, 이 동영상을 한 번 보시면 책을 구입하시는데 많은 도움이 될 것 같습니다. ※ 앞으로 대세는 스벨트? 10분 완벽 정리해드림. |
|
저자의 블로그 및 강좌 블로그: https://medium.com/freeseamew 깃허브: https://github.com/freeseamew 스벨트 강좌: https://www.inflearn.com/course/만들면서-배우는-스벨트
소스코드 다운로드 https://github.com/bjpublic/Svelte
책의 구성 챕터01. Svelte 소개 스벨트를 소개하고 다른 프레임워크와 어떤 차이점이 있는지 알아본다 챕터02. 학습 환경 학습 환경설정과 예제 파일의 구성등을 알아본다 챕터03~06. 컴포넌트/스타일 및 효과 스벨트의 핵심이 되는 컴포넌트의 구성 및 특징 그리고 컴포넌트를 조작하는 방법을 학습한다 챕터07. Modal로 배우는 컴포넌트 실습 Modal 팝업 컴포넌트를 만들며 이전까지 학습한 스벨트의 기본 기능을 정리한다 챕터08. 실전 프로젝트(1) Todo 서비스 만들기 Todo 앱을 만들면서 스벨트를 실제 프로젝트에서 어떻게 사용하는지 익힌다 챕터09. 라우터 URL 주소에 따라 그에 맞는 페이지를 보여주는 라우팅 기능을 학습한다 챕터10. 서버와의 통신 방법 백엔드 서버와 통신할 수 있는 방법을 학습한다 챕터11. 실전 프로젝트(2) SNS 서비스 만들기 SNS 앱을 만들면서 실제 프로젝트에서 벌어질 수 있는 다양한 경험을 학습한다 챕터12. rollup 소개 및 번들러 이해 rollup을 이용한 번들링을 학습한다 챕터13. 특수 요소 스벨트의 7가지 특수 요소를 학습한다 챕터14. 유용한 자바스크립트 문법 ES6 이후의 필수 자바스크립트 문법을 학습한다
서평 이 책은 국내 개발자가 직접 집필한 책이며 요즘 아주 가벼운 프레임워크로 핫한 스벨트라는 프레임워크에 대한 책이다 이 책의 특징은 군더더기 없이 순수하게 스벨트의 활용법에 대해서만 다루고 있다 자바스크립트의 기초가 부족한 사람이라면 자바스크립트의 기초는 별도로 공부를 하고 이 책을 보는 것이 좋다 이 책에서 배울 수 있는 내용은
- 스벨트의 모든 핵심 기술 - 모든 자바스크립트 문법 - 실무에 바로 적용 가능한 프런트엔드 스킬 - 백엔드 서버와 효율적으로 통신하는 방법 - rollup.js 번들러
에 대해 다루고 있다 이 책 한권으로 충분히 실무에서 활용할 수 있을만한 코드와 노하우를 얻을 수 있다 이 책의 저자는 오랜 기간 개발을 해오면서 축적된 노하우와 지식을 잘 정리하여 다른사람들에게 전파하는 활동도 부지런히 하고 있다 블로그 활동과 깃허브 관리, 온라인 강좌등 다양한 활동을 하고 있으며 현재는 프리랜서 개발자일도 병행하고 있다고 한다
이 책의 스벨트의 소개 첫 문구에 대해 소개 하는데 매우 인상 깊었다
개발 생산성 향상을 위해 개발된 프레임워크의 강제성이 많아지면서 유연한 변화에 대응하지 못하고 점점 무거워지며 개발을 하기위해 자바스크립트 순수언어의 활용도보다는 프레임워크의 의존도가 높아져서 결국은 프레임워크없이 개발을 할 수 없게 되며 자바스크립트를 이해도 보다 프레임워크 이해도가 높아지는 기현상이 벌어진다
스벨트의 장점은 매우 가볍다는 것에 있다 스벨트의 장점은
- Write less code(보다 적은 코드) - No virtual DOM(가상돔 없이) - Truly reactive(진정한 반응성)
요즘은 타 프레임워크를 사용하며 지친 개발자들이 차츰 스벨트의 매력에 빠져들고 점점 도입을 해서 사용해보고 있는 추세이다 부쩍 국내에서도 스벨트 관련 강의와 도서들이 많아지고 있으며 외국에서도 스벨트를 도입해서 사용하는 회사들이 많아지고 있다 본인도 Vue 와 React 를 사용하여 개발해봤지만 개발의 편의성은 매우 높지만 프레임워크의 의존도가 너무 높아져서 같은 언어이지만 프레임워크를 모르고서는 해당 코드를 거의 이해하기 힘들 수 있다
그래서 매우 신선한 모토를 가지고 있는 스벨트의 매력에 관심이 가고 있으며 스벨트를 알아가고자 한다 이 책에서는 스벨트의 소개 컴포넌트의 활용, 스타일 및 효과, 모던 자바스크립트 기법을 익힌다음 실전 프로젝트를 2개를 진행한다
첫 번째 프로젝트는 모든 언어나 프레임워크를 배울때 가장 처음 만들어보는 가장 기본적인 TODO 서비스 이다 TODO 서비스를 개발하면서 스벨트 프레임워크로 기본 셋팅부터 컴포넌트 설계, 기능 개발, 라우터의 활용, 서버와의 통신방법 까지 모두 경험해볼 수 있으며 좀더 난이도 있는 프로젝트를 개발하기 위한 기초적인 부분들을 익혀 볼 수 있다
두 번쨰 프로젝트는 SNS 서비스 만들기이며 첫 번째 프로젝트보다 난이도가 높고 규모가 크지만 충실히 첫 번째 프로젝트를 개발하며 스벨트의 활용법을 익혔다면 어렵지 않게 책을 보며 따라하며 개발해 볼 수 있다
책으로 따라하기 힘들다면 저자의 온라인 강의도 인프런 사이트에 공개되어 있으면 강좌의 도움을 받아볼 수도 있다
결론은 앞으로 탈 리액트를 하기 위해 이 책을 통해 익힌 스벨트 프레임워크를 활용해 볼 계획이다
스벨트 프레임워크를 공부해보고 싶다면 관련 내용을 잘 정리하고 실전 프로젝트까지 따라해볼 수 있게 구성된 이 책으로 한번 시작해보자
총평 무거워진 프론트 프레임워크에서 탈피해 프레임워크가 없는 프레임워크를 모토로 할 정도로 매우 가볍고 성능이 뛰어난 스벨트 프레임워크를 공부 해보고 싶다면 이 책을 추천한다 스벨트 프레임워크는 가상돔을 사용하지 않으며 매우 적은 코드로 진정한 반응형 개발을 할 수 있도록 도와주는 프레임워크이다 좀더 가볍고 순수한 프레임워크를 찾는 사람들에게 정말 좋은 프런트엔드 프레임워크라고 생각된다 또한 이책의 저자는 별도의 블로그와 깃허브, 온라인 강좌도 인프런에 공개 했으며 다양한 루트로 스벨트 프레임워크를 국내의 많은 개발자들이 익힐 수 있도록 지식 전파 활동을 부지런히 하고 있으니 도움을 받고 싶다면 저자에게 많은 도움을 받을 수도 있을 것 같다 앞으로 대세가 될 수 도 있는 매우 가벼운 프레임워크를 찾고 있다면 스벨트 프레임워크를 공부해보는 것이 어떨까?
※출판사로부터 책을 무상으로 제공받아 직접 실습해보고 정성껏 작성한 리뷰 입니다 |
|
Svelte 는 Rich Harris 라는 분이 제작한 걸로, 이분은 템플릿 기반 UI 라이브러리인 리액티브(Reactive)의 개발자입니다. 다른데서도 많이 쓰고 있는 걸로 알고 있는데요 그래서 그런지 리액티브 관련 부분들이 스벨트에 많이 녹여져 있습니다. 반응성 부분관련해서 다른 프레임워크보다 좀 더 빠르고 쉽게 구현이 가능하게끔 되어있습니다. 책에도 3가지 간단한 예제와 함께 장점이 나오는데요 해당 부분만 보시면 스벨트를 당장 해보고 싶은 욕구가 솟아날 거라 생각됩니다. VS Code 를 설치하기 귀찮으신 분들은 브라우저상에서 스벨트 사이트에서 제공하는 REPL 을 통해서 바로 코드를 확인해보실 수 있습니다. 책에서 설명되어 있는 문법들을 보면, 기존에 React나 Vue 를 사용해 본 분이 아니라더라도 JSP, PHP, ASP 등의 개발방법에 익숙한 분들이라면 유사한 부분이 많구나 라는 걸 느낄 수 있을 겁니다. HTML이나 자바스크립트, 약간의 CSS 문법을 알고 있으면 쉽게 따라할 수 있을 정도로 문법이 쉬운 편입니다. 물론 페이지가 복잡해질 수록 SPA형태에 익숙해지는데는 좀 시간이 걸리긴 하지만요 스크립트의 경우 ES6의 문법들을 많이 사용하는데요, 책 뒤편에서 설명해주니 기존에 ES6이나 자바스크립트에 익숙하지 않은 분들은 Chapter14의 '유용한 자바스크립트 문법' 을 보고 간략하게 나마 자바스크립트에 대해서 어느 정도 공부를 하고 봤을때 코드를 이해하는데 더 도움이 되었습니다. 또한, nodejs 형태의 프로그램을 해보지 않은 분들의 경우에는 환경설정 부분들이 어려울 수 있는데요. 이 책을 잘만 따라한다면 어렵지 않게 설정이 가능합니다.(설정만 하면 일단 반은 온겁니다.) SPA형태에 익숙하지 않은 분들일수록 가능한 책에 나온 한글자 한글자 잘 따라가시는 게 중요하다고 생각됩니다. 그냥 대충 읽고 빠진 부분에서 많은 오류가 나고 그 부분에서 해결을 못해서 많은 분들이 포기 하는 경우에 까지 이릅니다. 힘들더라도 차근차근 하다보면 어렵지 않게 책에 있는 코드들을 구현해 가실 수 있으리라고 봅니다. 이 책의 경우 설정부터 활용까지 스벨트를 공부하기에 좋은 책이고 계속 따라가다 보면 초급부터 중급까지 스벨트에 대한 실력을 키우실 수 있을거라고 봅니다. 기본설정이나 예제외에도 Todo List나 실제SNS와 유사한 SNS 프로젝트를 통해코드를 어떻게 구성하는지 등도 중요하지만, 어떤 형태로 프로젝트를 구성하는지 API를 어떻게 사용하는지 에 대한 부분도 잘 보시면 앞으로 자신의 프로젝트를 하시는데 많은 도움이 되리라고 봅니다. ※출판사로부터 책을 무상으로 제공받아 직접 실습해보고 작성한 리뷰 입니다 |