50대에 깨달은 Vanilla JS의 중요성: 프레임워크 의존성에서 벗어나는 법
경력 20년차, React, Vue는 물론이고
초창기 Angular까지 웬만한 프레임워크는
다 써봤다고 자부하는 '시니어' 개발자입니다.
그런데 얼마 전, 코드 리뷰 중에
열정 넘치는 신입 개발자의 질문 하나에
순간 말문이 턱 막히고 얼굴이 화끈거리는 경험을 했죠.
"선배님, useEffect의 두 번째 인자 배열이 비어있을 때,
정확히 어떤 원리로 컴포넌트 마운트 시점에만 콜백이 실행되는 거죠?"
'그냥 그렇게 쓰는 규칙'이라고 얼버무렸지만,
마음속으로는 알고 있었습니다.
프레임워크가 '알아서' 해주던 것의
가장 근본적인 동작 원리를 설명하지 못하는 제 자신을요.
그 순간 깨달았죠. 아, 나는 지난 몇 년간 '프레임워크 사용자'였구나.
진짜 '웹 개발자'가 아니라.
혹시 저처럼 프레임워크의 편리한 API 없이는
코딩할 엄두가 안 나는 분 계신가요?
새로운 프레임워크가 나올 때마다 불안하신가요?
그렇다면 오늘 저의 솔직한 이야기가
앞으로의 개발자 인생에 큰 전환점이 될지도 모릅니다.
🚀 왜 다시, 낡아 보이는 바닐라 JS일까요?
"요즘 세상에 누가 바닐라 JS로 개발해요?"
맞는 말처럼 들릴 수 있어요.
생산성, 생태계, 채용 시장까지 모든 것이
프레임워크 중심으로 돌아가고 있으니까요.
하지만 자동차 정비사가 엔진의 4행정 사이클 원리는 모르고
최신 진단 장비 사용법만 달달 외우는 것과 같습니다.
당장은 문제가 해결되는 것처럼 보이지만,
예상치 못한 고장이 발생했을 때 근본적인 원인을 찾지 못해
결국 더 큰 문제에 부딪히게 되죠.
바닐라 JS는 단순히 오래된 기술이 아니에요.
모든 프레임워크가 서 있는 단단한 땅, 즉 브라우저가
유일하게 알아듣는 '언어' 그 자체입니다. 프레임워크는 결국
이 본질을 더 쉽게 사용하도록 추상화한 도구일 뿐이죠.
jQuery, Backbone.js, Angular, React, Vue...
프레임워크는 유행처럼 계속 바뀌잖아요.
10년 뒤에 지금의 프레임워크가 그대로 쓰일까요?
아마 아닐 겁니다. 이 변화의 홍수 속에서
개발자로서 길을 잃지 않게 해주는 유일한 나침반이
바로 변하지 않는 본질, 바닐라 JS입니다.
💡 기본으로 돌아가니 비로소 보였던 것들
솔직히 처음엔 막막하고 지루했어요.
`document.getElementById`... 이게 얼마 만인지.
간단한 투두리스트를 만드는데도 반나절이 걸렸습니다.
그런데 그렇게 헤매는 과정에서
놀라운 '아하!'의 순간들을 계속 마주하게 됐어요.
상태가 바뀔 때마다 어떤 DOM을 어떻게 업데이트할지
일일이 코드로 작성하다 보니, React의 '가상 DOM'이
얼마나 혁신적인 아이디어였는지 온몸으로 체감하게 된 거죠.
• 깃털 같은 로딩 속도: 불필요한 라이브러리 코드가 없으니 초기 로딩 속도가 말도 안 되게 빨라졌어요.
• 명쾌한 디버깅: 문제가 생기면 프레임워크의 복잡한 내부가 아닌, 제가 작성한 코드 안에서 100% 원인을 찾을 수 있었죠.
• 의존성 제로의 자유: 라이브러리 업데이트나 보안 이슈에서 완전히 자유로워졌습니다.
• 진정한 자신감: 어떤 프레임워크를 만나도 '결국 자바스크립트'라는 생각에 두렵지 않게 됐어요.
프레임워크의 편리함 뒤에 숨겨진
웹의 진짜 동작 원리를 이해하게 되니까,
오히려 기존에 사용하던 프레임워크를
훨씬 더 깊이 있고 효율적으로 사용할 수 있게 된 점이
정말 아이러니하면서도 큰 수확이었습니다.
🛠️ 시니어 개발자를 위한 효율적인 바닐라 JS 접근법
자, 그럼 어떻게 시작해야 할까요?
우리가 신입 개발자처럼 모든 걸 처음부터
학습하듯이 접근할 필요는 없습니다. 그건 비효율적이죠.
우리의 경험을 활용해 핵심을 짚어
효율적으로 '감'을 되찾는 것이 중요합니다.
✅ 1단계: 작은 UI 직접 만들기: 기존 프로젝트의 복잡하지 않은 UI 하나를 바닐라 JS로 바꿔보세요. (예: 모달창, 탭 메뉴, 아코디언)
✅ 2단계: 데이터 통신 직접 구현하기: Axios나 react-query 대신, 브라우저 내장 `fetch` API와 `Promise`, `async/await`로 API 통신을 직접 구현해보세요.
✅ 3단계: 화면 직접 그려보기: 가상 DOM 없이 `document.createElement`, `appendChild`를 사용해 API로 받아온 데이터 목록을 화면에 직접 렌더링 해보세요.
✅ 4단계: 이벤트 효율적으로 관리하기: 각 목록 아이템에 이벤트를 거는 대신, 부모 요소에 이벤트 하나만 거는 '이벤트 위임(Event Delegation)' 패턴을 적용해보세요.
전부 다 하려고 부담 가질 필요 없어요.
가장 중요한 건 프레임워크가 자동으로 해주던 것들을
'내 손으로 직접' 해보는 그 경험 자체입니다.
아래 간단한 코드가 모든 것의 시작점이 될 수 있어요.
const data = ['React', 'Vue', 'Angular'];
const app = document.getElementById('app'); // <div id="app"></div>
data.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
app.appendChild(li);
});
절대 처음부터 재사용 가능한 컴포넌트나 상태 관리 시스템 같은
거창한 걸 만들려고 시도하지 마세요.
우리의 목표는 '프레임워크 대체품 개발'이 아니라 '동작 원리 체득'입니다.
작고, 못생기고, 비효율적인 코드라도 괜찮으니, 일단 완성하는 경험이 가장 중요합니다.
🌟 진짜 '자유로운' 개발자가 된다는 것
50대에 다시 시작한 바닐라 JS 공부는
단순히 잊었던 기술 하나를 복습하는 게 아니었어요.
지난 20년간 편리함에 가려 잊고 있던 개발의 첫 즐거움과
누구도 흔들 수 없는 근본에 대한 자신감을 되찾는 소중한 과정이었습니다.
이제는 Svelte니 SolidJS니 하는 새로운 프레임워크가 나와도
전혀 불안하거나 두렵지 않습니다.
오히려 '이번엔 자바스크립트의 어떤 부분을
얼마나 창의적으로 활용했을까?' 하는 호기심으로
소스코드를 뜯어볼 여유와 본질을 꿰뚫는 눈이 생겼거든요.
훌륭한 목수는 최신 전동 공구(프레임워크)를 잘 다루지만,
그 이전에 나무의 성질(JS)을 완벽히 이해하고
상황에 맞는 최적의 대패와 톱(기본 API)을 선택할 줄 압니다.
우리도 그런 깊이를 가진 개발자가 되어야 하지 않을까요?
저의 조금 부끄러운 경험이 동료, 선후배 개발자분들께
작은 용기와 영감이 되었으면 하는 바람입니다.
오늘 당장, 늘 쓰던 `map` 함수 대신 `forEach`와 `createElement`로
작은 목록 하나만이라도 직접 만들어보는 건 어떨까요?
#바닐라JS, #VanillaJS, #자바스크립트, #프레임워크, #개발자, #50대개발자, #시니어개발자, #프론트엔드, #코딩공부, #기초의중요성, #개발자성장, #IT정보, #테크, #회고, #개발노하우