( JavaScript ) 웹을 움직이는 기술

⭕ JavaScript : 웹을 움직이는 기술

웹 브라우저에서 동적인 움직임을 담당하는 JavaScript는 오늘날 웹 개발에서 빼놓을 수 없는 핵심 언어이다. 처음에는 HTML과 CSS로 만들어진 정적인 웹 페이지에 생기를 불어넣는 보조 역할만 했으나, 지금은 모바일 앱 개발이나 서버 측 프로그래밍(Node.js 등)까지 영역을 넓혔다. 웹 개발자에게 JavaScript는 필수로 익혀야 할 지식이며, 그 기초를 다지는 일은 매우 중요했다.

 

 

---

 

 

🔴 JavaScript의 특징

JavaScript를 이해하기 위해선 몇 가지 핵심적인 특징을 알아야 한다.

• 프로토타입 기반 객체 지향 언어이다 : 전통적인 클래스 기반의 언어와는 다르게, JavaScript는 프로토타입이라는 개념을 사용하여 객체 지향 특성을 구현한다. 상속과 클래스 개념이 없다고 했지만, 최신 JavaScript(ES6 이후)에서는 class 문법이 도입되어 사용이 더 편리해졌다.
• 스크립트 언어이자 인터프리터 언어이다 : 코드를 실행하기 전 컴파일 과정을 거치지 않고, 작성된 텍스트 소스 코드가 브라우저에 내장된 인터프리터를 통해 실시간으로 분석되어 실행된다. 덕분에 빠르게 실행할 수 있다는 장점이 있다.
• 동적 타입 언어이다 (Dynamic Typing) : 변수의 타입을 미리 선언할 필요가 없다. 변수에 할당되는 값에 따라 변수의 타입이 자동으로 결정되고, 실행 중에도 타입이 바뀔 수 있다. 이는 유연함을 제공하지만, 때로는 예상치 못한 오류를 일으킬 수도 있다.
• 일급 함수이다 (First-class Functio) : 함수를 일반적인 값(데이터)처럼 다룰 수 있다는 의미이다. 함수를 변수에 할당하거나, 다른 함수의 인수로 전달하거나, 함수의 반환 값으로 사용할 수 있다.

 

---

 

 

🔴 JavaScript 기초 문법 요소

JavaScript 코드를 작성할 때 가장 기본이 되는 요소들이다.

 

1. 변수와 상수 (Variables and Constants)

데이터를 저장하는 공간이 바로 변수(Variable)이다. JavaScript에서는 var, let, const 키워드를 사용하여 변수와 상수를 선언한다.

• var : 초기 JavaScript에서 사용되던 키워드이다. 함수 스코프를 가지며, 재선언과 재할당이 모두 가능해 혼란을 줄 수 있어 요즘은 잘 사용하지 않는다.
• let : 블록 스코프를 가지는 변수이다. 재선언은 안 되지만, 재할당은 가능하다. 변수 값이 바뀔 수 있을 때 사용한다.
• const : 블록 스코프를 가지는 상수이다. 재선언 및 재할당이 모두 불가능하다. 한번 값을 할당하면 변경할 수 없는 고정된 값에 사용하며, 가장 권장되는 선언 방식이다.

const name = "Geunho"; // 상수: 재할당 불가능
let age = 30;         // 변수: 재할당 가능
age = 31;             // 가능

 

---

 

2. 데이터 타입 (Data Types)

JavaScript의 값은 여러 가지 타입을 가진다. 가장 기본적인 타입은 다음과 같다.

 

• 원시 타입 (Primitive Types):
  • String (문자열): 텍스트 데이터. 예: "Hello", 'World'
  • Number (숫자): 정수 및 부동 소수점 숫자. 예: 10, 3.14
  • Boolean (불리언): 참(true) 또는 거짓(false).
  • Null: 의도적으로 값이 없음을 나타낸다.
  • Undefined: 변수를 선언했지만 값이 할당되지 않았을 때의 상태이다.
• 객체 타입 (Object Type):
  • Object (객체): 여러 속성(key-value 쌍)을 담을 수 있는 복합적인 값이다. 예: { key: "value" }
  • Array (배열): 여러 값을 순서대로 담아놓은 리스트이다. 예: [1, 2, "three"]

---

 

3. 조건문과 반복문 (Conditionals and Loops)

코드의 흐름을 제어하는 기본적인 방법이다.

• 조건문 (if, else if, else) : 주어진 조건에 따라 다른 코드를 실행하도록 한다.

if (age >= 19) {
    console.log("성인이다");
} else {
    console.log("미성년자이다");
}

• 반복문 (for, while) : 특정 코드를 반복적으로 실행하도록 한다. 웹 페이지에서 목록을 만들거나 데이터를 처리할 때 자주 사용한다.

for (let i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2 출력
}

 

 

---

 

이러한 기초 문법을 익히는 것은 JavaScript를 활용하여 동적이고 상호작용이 가능한 웹 페이지를 만드는 첫걸음이다.