웹 페이지에서 버튼을 누르면 메뉴가 펼쳐지고, 스크롤하면 애니메이션이 따라오는 그 모든 동작의 뒤에는 자바스크립트(JavaScript)가 있습니다. 브라우저가 직접 실행하는 사실상 유일한 언어라서, 웹 프론트엔드를 한다면 선택이 아니라 필수입니다.

브라우저를 넘어서

한때 "브라우저 안의 장난감" 취급을 받던 시절도 있었지만, Node.js의 등장으로 서버까지 영역을 넓혔습니다. 이제는 프론트엔드와 백엔드를 같은 언어로 짤 수 있고, 리액트와 뷰 같은 프레임워크 생태계도 거대합니다.

첫 코드

// 버튼을 누르면 카운트가 올라가는 예제
let count = 0;
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
  count++;
  console.log(`${count}번 눌렀어요`);
});

화살표 함수(=>)와 템플릿 문자열(백틱)은 요즘 자바스크립트에서 가장 많이 보게 될 문법입니다.

입문자를 위한 팁

  • var는 잊고 let과 const만 쓰세요. 변수 범위가 명확해져 버그가 줄어듭니다.
  • 비동기(async/await)는 처음에는 낯설지만, 서버 요청을 다루려면 반드시 익혀야 합니다.
  • 콘솔(console.log)과 브라우저 개발자 도구가 최고의 학습 도구입니다.

"느슨한 타입" 때문에 예상치 못한 동작이 생기기도 하는데, 이 단점을 보완하려고 나온 것이 바로 다음에 소개할 타입스크립트입니다.

어디서 연습하면 좋을까

자바스크립트의 가장 큰 장점은 '바로 보인다'는 점입니다. 브라우저 개발자 도구(F12)의 콘솔에 코드를 한 줄씩 쳐보면 결과가 즉시 나옵니다. 간단한 버튼 동작, 입력값 검사, 화면 요소 바꾸기처럼 눈에 보이는 것부터 만들어 보세요. 결과가 화면에 나타나니 성취감이 빠르고, 그만큼 덜 지칩니다.

다음 단계로 가는 길

기본기를 익혔다면 비동기 처리와 DOM 조작, 그리고 fetch로 서버에서 데이터를 받아오는 흐름을 연습하세요. 그 뒤 리액트 같은 프레임워크로 넘어가면 훨씬 수월합니다. 순서를 건너뛰고 프레임워크부터 잡으면 '왜 이렇게 되는지'를 모른 채 복붙만 하게 되니, 바닐라 자바스크립트로 기초를 다지는 시간이 결국 가장 빠른 길입니다.