자바스크립트가 무엇인지 감 잡기

문법보다 먼저 알아야 할 것

자바스크립트를 처음 배울 때 가장 먼저 만나는 말은 보통 변수, 함수, 조건문 같은 문법입니다. 그런데 문법부터 외우기 시작하면 금방 막힐 수 있습니다. 아직 "이걸 왜 배우는지"가 보이지 않기 때문입니다.

자바스크립트는 웹페이지를 움직이게 만드는 언어입니다. 여기서 "움직인다"는 말은 단순히 화면에서 무언가가 흔들린다는 뜻이 아닙니다. 사용자가 버튼을 누르면 반응하고, 입력한 내용을 확인하고, 필요한 정보를 화면에 새로 보여 주고, 인터넷에서 데이터를 가져와 페이지를 바꾸는 일을 말합니다.

우리가 매일 쓰는 웹사이트를 떠올려 봅시다.

• 로그인 버튼을 눌렀을 때 아이디와 비밀번호가 비었는지 확인합니다.

• 쇼핑몰에서 수량을 바꾸면 총금액이 다시 계산됩니다.

• 검색창에 글자를 입력하면 추천 검색어가 나타납니다.

• 사진 갤러리에서 다음 버튼을 누르면 다른 이미지가 보입니다.

• 회원가입 화면에서 이메일 형식이 맞지 않으면 안내 문구가 뜹니다.

이런 반응의 상당 부분에 자바스크립트가 관여합니다. 그래서 자바스크립트를 배우면 "웹페이지가 왜 이렇게 반응하는지"를 이해할 수 있고, 더 나아가 직접 작은 기능을 만들 수 있습니다.

AI 생성 이미지

웹페이지를 이루는 세 가지 역할

웹페이지를 이해할 때 자주 나오는 세 가지가 있습니다. HTML, CSS, JavaScript입니다. 처음에는 이 셋을 한 번에 외우려 하지 말고, 식당에 비유해 보면 좋습니다.

HTML은 식당의 메뉴판과 재료 목록에 가깝습니다. 무엇이 있는지 정합니다. 제목, 문단, 이미지, 버튼, 입력칸처럼 웹페이지에 놓이는 내용과 구조를 담당합니다.

CSS는 식당의 인테리어와 배치에 가깝습니다. 글자 색, 버튼 모양, 여백, 배경색, 화면 크기에 따른 배치를 담당합니다. 같은 메뉴판이라도 CSS에 따라 깔끔한 디자인이 될 수도 있고, 복잡해 보일 수도 있습니다.

JavaScript는 직원의 행동에 가깝습니다. 손님이 버튼을 누르면 주문을 받고, 입력한 내용이 맞는지 확인하고, 필요한 정보를 찾아 화면을 바꿉니다.

정리하면 다음과 같습니다.

예를 들어 쇼핑몰 상품 페이지를 봅시다. 상품명, 가격, 사진, 장바구니 버튼은 HTML로 놓입니다. 가격을 굵게 보이게 하고 버튼을 파란색으로 만드는 일은 CSS가 합니다. 사용자가 장바구니 담기 버튼을 눌렀을 때 "장바구니에 담았습니다"라는 메시지를 띄우거나 장바구니 숫자를 1 늘리는 일은 JavaScript가 맡습니다.

이 차이를 알면 자바스크립트의 위치가 분명해집니다. 자바스크립트는 웹페이지의 모든 것을 혼자 담당하는 언어가 아닙니다. 이미 놓여 있는 내용을 사용자의 행동에 맞게 바꾸는 역할을 많이 합니다.

자바스크립트와 자바는 다릅니다

처음 배우는 분들이 자주 묻는 질문이 있습니다.

"자바스크립트를 배우려면 자바를 먼저 알아야 하나요?"

답은 아니요입니다. 자바스크립트와 자바는 이름이 비슷하지만 서로 다른 언어입니다. 이름 때문에 관련이 깊어 보이지만, 학습을 시작할 때 자바 지식은 필요하지 않습니다.

비유하자면 이름이 비슷한 두 가게가 있다고 해서 같은 메뉴를 파는 것은 아닙니다. 자바를 몰라도 자바스크립트를 시작할 수 있습니다. 이 책에서도 자바를 알고 있다는 전제를 두지 않습니다.

자바스크립트를 배울 때 필요한 출발점은 훨씬 단순합니다.

• 웹사이트를 사용해 본 경험

• 버튼을 누르면 무언가 바뀐다는 감각

• 간단한 문장을 차근차근 읽어 보려는 마음

이 정도면 충분합니다. 개발 경험이 없어도 괜찮습니다.

브라우저 안에는 이미 실행기가 들어 있습니다

자바스크립트의 좋은 점 중 하나는 시작 장벽이 낮다는 것입니다. 우리가 쓰는 브라우저에는 자바스크립트를 실행하는 기능이 이미 들어 있습니다.

브라우저란 웹사이트를 보는 프로그램입니다. Chrome, Edge, Safari, Firefox 같은 것들이 여기에 해당합니다. 이 브라우저들은 웹페이지 안의 자바스크립트 코드를 읽고 실행할 수 있습니다.

그래서 처음부터 복잡한 프로그램을 설치할 필요가 없습니다. 별도로 무언가를 구매할 필요도 없습니다. 다음 장에서는 브라우저만으로 첫 코드를 실행해 볼 것입니다.

지금은 이 정도만 기억하면 됩니다.

자바스크립트는 웹브라우저가 알아들을 수 있는 지시문이다.

물론 나중에는 VS Code 같은 코드 편집기를 사용할 수 있습니다. 하지만 처음부터 도구가 많아지면 배움의 초점이 흐려질 수 있습니다. 이 책은 먼저 브라우저에서 바로 확인하는 방식으로 시작합니다. 코드를 쓰고, 실행하고, 결과를 보는 감각을 먼저 익히기 위해서입니다.

자바스크립트는 어떤 일을 할 수 있을까

자바스크립트로 할 수 있는 일은 많지만, 처음부터 거창한 서비스를 떠올릴 필요는 없습니다. 비개발자도 바로 체감할 수 있는 예시부터 보면 충분합니다.

계산기

상품 가격과 수량을 입력하면 총액을 계산할 수 있습니다. 할인율을 넣으면 할인된 금액도 구할 수 있습니다. 업무에서 자주 반복하는 간단한 계산을 웹페이지 안에 넣을 수 있습니다.

예를 들어 이런 흐름입니다.

가격을 입력한다
수량을 입력한다
계산 버튼을 누른다
총금액이 화면에 표시된다

여기서 버튼을 눌렀을 때 계산하고 결과를 보여 주는 부분이 자바스크립트의 일입니다.

할 일 목록

할 일을 입력하고 추가 버튼을 누르면 목록에 새 항목이 생깁니다. 끝난 일은 체크하거나 삭제할 수 있습니다.

이 기능은 단순해 보이지만 자바스크립트의 중요한 개념이 많이 들어 있습니다. 사용자의 입력을 읽고, 목록에 새 내용을 추가하고, 클릭한 항목을 지우는 과정이 모두 들어 있기 때문입니다.

이미지 갤러리

여러 장의 사진 중 하나를 보여 주고, 다음 버튼을 누르면 다음 사진으로 바꿀 수 있습니다. 쇼핑몰 상세 이미지, 포트폴리오, 여행 사진 페이지에서 흔히 볼 수 있는 방식입니다.

HTML만 있으면 여러 이미지를 한꺼번에 놓을 수는 있습니다. 하지만 사용자가 버튼을 누를 때마다 보이는 이미지를 바꾸는 일에는 자바스크립트가 필요합니다.

자동 입력 검사

회원가입 화면에서 이메일을 입력했는데 @가 빠져 있으면 안내 문구가 나오는 경우가 있습니다. 비밀번호가 너무 짧으면 "8자 이상 입력하세요" 같은 메시지가 보이기도 합니다.

이런 기능은 사용자가 제출 버튼을 누르기 전에 실수를 줄여 줍니다. 입력값을 확인하고, 문제가 있으면 바로 알려 주는 역할을 자바스크립트가 할 수 있습니다.

간단한 데이터 불러오기

날씨, 환율, 게시글 목록처럼 인터넷 어딘가에 있는 데이터를 가져와 화면에 보여 줄 수도 있습니다. 이때 자주 만나는 형식이 JSON입니다. JSON은 데이터를 주고받기 위한 정리된 메모 형식이라고 생각하면 됩니다.

처음부터 어렵게 볼 필요는 없습니다. 지금은 "자바스크립트로 인터넷에서 정보를 가져와 화면에 표시할 수 있다" 정도만 알아두면 됩니다. 자세한 내용은 뒤에서 천천히 다룹니다.

자바스크립트의 기본 흐름

자바스크립트가 하는 일을 아주 짧게 줄이면 다음과 같습니다.

사용자가 어떤 행동을 한다
→ 자바스크립트가 그 행동을 알아챈다
→ 정해 둔 일을 실행한다
→ 화면이나 데이터가 바뀐다

예를 들어 버튼 클릭은 이렇게 생각할 수 있습니다.

사용자가 버튼을 누른다
→ 자바스크립트가 클릭을 감지한다
→ 안내 문구를 만든다
→ 화면에 보여 준다

입력 검사도 비슷합니다.

사용자가 이메일을 입력한다
→ 자바스크립트가 입력 내용을 확인한다
→ 형식이 맞지 않으면 안내한다
→ 사용자가 고칠 수 있다

이 흐름을 이해하면 앞으로 배울 문법의 목적이 보입니다. 변수는 값을 잠시 담기 위해 필요합니다. 조건문은 상황에 따라 다른 일을 하기 위해 필요합니다. 반복문은 같은 일을 여러 번 하기 위해 필요합니다. 함수는 자주 쓰는 일을 묶어 두기 위해 필요합니다.

문법은 외워야 할 목록이 아니라, 이런 행동을 만들기 위한 도구입니다.

처음부터 완벽할 필요는 없습니다

프로그래밍을 처음 배우면 작은 오타 하나에도 코드가 멈춥니다. 괄호 하나가 빠지거나, 따옴표 방향이 다르거나, 대문자와 소문자를 다르게 써도 오류가 날 수 있습니다. 이것은 실력이 부족해서가 아니라 코드가 원래 정확한 지시문이기 때문입니다.

사람에게 "버튼 누르면 알려 줘"라고 말하면 대충 알아듣습니다. 하지만 컴퓨터는 대충 알아듣지 않습니다. 대신 한 번 정확히 알려 주면 같은 일을 빠르고 반복해서 처리합니다.

그래서 자바스크립트를 배울 때 중요한 태도는 완벽하게 외우는 것이 아닙니다.

• 작은 코드를 실행해 본다.

• 결과가 예상과 다른지 본다.

• 오류 메시지를 읽어 본다.

• 한 줄씩 고쳐 본다.

이 과정을 반복하면 코드가 점점 익숙해집니다.

이 장에서 가져갈 핵심

이번 장에서는 자바스크립트 문법을 자세히 배우지 않았습니다. 대신 자바스크립트가 왜 필요한지 큰 그림을 잡았습니다.

핵심은 네 가지입니다.

1. HTML은 웹페이지의 내용, CSS는 모양, JavaScript는 행동을 담당합니다.

2. 자바스크립트와 자바는 다른 언어입니다. 자바를 몰라도 시작할 수 있습니다.

3. 브라우저에는 자바스크립트 실행 기능이 이미 들어 있습니다.

4. 자바스크립트로 계산기, 할 일 목록, 이미지 갤러리, 입력 검사, 데이터 불러오기 같은 기능을 만들 수 있습니다.

다음 장에서는 설치 없이 브라우저에서 첫 자바스크립트 코드를 실행해 봅니다. 아직 개발자가 된 느낌이 들지 않아도 괜찮습니다. 첫 목표는 간단합니다. 코드를 한 줄 실행하고, 화면에서 반응을 확인하는 것입니다.