|
|
|
코딩을 알면 얼마나 더 많은 일들을 할 수 있을까? 다양한 아이디어를 바탕으로 창의동아리 활동을 하며 든 생각이다. 개념을 떠올려보면 간단한 일 같은데 홈페이지에 서비스가 구현되는 걸 보면 굉장히 늦다. 코딩에는 내가 모르는 무언가가 있다. 컴퓨터 언어는 단순한 것이 아니다. 점점 이런 생각을 하게 되었다. 나아가 내가 직접 만들어 볼 수는 없는 것일까? 하는 생각도.
그래서 처음에는 부스트코스에서 CS강의를 듣기 시작했다. 매우 재미있고 유익했다. 하버드의 열정 넘치는 강의가 참 좋았다.
그러나 C언어를 계속 배우고 있을 필요가 있는 것일까? 바로 무언가 만들면서 익힐수는 없는 것일까? 이런 생각이 들었고 마침 최근 잘 나간다는 Svelte로 초심자를 위한 책이 있는 거 같아 보게 되었다.
내가 배운 거라곤 C언어 조금 뿐이었지만 저자가 설명해놓은 것들을 보니 단번에 엄청 '단순'하다는 건 알 수 있었다. 초기의 복잡함 형태에서 최대한 덜어내야 하는 것을 덜어낸 모습이랄까? 그래서인지 용량도 적고 반응 속도도 빠른 것이 현재 Svelte의 큰 장점으로 보였다.
책을 계속 보면서 느낀 건 직접 해보기도 해야 하지만 확실히 코딩은 액티브한 활동이므로 직접 하는 걸 보면서- 인터넷 강의로라도 보면서 하면 좋겠다는 생각이 들었다. 여러가지 기능에 대한 설명이 나와있지만 역시 거기서의 변형이나 심화가 궁금해지기에- 한편으로는 예전에 '과외'를 해준다는 광고도 본 적이 있는데 확실히 정말 잘 아는 전문가에게 과외받듯이 배우면 최고일거 같다. 원하는 걸 얘기하면서 바로바로 만들어나가는 거지... 근데 음... 그러면 수강료가 좀 많이 들듯^^;;
어쨌든 책을 보면서 스도쿠는 한 번 직접 만들어보려고 했는데... 코딩을 알아나갈수록 결국 어떤 실망이 느껴져서 그만뒀다... 이건 결국 컴퓨터와 나와의 직접적 대화?가 아닌 것이다. 그래서 '언어'가 아닌 것이다. 컴퓨터는 그저 0,1을 읽을 수 있는 기계이며, 이런 언어는 누군가가 이미 한 번 손쉬운 통역이 가능하도록 만들어놓은 도구에 불과하다... 이제서야 조금씩 알아가는 거니 정확한 느낌인지는 모르겠으나 뭔가 ㅋㅋㅋ 아 생각났다 유튜브에서 일반인이 생각하는 개발자와 현직 개발자의 차이... 뭔가 막 화려하게 프로그램을 만드는 게 아니고... 노동인 것이다... 어차피 노동이라면 게임 엔진을 이용해서 게임을 만들어보는 게 더 재밌고 좋을거 같다... ㅠㅠ
아직 너무 초보라서 책에 대해 잘 설명하거나 감상을 적기 어려웠다... 그래도 단순 명료한 언어인 것은 확실해보이니 더 발전하고 퍼져나가기를 기원해본다! |
|
2021년 8월에 발표됐던 스택 오버플로우 개발자 설문조사 결과에서, 프로그래머들에게 가장 사랑받는 웹 프레임워크는 스벨트(Svelte)로 나타났습니다. 기존에 많이 사용되던 AngularJS와 몇 몇 프레임워크가 스벨트로 세대교체가 되고 있는 반증으로 보입니다. 스벨트는 현재 3.0 버전이 발표된 상태이고 버전이 올라갈수록 개발자들의 선호도가 올라가며 프론트엔드 웹개발 트렌드를 리딩하고 있는 프레임워크입니다. 이 책은 국내에 출간된 몇 되지 않는 스벨트 개발자들을 위한 교재입니다. 그래서 스벨트에 처음 입문하는 개발자들을 위한 기초문법부터 시작하며 되도록 많은 문법과 사례를 다루고 있습니다. 그리고 후반에는 스도쿠게임을 개발하는 프로젝트를 수록해서 재미있게 프로그래밍을 할 수 있도록 가이드하고 있습니다. 또한, 스벨트 웹어플리케이션을 개발하기 위해 도움이 될 많은 예시를 책에 담았고 코드를 그대로 따라하면서 실행 결과를 보다 보면 어느새 기초를 넘어거게 됩니다. 웹 프론트엔드 개발자로 입문하고 싶은 분, 취업준비를 하면서 웹개발을 공부하는 분, 새로운 웹개발 트렌트에 관심이 있는 분이라면 스벨트를 배워야 할 때 입니다. 스벨트의 개발환경을 세팅하고 프로젝트를 생성하는 준비과정부터 시작해서, 데이터와 속성, 컴포넌트, 스타일을 정의하는 기초 문법을 학습합니다. 이후 기초문법에 이어 반응형 문법을 배우고 Props 와 논리불록, 이벤트처리, 데이터바인딩을 학습하면 기초웹개발자의 문턱에 올라섭니다. 스토어, 라이프사이클, 모션, 트랜지션, 애니메이션, 액션, 슬롯 등의 주요 핵심기능을 학습하면서 예시를 따라하면서 웹개발 트렌트의 기술을 익힐 수 있습니다. 출판사로부터 책을 제공받고 솔직하게 쓴 글
|
|
개발을 하면서 다양한 프레임워크들을 만나곤 하는데, Svelte는 최신 프런트엔드 프레임워크라고 해서 관심이 생겼다.
사실 아직 요근래 가장 많이 쓰이는 리액트도 공부중이고 JS도 꾸준히 공부중에 있는데, 요즘 뜨고 있는 프레임워크라고 하니 좋은 기회를 놓칠 순 없다 생각했다.
저자는 위메프에서 플랫폼 프런트엔드 개발을 맡고 있으면서 최신 웹 프레임워크에 관심이 많은 개발자라고 한다.
사실 개발은 끊임없이 기술이 나오고 있다보니까 나 역시도 출산과 육아로 인한 공백이 생기기 전엔 풀스택으로 일을 하다 프론트로 전향한 지 얼마 되지 않아서 최신동향이나 정보를 잘 몰라서 더욱 관심을 갖는 단계이긴 하다.
현재 회사에선 제이쿼리를 쓰지만, 리액트가 요근래엔 두루 쓰이고 있기에 틈틈이 공부중에 있는데 뜨고 있는 최신 프론트엔드 프레임워크면 얼른 배워야 경쟁력이 있지 않을까 싶었다.
사실 난 이 책을 만나면서 스벨트를 처음 알게 되긴 했다.
아직 베타버전이지만, 브라우저 자체 모듈을 사용하려 하고 있고, 러닝커브가 비교적 낮은 Vue보다 낮으며, 속도도 빠르고, 적은 코드량도 장점 중 하나라고 한다.
이런 장점이 있는 프레임워크인데, 검색을 해보니 스벨트로 만든 번들의 경우 동일한 앱인데도 리액트와 리덕스를 사용한 것의 20분의 1정도라는 어떤 분의 글도 보았다.
코드수도 리액트와 리덕스의 반밖에 안된다고 하고, 가상돔을 사용하지 않은 상태로 업데이트가 진행이 되어 빠를 수 있단다.
그리고 무엇보다 많은 관심을 끌고 있다는 것!
2021보시어워드 라는 곳에서도 최고의 오픈소스 소프트웨어 29선 중 프런트엔드 자바스크립트 프레임워크 분야에서 스벨트가 뽑히기도 했으며, 8월에 발표 된 2021 스택 오버플로우 개발자 설문조사에서도 가장 사랑받는 웹 프레임워크로 꼽혔다고 한다.
바로 이거다! 리액트도 공부중이지만, 스벨트도 너무너무 궁금해지기 시작했다. 빨리 배우고 싶어서 설레기까지 했다.
이 책에서는 스벨트 공식 문서에서 제공하는 모든 문법과 API들을 다루고 있는데다, 문법 하나하나를 배워본 뒤 결과물로 스토쿠 게임까지 만들어 낼 수 있도록 되어있다.
새로운 문법을 배울때 늘 느끼는 거지만 어떻게 이렇게 쓸 수 있지?! 놀라울 때가 많다. 같은 표현을 프레임워크마다 달리 하면서 장단점을 느끼게 되는데, 스벨트의 문법은 뭐랄까.. 리액트를 처음 접할 때, 신박하지만 어렵다! 와 달리 와..엄청 간편하다 라는 느낌이 많이 들었다.
적은 코드수로 번들 크기도 감소 되고, 개발 시간까지 단축 시킬 수 있을테니!
이 책의 장점 중 하나는 일반 책 같은 종이질감을 가진책이다. 사이즈도 작은 편이고 재질땜에 가벼운 장점이 있다. 그리고 무엇보다 연필로 밑줄 긋기 좋은 질감으로 되어있다.
전체적으로 공식 문서의 문법과 API를 모두 담은 책임에도 딱 필요한 부분만 코드가 기술이 되어 있기 때문에 간결하게 볼 수 있는 장점이 있다.
정말 가볍고 간단한 문법인데다 저자의 간결하지만 충분한 설명 덕분에 처음 접하는데도 크게 어려움이 없게 느껴져서 매력적이었다.
아직 스벨트는 비교적 관련 도서가 많지 않은데, 잘 설명되어 있는 이런 책으로 기초를 습득한 뒤 다른 책들을 찾아 확장하는 것도 좋겠다는 생각이 들었다.
프론트엔드 프레임워크의 3대장을 위협하는 스벨트! 더 많은 사람들이 습득하기 전에 먼저 습득해서 경쟁력 있는 개발자가 되고 싶다.
|
|
저자의 온라인 강의 https://www.inflearn.com/users/@beomy
소스코드 다운로드 https://github.com/bjpublic/sveltetaste
또한 Paas 지원을 확대하는 등의 새로운 패러다임을 준비하고 있다
- 매우 낮은 러닝 커브 - 빠른 성능 - 적은 코드량
2021년 8월 국내 기준으로 크로미움 기반의 브라우저가 70% 이상을 차지하고 있으며 2022년 6월 15일부터 인터넷 익스플로러 지원을 완전히 종료하게 되어 구형 브라우저의 시대가 점점 저물어가고 있다 구형 브라우저에 대한 지원을 할필요 없어지면서 프론트 프레임워크들은 새로운 도전을 시도할 수 있는 새로운 패러다임을 맞이하면서 훨씬 가볍고 빠른 프레임워크인 스벨트가 탄생할 수 있게 되었다
낮은 러닝 커브는 스벨트가 프론트엔드에서 차지하는 파이를 빠르게 높일 수 있는 장점이 아닐까 싶다
변경된 부분을 찾기 위한 오버헤드도 발생하지 않고 런타임도 없어서 번들 크기가 작아 렌더링 속도를 높일 수 있다
스벨트는 리액트, 뷰, 앵귤러보다도 빠르며 심지어 속도가 개선됐다고 하는 뷰 3.0보다 더 빠르다고 한다
이 책은 책의 절반 분량까지는 개발환경을 셋팅하고 예제코드를 통해 스벨트의 기본적인 문법들을 익혀나가게 된다 스벨트를 공부하면서 가장 혁신적이라고 느끼는 부분은 Vue와 React 와는 다르게 가상돔을 사용하지 않는다는 것이다 SPA가 맨처음 등장했을때는 가상돔을 활용해 변경된 부분의 돔만 변경하므로서 페이지의 리로딩이 없이 매우 빠른 속도로 화면을 갱신할 수 있다는 장점이 부각되어 혁신적인 프론트엔드 프레임워크 트랜드로 자리를 잡았었다 하지만 SPA의 단점 중의 하나는 첫 렌더링 속도가 느리다는 것이다 첫 웹 페이지 로딩 시 사용되는 모든 리소스를 다운로드하고, 파싱하고, 실행되어야 하기 때문에 첫 렌더링에 많은 시간이 걸리게 된다 사용되는 리소스의 크기가 줄어들면 다운로드할 시간, 파일을 파싱할 시간, 실행되어야 할 양 모두 줄어들어 첫 렌더링이 빨라진다 Svelte는 가상돔을 사용하지 않기 때문에 런타임 동안에 발생하는 오버헤드가 없고 Svelte의 번들 파일에는 런타임에 필요한 프레임워크를 포함하지 않는다 Svelte의 번들 파일에는 프레임워크가 포함되지 않기 때문에 번들 파일의 크기는 Vue나 React보다 더 작다
Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해보고 Svelte 의 이벤트 수식어들에 대해 공부하고 이벤트 수식어를 통해 DOM 이벤트를 처리 해본다 그리고 Vue나 React를 다뤄봤으면 쉽게 이해할 수 있는 Store 에 대해서도 공부해본다
HTML태그에 데이터를 바인딩하면 데이터의 값이 변경됐을 때 자동으로 화면이 업데이트된다 Svelte는 사용자에게 좀 더 매끄러운 화면 업데이트 경험을 제공하기 위해 데이터의 값이 변경되어 화면을 업데이트할 때 애니메이션이 동작하는 모션기능을 제공한다
최종적으로 이 책의 핵심 예제인 스도쿠 게임 만들기를 실습해보게 된다 게임을 실행하면서 화면을 계속 변경하는 스도쿠 게임은 Svelte의 기능과 장점을 살펴보기에 매우 좋은 예제이다 앞에서 배웠던 문법들을 하나하나 적용하면서 게임을 만들어나가다 보면 어느새 Svelte 문법에 익숙해진 자신을 발견할 수 있을 것이다 책의 절반분량을 차지할만큼 천천히 한단계씩 스도쿠 게임 만들기를 단계별로 진행하기 때문에 앞에서 배웠던 문법이 잘 기억나지 않는 경우 한번씩 더 훑어보면서 책의 예제를 따라 실습해볼 수 있다
Svelte의 문법을 충분히 이해할 수 있고 이미 Vue나 React 문법에 익숙한 프론트엔드 개발자라면 크게 어려움을 느끼지 않고 곧바로 Svelte를 실무에 사용할 수 있을 것이다
총평 쉽고 빠르고 매우 간결한 언어인 새로운 프론트엔드 프레임워크인 Svelte의 매력을 충분히 느껴볼 수 있게 짜임새 있게 잘 구성된 서적이였다 이 책 한권으로 Svelte의 문법을 체계적으로 공부할 수 있으며 최종 예제인 스도쿠 게임 만들기를 단계별로 진행하면서 Svelte의 장점을 제대로 느껴볼 수 있다 Svelte 책을 통해 문법을 익히고 예제를 실습해본 결과 앞으로 Svelte의 점유율이 점점 높이질 것이라는 생각이 든다 개인적인 경험으로도 프론트엔드 프레임워크는 너무 무거워서는 안되며 최대한 가볍고 빨라야하며 쉬워야 한다 그 조건을 모두 갖추고 있는 Svelte는 확실히 매력있는 프레임워크이며 신규 프로젝트를 진행할 때 Svelte를 선택하지 않을 이유가 없을 것 같다
※출판사로부터 책을 무상으로 제공받아 직접 실습해보고 정성껏 작성한 리뷰 입니다
|
|
요새 웹 프레임워크나 라이브러리는 리액트와 뷰가 대세이다. 리액트는 단방향 데이터로 데이터에 변화가 생기면 이벤트 처리를 해줘야 했고, 그런데 요새 스벨트라는 프레임워크가 나왔다. 다른 프레임워크와 다르게 가상돔을 사용하지 않고 코드를 더 경량화해서 빠른 라이브러리라고 한다. 이러니 스벨트는 꼭 한번 배워봤음 하는 라이브러리 인것 같다. 이 책에서는 스벨트를 소개하기 위해서 기초 문법과, 프레임워크의 전반적인 기능에 대해서 18개의 파트로 나누어 소개를 해줍니다. 다른 책과는 다르게 초반에 자바스크립트 기본에 대한 내용이 없어 오히려 스벨트에 충실하게 쓰여진 책이 아닌가 싶다. 그리고 마지막 배운 내용을 바탕으로 스토크 게임을 만드는데, lodash 라이브러리를 활용하여 스토쿠의 기능구현에 적절히 사용하는데, lodash를 안써본 저에게는 앞으로 이 라이브리를 잘 활용해서 써먹을 수 있을 것 같다는 생각이 들었습니다.
스벨트는 많이 써보진 않았지만, 뷰만큼이나 매력적인 라이브러리 같다는 생각이 들었습니다.
|
