요즘 자바스크립트에 대한 관심이 생겨 조금씩 공부를 해 보고 있습니다. 자바스크립트는 백엔드 개발을 포함한 웹 개발언어 중 가장 인기 있고 핫한 언어라고들 합니다. 잠깐이지만 자바스크립트 공부를 하면서 느낀 점들을 얘기해 보려고 합니다.
참고로 저는 웹 개발자도 아니고 프로그래머도 아닌 그냥 평범한 일반인입니다. 그래서 용어가 틀릴 수도 있고 잘 못 알고 있는 부분도 있을 수 있습니다. 어디까지나 일반인이 느낀고 생각한 점을 말하고자 하니 너무 깊이 있게 보지는 말시길 바랍니다.
제가 생각하는 프런트엔드에서의 자바스크립트는 DOM을 조작하거나 비즈니스 로직을 구성하고 UI/UX 개발을 하는 것을 주목적으로 한다입니다.
웹 개발과 관련 없는 직종이기에 자바스크립트를 깊이 있게 공부하거나 사용한 경험이 없습니다. 간혹 티스토리나 그누보드 등을 사용하면서 간단한 코드(DOM조작)를 작성하는 정도라 굳이 자바스크립트를 배울 필요성도 못 느꼈고 무엇보다 구글링을 하면 제이쿼리로 작성된 다양한 코드들과 라이브러리들이 있어 큰 불편함을 느끼지 못했습니다.
티스토리 스킨을 만들면서 SEO에 신경을 많이 쓰고 있습니다. 블로그의 경우 화려함이나 다양한 기능보다는 빠른 로딩 속도와 검색엔진 최적화 그리고 독자가 글을 읽기 편한 심플한 구조가 무엇보다 중요하다고 생각합니다.
로딩 속도를 조금이라도 빠르게 하기 위해서 마크업도 가능하면 복잡하지 않은 구조로 짜고 스타일 코드도 최대한 적고 단순하게 그리고 자바스크립트도 최대한 적게 썼야 하는데 몇 안 되는 DOM조작과 버튼 클릭 이벤트 때문에 제이쿼리 라이브러리를 사용하는 것이 못내 아쉬운 부분이었습니다. 배보다 배꼽이 더 큰 경우가 되는 것 같습니다.
요즘 유튜브 강좌나 기술 블로그들을 보면 더 이상 제이쿼리를 사용하지 말아라 "곧 제이쿼리는 없어질 것이다"라고들 합니다.
티스토리 스킨에 작성된 제이쿼리를 바닐라 자바스크립트로 변경하기 위해 자바스크립트를 기초부터 공부하고 있는 중입니다.
자바스크립트 공부를 시작하면서 느끼는 것은 무언가 꼬리에 꼬리를 무는 새로운 것들이 계속 나타난다는 것과 그것 들게 나도 모르게 빨려 들어간다는 느낌입니다.
그런데 그 새로운 것들이 자바스크립트 문법이나 새로운 내장 함수 같은 언어적인 것이 아니라는 것입니다.
자바스크립트를 공부하면서 알게 된 프론트엔드 개발 관련 사항들입니다.
바닐라 자바스크립트, 제이쿼리, 타입스트립트, babeljs, 프론트엔드 프레임워크 또는 라이브러리 또는 컴파일러(Angular, React, Vue, Svelte, Malina.js, Markojs), 그리고 번들러와 빌드 도구들 (Webpack, parceljs, Rollupjs, Snowpack, Esbuild)등등 입니다.
단순히 그냥 자바스크립트를 공부하려고 한 것인데 나도 모르게 프론트엔드 개발 관련까지 알아보고 공부하게 되었습니다.
자바스크립트를 공부하면서 유튜브나 블로그의 글들을 보다 보면 새로운 방법 또는 기술들을 하나씩 알게 됩니다.(너무 많아 어지럽습니다)
요즘 자바스크립트 공부는 학원이나 책을 보지 않고도 기본적인 것들은 인터넷을 통해 쉽게 접할 수 있습니다.
저는 드림코딩의 엘리님 유튜브 강좌를 기본으로 학습을 시작했습니다.
처음 웹 개발 공부를 시작하시는 분들께서는 한번 보시는 것을 추천해 드립니다.
프론트엔드 개발 입문 강좌부터 자바스크립트 기초 강좌 그리고 웹 개발 트렌드 등 다양한 영상들이 있고 무엇보다 엘리님 목소리나 강의 방식 등은 귀에 속속 들어오는 것이 초보자가 보기에 안성맞춤인 것 같습니다.
엘리님의 자바스크립트 강좌를 보면 꼬리를 무는 새로운 용어들(프레임 워크 등)이 등장합니다. 엘리님이 극찬을 하시는 타입 스크립트입니다.
타입 스크립트는 자바스크립트의 슈퍼셋이라고 합니다. 동적인 타입에 정적인 타입을 입혀 주는 것이라는데 살펴보면 이게 자바스크립트인지 자바인지 C#인지 인터페이스가 나오고 클래스가 나오고 데코레이터가 나오고 enum, get, set 등등 자바스크립트의 단순함은 사라지고 보기에도 복잡한 또 다른 자바스크립트가 나타납니다.
타입 스크립트를 알아보면서 또 다른 용어가 나타납니다. Babeljs입니다.
타입 스크립트를 사용하면 최신 문법을 사용해도 Babeljs처럼 이전 문법인 ES2015로 변환해 컴파일해 준다고 합니다. 여기서 Babeljs가 궁금해집니다. 그런데 Babeljs를 사용하려면 웹팩 같은 번들러를 사용해하는 것이 좋다고 합니다.
번들러는 또 뭐지? 대표적인 번들러는 Webpack, parceljs, Rollupjs 등이 있다고 합니다. 그런데 번들러에 대해 알아보다 보면 또다시 새로운 용어가 나타납니다. 이번에는 기존 번들러 보다 빠르고 사용하기 쉬운 빌드 도구?라고 합니다. 몇몇 가지가 있는 것 같은데 대표적인 것이 Esbuild, Snowpack 인 것 같습니다.
번들러 또는 빌드 도구는 프런트엔드 개발 환경을 세팅해 주는 도구라고 하는데 당최 무엇을 세팅한다는 것인지 프런트엔드 개발이 뭔지 궁금하게 만듭니다.
결국 프런트엔드 프레임워크들을 알아보게 됩니다. 앵귤라, 리액트, 뷰등 말입니다.
자바스크립트라는 언어를 공부하려고 했는데 하다 보니 프런트엔드 개발 공부로 가버렸습니다.
여기까지 알아보면서 상당히 많은 시간들을 소비했지만 아직 무엇을 어디서 어떻게 왜 사용하는 것인지 알지는 못했는데 또 새로운 것들만 자꾸 나타났습니다.
싱글 페이지 애플리케이션, CSR, SSR 등 말입니다.
맛보기로 간단하게 프런트엔드 개발을 진행 보기로 하고 프런트엔드 프레임워크 3대 장인 Angular, React, Vue를 틈틈이 개념 정도를 살펴보고 비교적 학습 난이도가 낮다는 Vue를 선택해 공부하기로 결정하고 몇 개월이 지났습니다.
이번 설 연휴 코로나 때문에 아무 데도 못 가는데 4일 동안 Vue를 알아보고 공부하자고 마음먹고 알아보는데 또 새로운 게 나타납니다. Svelte입니다.
2020년 프런트엔드 프레임워크 관심도나 만족도 등을 조사한 표를 보면 스벨트가 1위입니다.
2020 stateofjs 프레임 워크 부분
Svelte는 사용자 인터페이스를 구축하는 근본적인 새로운 접근 방식입니다. React 및 Vue와 같은 기존 프레임 워크는 브라우저에서 작업의 대부분을 수행하는 반면 Svelte는 해당 작업을 앱을 빌드할 때 발생하는 컴파일 단계로 전환합니다.
스벨트와 기존 프레임 워트 3 대장과 다른 점은 가상 돔을 사용하지 않는다. 코드가 간결하고 직관적이라 유지보수에 유리하고 배우기 쉽다. 컴파일 형식이라 빠르다.(Vue3보다 빠르다고 함)등입니다.
그래서 Vue에서 Svelte로 방향을 바꾸었습니다. Svelte 외에 Malina.js도 있지만 아직은 사용할 단계가 아니라고 하고 Markojs도 잠깐 살펴보니 상당히 심플하고 쉬워 보였고 eBay에서 개발해 사용하는 오픈 소스라고 하는데 둘 다 한글로 된 문서나 자료들이 없어 초보자가 접근하기에는 어려움이 있어 보였습니다.
Svelte도 국내 자료는 많지 않았지만 기초적인 부분은 국내와 해외자료들이 많이 있었습니다. 어차피 내게 필요한 것은 기초적인 부분만 필요하기 때문에 최대한 시간을 절약할 수 있는 스벨트를 최종적으로 학습하기로 했습니다.
그리고 Svelte 홈에 나와 있는 튜토리얼과 예제 그리고 API들에 대해 살펴보았습니다. 대강 훑어보는데 약 2시간 정도 소요가 되었습니다.
그리고 좀 더 자세한 공부가 필요한 것 같아 인프런에서 무료로 볼 수 있는 스벨트 강좌 하나를 듣고 간단한 TODO 앱 하나를 만들어 보았습니다.
헤로피님의 스벨트 강좌를 보면 대략적인 스벨트 개념을 잡을 수 있습니다. 강의도 지루하지 않게 아주 잘하십니다(최고임).
해당 강좌에도 TODO 앱 만드는 강좌가 있지만 스벨트에서 제공하는 기본 TODO APP이 좀 더 간단해서 이 코드를 응용해 작성했습니다.
스벨트로 만든 TODO APP DEMO
스벨트는 하나에 파일에 마크업과 자바스크립트 그리고 스타일까지 작성하는 방식이었습니다. 그런데 이런 방식이 조금 부담스럽습니다. 하나에 파일(컴포넌트)에 모든 걸 다 작성하다 보면 코드가 길어져 아래 위로 왔다 갔다 하는 게 불편해서 스타일 파일을 별도로 분리해 사용했습니다.
그런데 컴포넌트 방식을 생각해 보면 재사용성 때문인 것 같은데 같은 프로젝트 안에서는 문제가 없지만 다른 프로젝트에 개발해 놓은 컴포넌트를 가져가서 재사용하려면 별개 파일에 작성된 스타일 부분을 찾아서 같이 이동해야 한다는 점에서 올지 않다는 생각이 들었습니다.
컴포넌트 파일에 CSS까지 작성해야 할 것 같은데 여기서 또 문제가 생깁니다. 저는 CSS를 SASS(SCSS)를 이용해 작성합니다. 그것도 VSCODE에 전역으로 설치된 라이브 사스 컴파일러를 사용합니다.
그런데 스벨트에서는 이러한 방식으로는 사용할 수 없고 Postcss라는 CSS전처리기를 사용해야 한다고 합니다. 그런데 Postcss를 설치하고 설정하고 번들러(롤업)에도 설정해야 하고 여간 복잡한 게 아닙니다.
찾아보면 SASS(SCSS)만 Rollup 번들러에 설정하는 게 있을 것 같은데 찾아보고 알아보는데 너무 지쳐 그냥 바닐라 CSS를 사용하는 것으로 우선 결정했습니다.
차후에 Postcss사용방법과 플러그인 설치방법 등을 알아보고 요즘 많이들 사용한다는 Tailwind css 프레임워크를 적용해 볼까 합니다. Tailwind css 인라인 스타일처럼 클래스만 붙이면 되기 때문에 컴포넌트 파일이 덜 복잡스러워 볼일 것 같다는 생각이 듭니다.
쉽게 생각하고 시작한 자바스크립트 공부가 어쩌다 나도 모르게 웹 프런트엔드 개발까지 알아보는 과정 되었습니다.
자바스크립트를 공부한 것이 아니라 개발 도구나 프레임워크 그리고 환경설정 등만 공부한 것 같다는 생각이 듭니다.
웹 개발자도 아닌 내가 왜 많은 시간을 낭비하면서 이 짓을 하고 있는가 생각이 들어 하소연하고자 글을 썼습니다.
한편으로는 웹 프런트엔드 프레임워크에 대한 매력도 느꼈고 앞으로 조금 더 공부해 보고 싶은 의욕도 생겼습니다만 발전 속도가 빠른 자바스크립트 생태계를 비개발자가 틈틈이 공부해서 따라간다는 것은 결코 쉽지 않을 것 같습니다.
