HTML이 웹의 '뼈대'를, CSS가 '스타일'을 담당한다면, **자바스크립트(JavaScript)**는 웹 페이지를 동적으로 만들고 사용자와의 상호작용을 처리하는 '뇌'와 '근육' 역할을 합니다. 🧠 HTML, CSS와 달리 JavaScript는 조건문, 반복문, 함수 등을 갖춘 완벽한 프로그래밍 언어입니다.
백엔드 개발자에게 JavaScript는 프론트엔드 로직을 이해하고, API를 통해 데이터를 주고받는 데 필수적인 지식입니다.
## 1. JavaScript의 핵심 특징
- 인터프리터 언어 (Interpreted Language): 별도의 컴파일 과정 없이 브라우저가 코드를 한 줄씩 해석하여 바로 실행합니다.
- 동적 타입 언어 (Dynamically Typed Language): 변수의 타입을 미리 선언할 필요 없이, 값이 할당될 때 런타임에 타입이 결정됩니다.
- 이벤트 기반 (Event-Driven): 사용자의 클릭, 키보드 입력, 스크롤 등 특정 '이벤트'가 발생했을 때 정해진 코드를 실행하는 방식으로 동작합니다.
- 싱글 스레드 및 비동기 처리: JavaScript는 한 번에 하나의 작업만 처리하는 싱글 스레드(Single-Threaded) 기반이지만, 비동기(Asynchronous) 작업을 통해 시간이 오래 걸리는 작업(예: 서버에 데이터 요청)을 기다리지 않고 다른 코드를 먼저 실행하여 효율성을 높입니다.
## 2. 기본 문법 (Basic Syntax)
### 변수 (Variables)
변수를 선언할 때는 주로 let과 const를 사용합니다.
- let: 값이 변경될 수 있는 변수를 선언합니다.
- const: 한 번 할당하면 절대 변하지 않는 상수(constant)를 선언합니다.
- var: 구식 변수 선언 방식으로, 호이스팅 등 예기치 않은 문제를 일으킬 수 있어 현재는 사용을 지양합니다.
JavaScript
let count = 10;
count = 20; // 가능
const name = "baby-t";
// name = "jemini"; // 에러 발생!
### 자료형 (Data Types)
- 원시 타입 (Primitive Types): string(문자열), number(숫자), boolean(true/false), null(의도적으로 값이 없음), undefined(값이 할당되지 않음)
- 객체 타입 (Object Type): object(객체), array(배열), function(함수) 등
### 함수 (Functions)
특정 작업을 수행하는 코드 블록입니다. function 키워드나 화살표 함수(=>)로 선언할 수 있습니다.
JavaScript
// 기본 함수 선언
function add(a, b) {
return a + b;
}
// 화살표 함수 (최신 방식)
const subtract = (a, b) => {
return a - b;
};
## 3. 브라우저에서의 JavaScript: DOM 조작과 이벤트
브라우저 환경에서 JavaScript의 가장 중요한 역할은 HTML 문서를 조작하고 사용자의 행동에 반응하는 것입니다.
### DOM (Document Object Model)
브라우저는 HTML 문서를 읽어들여, JavaScript가 제어할 수 있는 객체(Object) 형태의 트리 구조로 만드는데 이를 DOM이라고 합니다. JavaScript는 이 DOM을 통해 HTML의 모든 요소에 접근하고 수정할 수 있습니다.
### DOM 조작 (DOM Manipulation)
- 요소 선택: document.querySelector()나 document.getElementById()를 사용하여 HTML 요소를 선택합니다.
- 내용 변경: .textContent나 .innerHTML 속성으로 요소 안의 텍스트나 HTML을 변경합니다.
- 스타일 변경: .style 속성으로 CSS 스타일을 직접 변경합니다.
- 요소 추가/삭제: document.createElement(), .appendChild(), .remove() 등으로 요소를 동적으로 만들거나 삭제합니다.
### 이벤트 처리 (Event Handling)
사용자의 행동(이벤트)을 감지하고 그에 맞는 함수를 실행하도록 연결하는 것을 **이벤트 리스닝(Event Listening)**이라고 합니다.
HTML
<button id="myButton">클릭하세요</button>
<p id="message"></p>
<script>
// 1. 요소 선택
const button = document.getElementById('myButton');
const messageP = document.getElementById('message');
// 2. 이벤트 리스너 추가
button.addEventListener('click', function() {
// 3. 버튼 클릭 시 p 태그의 내용 변경
messageP.textContent = '버튼이 클릭되었습니다!';
});
</script>
## 4. HTML에 JavaScript 적용하기
- 내부 스크립트 (Internal Script): HTML 파일 내 <script> 태그 안에 코드를 작성합니다.
- 외부 스크립트 (External Script): 별도의 .js 파일에 코드를 작성하고, <script src="경로"></script> 태그로 불러옵니다. 코드의 분리 및 재사용을 위해 가장 권장되는 방식입니다.
팁: <script> 태그는 주로 <body> 태그가 끝나기 직전에 위치시킵니다. 이는 브라우저가 HTML 구조(DOM)를 모두 그린 후에 스크립트를 로드하여, 화면 표시가 지연되는 것을 방지하기 위함입니다.
'개발 공부 > 프론트 엔드' 카테고리의 다른 글
| CSS 핵심 정리 (0) | 2025.09.07 |
|---|---|
| UTF-8 (0) | 2025.09.05 |
| HTML 핵심 정리 (0) | 2025.09.04 |