바닐라 자바스크립트 공부하기 (feat. jQuery)

코드 없는 자바스크립트에 대한 포스팅

바닐라 자바스크립트

Vanilla JS is a fast, lightweight, cross-platform framework
for building incredible, powerful JavaScript applications.

"바닐라 자바스크립트는 왜 화두가 되었을까?"라고 바꿔보았다. 그리고 이 질문에 대한 답은 웹 개발 환경의 생태계에 있다. 완전히 같다고는 이야기할 수 없지만 Java에 빗대어 보면 POJO (Plain Old Java Object)와 비슷한 맥락을 가지고 있다고 생각한다. 최신의 표준 명세에 따라 웹 개발 환경이 만들어지기 이전의 웹 개발 환경에서는 자바스크립트가 여러 가지의 브라우저 (Chrome, Firefox, Safari 등등)에서 일관되게 동작하기 위해서는 표준을 우회하는 코드를 작성해야 했다. 특히 Windows의 IE는 자바스크립트뿐만 아니라 웹과 관련된 표준 명세를 따르지 않아 지금도 웹 개발에 있어 최대의 난제이기도 하다. 그런 이유에 의해 편법적인 자바스크립트 코드를 사용해 웹 개발을 해야 하는 경우가 많았고, jQuery는 그러한 문제(크로스 플랫폼)를 손쉽게 해결했다. 그렇지만 역설적이게도 지금의 모던한 웹 개발 환경에서는 발전된 ECMAScript 명세와 최신의 브라우저를 바탕으로 표준 자바스크립트만으로도 쉽게 개발을 할 수 있게 되어, 이전과 달리 순수한 자바스크립트 (Vanilla JS)의 중요성이 화두가 되기 시작했다.

출처 - 바닐라 스크립트란 무엇이고 왜 필요한가

jQuery는 더는 사용하지 말아야 하는가

(일반적인 퍼블리셔, 개발자들의 고민)

프론트엔드에서 개발을 쉽고 용이하게 도와줬던 jQuery가 오랫동안 자리를 잡고 있었습니다. 다양한 라이브러리도 jQuery의 도움을 받아 제작되고 그 유명한 부트스트랩도 버전4까지 jQuery에 의존해 왔습니다. 하지만 Vanilla JS의 중요성이 커지고 다양한 프레임워크들이 나오면서 jQuery를 점차 걷어내고 있습니다. 부트스트랩도 버전5부터 jQuery를 사용하지 않고, 순수 자바스크립트를 사용하게 되었습니다. 점차 갈수록 jQuery는 사라져 가고 있습니다. jQuery는 Vanilla JS에 비해 훨씬 무겁고 속도도 느립니다. 그리고 이제 크로스 브라우징을 위해 jQuery를 사용할 이유도 없어졌습니다. 앞으로 인터넷 익스플로러의 서비스가 중단되면 더더욱 사용할 필요가 없어지죠.

출처 - 자바스크립트를 공부하기 위한 여정 - jQuery를 벗어내기

jQuery 를 처음 접했을 땐 신세계를 경험했다. 쉽고 너무나도 직관적이었으니까. 그러나 시간은 흘러 많은 것들이 변했고, 웹의 시대 또한 새로운 국면을 맞이했다. jQuery는 이런 시대의 흐름을 타지 못한 것 뿐이다. 그러나 jQuery가 사장되어야 한다고 주장하는 것은 절대 아니다. 아직도 많은 퍼블리셔나 개발자들은 일부 프로젝트에서 jQuery를 활발하게 사용하고 있고, 사실 개발 생산성 면에선 훌륭하다고 할 수 있다. 그럼에도 불구하고지만, 프로젝트에서 jQuery의 사용을 검토하고 있다면 조금 더 면밀히 검토해볼 필요는 있을 것이다.

출처 - 프로젝트에서 jQuery의 사용을 그만두겠다고 결심한 이유

" 이런 말 하는게 슬프지만 jQuery가 JavaScript를 대체하지는 않는다. jQuery가 성공한 것은 DOM이 문제가 많다는 증거일 뿐이다."

출처 - 이제와서 jQuery를 쓰면 안되는 이유, 혹은 jQuery와 웹 개발의 역사

현실은... 다 걷어낼 수 없다

jQuery를 바닐라로?

Vue와 React와 같은 라이브러리와 프레임웍이 나타나고 많은 프로젝트에서 Vue와 React를 사용하기 시작하면서부터 프로젝트 작업을 할 때 jQuery를 사용해서 작업하기가 꺼려지는 측면이 있습니다. 물론 Vue와 React에서도 NPM을 이용하여 jQuery를 사용할 순 있지만 Vue와 React 모두 가상 DOM을 활용하고 가상의 DOM을 추상화하여 사용하기 때문에 jQuery와 같은 DOM을 순차적으로 읽으며 스크립트를 동작시키는 것은 스크립트 충돌을 발생키실 수 있고 속도면에서도 사용을 지양합니다. 
그래서 저 역시 회사에서 두 라이브러리와 프레임워크로 프로젝트를 진행하는 경우가 많아져서 스크립트를 작성할 때 가급적이면 순수 자바스크립트로 작성하려고 합니다. 

순수 자바스크립트 장점

• 아무것도 다운받지 않고 구동이 가능합니다.
• 다른 프레임워크(라이브러리)에 비해서 속도면에서 우수합니다.
• 웹 표준을 잘 지키는 웹브라우저들에 대해서는 크로스 브라우징이 잘 되는 특성이 있습니다.

출처 - jQuery를 바닐라 JS로(Vanilla JS) 변경 하기 (feat.Pure Javascript)

일반적인 SPA 개발 환경에서의 바닐라

약 3년 동안 jQuery만 주구장창 사용하면서 느낀 제일 큰 장점은 DOM API라고 생각한다. jQuery는 DOM을 쉽게 조작할 수 있도록 만들어주는 것에 더해 크로스 브라우징과 관련된 이슈를 해결해주었다. 그런데 점점 브라우저와 Javascript가 발전하는 과정에서 아예 브라우저(클라이언트) 단에서 렌더링을 하고, 서버에서는 REST API 혹은 GraphQL 같이 브라우저 렌더링에 필요한 데이터만 제공하는 형태로 기술이 변화했다.

이제는 직접적으로 DOM을 다루는 행위가 급격하게 감소했고, 상태(State)를 기준으로 DOM을 렌더링 하는 형태로 발전한 것이다. DOM이 변하는 경우가 State에 종속 되어버린 것이다. 반대로 말하면, State가 변하지 않을 경우 DOM이 변하면 안 되는 것이다. 그리고 이러한 과정 속에서 Client-Side Rendering 이라는 개념과 상태관리라는 개념이 생기게 되었다.

Angular가 CSR의 시작이었다면, React는 컴포넌트 기반 개발의 시작이었다. 그리고 Angular와 React의 장점을 모두 수용한 Vue가 나왔다. 어쨌든 중요한 점은 현 시점의 웹 어플리케이션은 컴포넌트 단위로 설계되고 개발된다는 것이다. 그리고 컴포넌트마다 컴포넌트를 렌더링할 때 필요한 상태를 관리하게 되었으며, Proxy 혹은 Observer Pattern 등을 이용하여 이를 구현한다.

출처 - Vanilla JavaScript로 웹 컴포넌트 만들기

바닐라 자바스크립트 공부해요

2018년 5월, 프론트엔드 개발자로 먹고살기라는 강좌를 들은 적이 있다. 이때 들었던 내용 중 일부를 소개한다.

프론트엔드 개발자를 채용을 하려고 프론트엔드 개발자와 면접을 보며 코딩 테스트를 진행했는데, 테스트 내용은 바닐라 자바스크립트로 아날로그 시계를 만들어 보는 것이었다. 그런데, 프론트엔드 개발자가 해당 코딩 테스트를 통과하지 못했다.

이 개발자는 신입이었을까? 아니다. 7년 차(!) 프론트엔드 개발자였다. 개인적으로 당시 3년 차에 접어들며 나름 자신감도 있었는데 그것이 근거 없는 자신감이라고 깨닫는 계기가 되었다. 당시에는 많은 국내 개발자들이 제이쿼리 없이 개발하는 것을 힘들어하는 경향이 있었는데, 이 사례는 이를 방증한다.
이후 바닐라 자바스크립트에 대한 공부 필요성을 느꼈고, 이를 공부하기 위해 바닐라 자바스크립트 예제를 물색했다. 그리고 굉장한 사이트를 발견할 수 있었다.

출처 - JavaScript, 왜 중요한가?

예시

프론트엔드 개발자 관문 - 프로그래머스 코딩테스트 Lv.1 문제 (JavaScript 언어 선택)

Velogger가 생각하는 바닐라 스크립트

velog를 검색하여 다양한 velogger들이 정의한 바닐라 자바스크립트에 대한 학습로그를 살펴 보았다. (다른 velogger들이 학습한 내용을 기록한 방식도 참조하여 더 정보전달+복습에 중점을 둔 포스팅 작성법도 연구해보기)

바닐라 자바스크립트란 프레임워크 또는 라이브러리가 적용되지 않은 순수한 자바스크립트를 말한다.
바닐라는 콩이라는 뜻으로 핵심, 근본이 되는 이라는 의미를 비유적으로 표현한다. 따라서 바닐라 자바스크립트는 핵심이 되는 아무것도 포함하지 않은 순수 자바스크립트를 함축적으로 표현한 것이다.

출처 - berrygood 님의 velog

바닐라 자바스크립트의 기본 개념을 설명하자면 어떠한 프레임워크나 라이브러리가 적용되지 않은 날것의 자바스크립트라는 것이다. 현재는 React, Vue, Angular와 같은 프레임워크들이 많이 사용되고 있다. 자바스크립트를 조금 더 효율적으로, 대중적으로 사용하기 위해 시대를 지나며 개발된 것이다. 기초가 탄탄하지 않으면 그 기초를 기반으로 하는 모든 것들을 배울 때 흔들릴 수 밖에 없다.

출처 - seungmini 님의 velog

Velog와 함께하는 바닐라 자바스크립트 Study 예제

바닐라 자바스크립트를 시작하기 전에 설정하기

npm, package.json, webpack

출처 - rudgns9334 님의 velog

바닐라 JS로 그림판 만들기

• Used Skills : HTML, CSS, Vanilla JavaScript
• 구현 기능 : HTML5 Canvas, Mouse Events, 2D Context, 2D Painting, Brush Size, Image Saving

출처 - dabin0219 님의 velog

바닐라 자바스크립트로 만드는 계산기

입력, 계산 과정, 임시 결과를 출력해주는 계산기를 만들기

• 입력창(결과창), 임시 결과창, 계산 과정창
• . 중복 체크
• 숫자와 기호 비교
• AC 버튼 [전체 초기화]
• 각 기호별 계산
• +@ 키보드 입력

출처 - duboo 님의 velog

바닐라 JS로 옷입히기 게임 만들기

• 버튼을 클릭하면 버튼 data 속성에 해당하는 팝업창이 나옴
• 팝업창의 버튼을 누르면 팝업창에 뜬 아이템 이미지가 캐릭터에게 적용

출처 - soonmac 님의 velog

Image Zoom on Hover 바닐라 자바스크립트로 만들기

Image Zoom on Hover 기능은 쇼핑몰 상세 페이지에서 흔히 보이는 기능이다. 마우스 커서를 이미지 영역 위에 올리면 확대된 이미지를 보여주는 뷰포트가 생겨서 별도의 모달이나 윈도우 없이도 이미지를 자세히 볼 수 있는 인터랙션 중 하나이다. 과제는 아니었지만 JS를 활용하여 사용자 인터랙션을 직접 만들어보는 연습을 하고싶고, 객체의 좌표를 활용한 효과는 어떻게 만들 수 있는지 공부하고 싶었다.

출처 - oneook 님의 velog

바닐라 자바스크립트를 이용하여 Redux같은 나만의 상태관리 시스템 만들어보기

요즘 쓰이는 최신 프론트엔드 프레임워크를 쓰다보면 상태관리 시스템을 보게 됩니다. 프론트엔드 프레임워크에서 상태관리 시스템을 사용하면 여러 컴포넌트의 상태를 통합적으로 관리할 수 있다는 이점이 있습니다. 이를테면 Vue에는 Vuex라는 상태관리 시스템이 자주 쓰이고, React는 Redux라는 상태관리 시스템이 자주 쓰입니다. 이번 포스팅에서는 프론트 프레임워크와 상관없이 바닐라 자바스크립트로 상태관리 시스템을 만들어볼 것입니다. 상태관리 시스템을 만들면서, 기존의 상태관리 시스템은 어떻게 만들어져있구나 추측도 가능할 것입니다.

출처 - jakeseo_me 님의 velog

---

💬 리액트 공부를 초반에 시작했던 4월에 생각했던 것에 연장선인데..

💬 가상키보드부터 시작한 패스트캠퍼스 강의를 선택한 건 위에 내용에서 알아본 대로 순전히 바닐라 자바스크립트 때문이었다. 대체적으로 퍼블리셔+백엔드(보통 자바, 스프링)로만 구성된 회사에 다닌다면 jQuery만 써도 퍼블리셔로서 실무에서 업무하는 데 아무 지장은 없지만..(넥사크로든 웹스퀘어든 ib20이든 anyway..) 현재는 그렇더라도 미래엔 꼭 React로 일하고 싶으니까 그럴려면 바닐라는 선택이 아니라 필수다. 2018~2019년 이후부터는 국비지원 강의에서 Node.js 위주로 가르치고 있고, 프론트엔드+백엔드로 구성된 회사면 기술스택이 달라서 방향성에 따라 다르겠지만 2022년 현재 퍼블리셔라는 직종은 참 애매한 것 같다. (PHP도 20년 넘게 건재하기에 jQuery도 그럴 것 같지만...)

💬 퍼블리셔 연차 7~10년 이상 넘어가는 분들이 대다수 하는 이야기가 신입 개발자 초봉보다 높아서 프론트엔드 개발자로 전향할 때 전체 경력이 산정되지 않으면 연봉 산정이 애매해지는 부분도 있다. (직군 전환을 하고 연봉을 오히려 낮출 수도 있게 되는 현실적인 문제.. 아직 난 겪어보지 못했지만) 대체로 프리랜서로 활동하거나 프론트엔드 개발자로 전향하거나 하는 추세인 듯 한데.. 어떤 회사에선 신입 프론트엔드 개발자일 때 퍼블리셔랑 동일한 업무를 시키는 경우도 있어 개발자를 시작하다가 현타를 느끼는 경우도 있다고 하는데, 한 가지 아쉬운 점은 만약 하는 일은 같은데 포지션이 처음부터 다르게 적용되니 사실 인식이나 대우가 다르다는 게 문제다.. 그래서 사실 공부량이 많고 시간이 걸리더라도 전직하는 게 친구도 여러모로 베스트라고 늘 말해준다. (나도 그렇게 느낀다.)

💬 예전엔 퍼블리싱을 디자인과 같이 겸해서 했었고, 그렇게 일을 시키는 곳이 많았는데.. 난 개인적으로 현재 시대 흐름이 점점 분업화, 전문화를 지향하고 있는 추세이기 때문에 더는 디자이너에게 퍼블리싱을 시키지 않아도 된다고 생각한다. 나는 과거 그런 자리나 직무로 가서 일을 했었지만(그게 그 당시의 추세라고 한다면) 요즘 추세로 보면 약간 이도저도 아닌 사람..? 회사 직무상, 개발 협업상, 개인 관심상 공부하는 것을 제외하고 요즘 디자인 트렌드를 보면 3D 일러스트나 아이콘만 해도.. 스톡이 아니라면 조형 감각이나 빛에 대한 이해가 없으면 그래픽 디자인이라해도 직접 작업하는 시간도 어마어마할 것이기에..(C4D 같은 거까지 생각하면..;) 거기다 BX 브랜딩 디자인까지 갖춰진 회사라면.. 디자인 시스템도 내가 생각할 땐 사내 개발 프레임워크처럼 사내 디자인 프레임워크의 일종이라 느낀다. 프로덕트화할 수 있는 시각적 체계가 정립된다는 이야기.. 빠른 구현도 그렇지만.
회바회겠지만 개발분야도 Node + React + TypeScript + Next.js 프론트+백엔드 개발 환경인 곳이면 직군별로 특화되있고(모집 공고부터 기술 스택이 정해져있다) 아무튼 분업화, 전문화가 현재 IT의 추세같다. 업계, 업종, 규모마다 다를 순 있겠지만.. 처음엔 소규모로 시작해서 이것저것 다 같이 하던 회사도 결국엔 커지면 또 이야기가 달라진다.

💬 어쨌거나 그런 흐름이니 바쁘더라도 미래를 위해 20%의 에너지는 남겨두고 늘 대비하기.. 그냥 하던거 해도 지장은 없지만 생태계 멸종위기종일수도 희귀종일수도 (환경에 따라 다르게 보여질수도)