자바스크립트 (JS, JavaScript)

Notice

Recent Posts

Recent Comments

Link

« 2026/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

無제

자바스크립트 (JS, JavaScript) 본문

<script>

자바스크립트 (JS, JavaScript)

yo-u-loo 2026. 5. 26. 10:36

🔷 JavaScript 🔷

웹 페이지에 동적인 동작과 상호작용을 추가하는 프로그래밍 언어.

◼️ 웹에서 JS로 할 수 있는 일

실시간 상호작용: 버튼을 클릭했을 때 팝업창을 띄우거나, 메뉴가 슬라이드 형태로 열리고 닫히는 등 사용자의 행동에 즉시 반응하는 기능을 구현할 수 있다.
데이터 업데이트: 페이지 전체를 새로고침하지 않고도 서버와 통신하여 새로운 댓글, 알림, 날씨 정보 등을 가져와 화면을 갱신할 수 있다. (비동기 통신 활용)
시각적 효과: 애니메이션, 차트 생성, 그래픽 표현 등 화면에 다양한 동적 효과를 적용할 수 있다.
입력값 검증: 로그인 시 아이디가 비어 있거나 비밀번호가 너무 짧은 경우 즉시 안내하는 등, 사용자 입력 오류를 사전에 확인할 수 있다. (단, 보안을 위한 검증은 서버에서도 반드시 수행해야 한다.)

◼️ 웹브라우저가 JS를 해석하는 과정

우리가 작성한 JavaScript 코드는 사람이 읽고 작성하기 쉬운 형태의 프로그래밍 언어이기 때문에, 컴퓨터가 직접 이해하고 실행할 수는 없다.

이를 실행하기 위해 웹 브라우저 내부에는 JavaScript 엔진(JavaScript Engine) 이 존재하며, 엔진은 작성된 코드를 해석하고 실행 가능한 형태로 변환하여 처리한다.

대표적인 JavaScript 엔진으로는 Chrome의 V8, Firefox의 SpiderMonkey, Safari의 JavaScriptCore 등이 있다.

1️⃣ 로딩 (Loading)

브라우저가 HTML 문서를 읽다가 <script> 태그를 만나면 JavaScript 파일을 다운로드한다.
이때 스크립트의 위치와 defer, async 속성의 사용 여부에 따라 다운로드 및 실행 시점이 달라질 수 있다.

2️⃣ 파싱 (Parsing)

JavaScript 엔진은 코드를 읽어 문법을 분석하고, 이를 AST(Abstract Syntax Tree, 추상 구문 트리) 형태로 변환한다.
만약 문법 오류(Syntax Error)가 발견되면 이 단계에서 실행이 중단된다.

3️⃣ 컴파일 및 실행 (Compilation & Execution)

파싱이 완료된 코드는 JavaScript 엔진에 의해 실행된다.
현대 JavaScript 엔진은 인터프리터와 컴파일러를 함께 사용하는 구조를 가지며, 자주 실행되는 코드는 JIT(Just-In-Time) 컴파일을 통해 기계어로 변환하여 성능을 최적화한다.
이 과정에서 변수 선언, 함수 호출, 연산 처리, DOM 조작 등이 실제로 수행된다.

◼️ JS 기본 용어 정리

값 (Value): 100, "안녕", true와 같이 프로그램에서 실제로 다루는 데이터 자체.
변수 (Variable): 값을 저장하기 위해 사용하는 이름이 있는 공간.
연산자 (Operator): +, -, *, /, === 등 값을 계산하거나 비교하는 데 사용하는 기호.
함수 (Function): 특정 작업을 수행하도록 작성한 코드의 묶음. 필요할 때 호출하여 실행할 수 있다.
문법 (Syntax): JavaScript가 코드를 올바르게 이해하고 실행할 수 있도록 정해 놓은 작성 규칙.

◼️ HTML에 JS 작성하는 방법

1️⃣ 내부 스크립트 (Internal Script)

<!DOCTYPE html>
<html>
<head>
    <title>Internal Script</title>
</head>
<body>
    <script> console.log("안녕하세요!");
    </script>
</body>
</html>

HTML 파일의 <script> 태그 안에 JavaScript 코드를 직접 작성하는 방법.

2️⃣ 외부 스크립트 (External Script)

HTML 파일
<script src="script.js"></script>

script.js 파일
console.log("안녕하세요!");

JavaScript 코드를 별도의 .js 파일에 작성한 후 HTML에서 불러오는 방법. (권장 방식)

📍 POINT 📍

✔️ 자바스크립트는 웹을 움직이게 만드는 동적 언어이다. ✔️

✔️ 브라우저 내부의 엔진 (V8 등)이 코드를 해석하고 실행한다. ✔️

✔️ HTML 파일과 연결하여 사용하며, 주로 별도의 파일로 관리하는 것이 깔끔하다. ✔️

'<script>' 카테고리의 다른 글

HTML에서 JavaScript를 배치하는 가장 좋은 위치 (0)	2026.05.26
ECMAScript (ES6) (0)	2026.05.26
JS coding rule and style guide (0)	2026.05.26
console.log() (0)	2026.05.26
JS I/O (Input / Output) 입출력 (0)	2026.05.26

'<script>' Related Articles

無제

자바스크립트 (JS, JavaScript) 본문

자바스크립트 (JS, JavaScript)

🔷 JavaScript 🔷

'<script>' 카테고리의 다른 글

티스토리툴바