자바스크립트

자바스크립트(JavaScript)는 웹 페이지가 클릭에 반응하고 화면을 바꾸게 만드는 프로그래밍 언어예요. HTML이 건물 뼈대, CSS가 인테리어라면 자바스크립트는 스위치를 누르면 불이 켜지게 하는 전기 배선이에요.

글 서순명(솔리드그루 이사 · 퓨쳐인프라 운영) · 2026-10-29 작성 · 예시 코드는 2026-10-29 Windows 11 · Node v24.15.0 에서 직접 실행

자바스크립트는 어떻게 동작하나요?

웹 페이지를 열면 브라우저는 HTML, CSS, 자바스크립트 파일을 함께 받아요. 그중 자바스크립트는 브라우저 안의 엔진이 읽어서 바로 실행해요. 그래서 내 PC에 아무것도 깔지 않아도 돌아가요.

정해진 시간 뒤에 할 일이나 서버 답을 기다리는 일은 미뤄 두고, 그사이 다른 일을 먼저 처리해요. 이걸 비동기라고 불러요. 아래 실험에서 순서가 어떻게 바뀌는지 직접 볼 수 있어요.

자바(Java)와 같은 언어예요?

아니에요. MDN은 자바스크립트가 "해석되는 자바"가 아니라고 못박아요. 문법도, 쓰는 곳도 많이 달라요(MDN JavaScript).

자바스크립트는 넷스케이프에서 일하던 브렌던 아이크가 만들었고, 1995년 9월 넷스케이프 브라우저 2.0에 처음 실렸어요. 이후 표준 문서가 만들어졌는데, 그 표준 이름이 ECMAScript예요(MDN 용어 사전). 글에서 "ES2024" 같은 말을 보면 그해 표준판이라는 뜻이에요.

자바스크립트는 어디에 쓰나요?

처음엔 브라우저 안에서만 돌았지만, 지금은 서버와 화면 도구까지 넓어졌어요.

엑셀 정리나 데이터 분석처럼 화면이 없는 일은 파이썬이 편할 때가 많아요. 웹 화면이 들어가면 자바스크립트를 피하기 어려워요.

직접 해 보면 어떻게 나오나요?

2026-10-29 Windows 11 PC에서 Node v24.15.0으로 직접 실행한 결과예요. 브라우저 대신 Node.js로 돌렸지만 언어 규칙은 같아요.

$ cat basics.js
const cart = [{ name: "아메리카노", price: 4000 }, { name: "케이크", price: 6000 }];
const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log("합계:", total.toLocaleString("ko-KR") + "원");
console.log("'3' + 4 =", "3" + 4);
console.log("'3' * 4 =", "3" * 4);
console.log("0.1 + 0.2 =", 0.1 + 0.2);
console.log("1) 주문 접수");
setTimeout(() => console.log("3) 1초 뒤 '준비됐어요' 알림"), 1000);
console.log("2) 기다리는 동안 다음 손님 받기");

$ node basics.js
합계: 10,000원
'3' + 4 = 34
'3' * 4 = 12
0.1 + 0.2 = 0.30000000000000004
1) 주문 접수
2) 기다리는 동안 다음 손님 받기
3) 1초 뒤 '준비됐어요' 알림

• 합계 10,000원 — 장바구니의 가격을 모두 더했어요. 쇼핑몰 합계 계산이 이런 식이에요.
• '3' + 4 = 34 — 글자 "3"과 숫자 4를 더하라고 하면 숫자를 글자로 바꿔 이어 붙여요. 파이썬은 같은 코드에서 오류를 내고 멈춰요.
• '3' * 4 = 12 — 곱하기는 글자를 숫자로 바꿔 계산해요. 같은 값인데 기호에 따라 결과가 달라요.
• 1 → 2 → 3 순서 — 코드에는 3번 알림이 2번보다 위에 있지만, 1초를 기다리는 동안 2번을 먼저 처리했어요. 이게 비동기예요.

자주 하는 오해와 주의할 점

• 입력창 값은 글자예요 — 웹 입력창에 "3"을 넣으면 숫자가 아니라 글자로 들어와요. 더하기 전에 숫자로 바꾸지 않으면 위처럼 34가 나와요. AI에게 "입력값을 숫자로 바꾼 뒤 계산해 줘"라고 덧붙이면 막을 수 있어요.
• 화면 코드에 API 키를 넣으면 안 돼요 — 브라우저로 내려간 자바스크립트는 누구나 열어 볼 수 있어요. 키는 서버 쪽(Node.js) 환경변수에 두세요(API 키 뜻).
• "자바를 배우면 자바스크립트도 한다" — 이름만 닮았어요. 질문할 때도 "자바스크립트"라고 정확히 써야 맞는 답이 나와요.
• 소수 계산 오차 — 0.1+0.2가 0.3이 아닌 건 자바스크립트만의 버그가 아니에요. 파이썬도 같은 값을 내요. 돈은 원 단위 정수로 계산하세요.

바이브코딩으로 웹앱을 만들면 AI가 짜는 코드의 상당 부분이 자바스크립트예요. 어떤 도구가 자바스크립트 웹앱을 잘 만드는지는 바이브코딩 툴 비교를, 터미널에서 직접 돌려 보는 법은 클로드 코드 사용법을 보세요.

퓨쳐인프라에서는 어떻게 올리나요?

자바스크립트로 만든 서버(Node.js 앱)는 도커 이미지 하나로 앱 호스팅에 올리면 주소와 HTTPS가 붙어요. 앱 하나를 켜 두면 월 5,500원(부가세 포함, 1코어·1GB·트래픽 20GB 포함)이에요.

API 키 같은 비밀값은 앱 환경변수에 넣으면 암호화해 보관돼요. 화면 코드에 키를 적지 않아도 서버 코드가 꺼내 쓸 수 있어요. 코드 보관은 GitHub 계정 없이 쓰는 Git 저장소(조직당 100MB 무료)로 해도 돼요.

자주 묻는 질문

자바스크립트는 어디서 바로 연습해 볼 수 있어요?

크롬이나 엣지에서 F12 를 눌러 개발자 도구를 열고 '콘솔' 탭에 코드를 치면 바로 실행돼요. 1 + 2 를 치고 엔터를 누르면 3 이 나와요. 설치할 건 없어요.

타입스크립트(TypeScript)는 자바스크립트와 다른 언어예요?

자바스크립트에 '이 값은 숫자, 이 값은 글자'처럼 종류를 적는 문법을 더한 판이에요. 실행 전에 자바스크립트로 바뀌어서 돌아가요. AI 코딩 도구가 만든 프로젝트는 타입스크립트로 짜인 경우가 많아요.

JS 파일과 HTML 파일은 어떻게 이어져요?

HTML 파일 안에 script 태그로 자바스크립트 파일 주소를 적어 두면 브라우저가 페이지를 열 때 그 파일도 함께 받아 실행해요. 리액트 같은 도구를 쓰면 이 연결을 도구가 알아서 해 줘요.

자바스크립트를 몰라도 웹앱을 만들 수 있어요?

AI에게 맡기면 만들 수 있어요. 다만 오류가 났을 때 '콘솔', '비동기', '입력값은 글자' 같은 말을 알아 두면 AI에게 문제를 정확히 전달할 수 있어서 고치는 시간이 줄어요.

관련 용어

• 리액트 — 자바스크립트로 화면을 부품처럼 조립하는 도구
• Node.js — 자바스크립트를 서버에서 돌리는 실행 환경
• 파이썬 — 자동화·데이터에 많이 쓰는 또 하나의 언어
• 프론트엔드 — 자바스크립트가 주로 맡는 화면 쪽 일
• JSON — 자바스크립트 문법에서 나온 데이터 주고받기 형식