====== 자바스크립트 개발 가이드라인 ======

이 문서는 웹 개발의 핵심 기술 중 하나인 자바스크립트에 대한 포괄적인 가이드라인을 제공합니다. 자바스크립트의 기본 개념부터 핵심 문법, 그리고 실질적인 활용 예제에 이르기까지, 개발자가 자바스크립트를 이해하고 효과적으로 사용할 수 있도록 돕는 것을 목표로 합니다. 웹 페이지의 동적인 상호작용을 구현하는 데 필수적인 이 언어에 대한 깊이 있는 이해를 통해, 보다 견고하고 효율적인 애플리케이션을 구축할 수 있을 것입니다.

{{wiki:it:programming:javascript_1.png?400}}

----
===== 1. 자바스크립트 개요 =====

자바스크립트(//JavaScript//)는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어로 시작하여, 현재는 웹 페이지의 동적인 요소를 제어하고 사용자 경험을 향상시키는 데 필수적인 역할을 하고 있습니다. 과거에는 주로 클라이언트 측 스크립팅 언어로 사용되었으나, Node.js의 등장으로 서버 측 개발, 데스크톱 앱(Electron), 모바일 앱(React Native) 등 다양한 플랫폼에서 활용되는 범용적인 언어로 발전했습니다.

  * **자바스크립트의 특징**
    - **인터프리터 언어**: 컴파일 과정 없이 코드가 직접 실행됩니다.
    - **객체 기반 언어**: 모든 것이 객체로 간주되며, 프로토타입 기반의 상속을 사용합니다.
    - **동적 타입 언어**: 변수의 타입이 런타임에 결정되며, 명시적인 타입 선언이 필요 없습니다.
    - **이벤트 기반 언어**: 사용자 상호작용(클릭, 키 입력 등)이나 비동기 작업(데이터 로딩 등)에 반응하여 동작합니다.

  * **자바스크립트의 주요 역할**
    - **프론트엔드 개발**: 웹 페이지의 동적인 콘텐츠 생성, 사용자 인터페이스 상호작용, 애니메이션 구현 등.
    - **백엔드 개발**: Node.js를 사용하여 서버 구축, API 개발, 데이터베이스 연동 등.
    - **모바일 앱 개발**: React Native, NativeScript 등 프레임워크를 통해 크로스 플랫폼 모바일 앱 개발.
    - **데스크톱 앱 개발**: Electron을 사용하여 웹 기술로 데스크톱 애플리케이션 개발.

----
===== 2. 기본 문법 및 핵심 개념 =====

자바스크립트의 견고한 이해를 위해서는 기본적인 문법과 핵심 개념을 숙지하는 것이 중요합니다. 이 섹션에서는 변수 선언부터 함수, 객체, 배열에 이르는 기본적인 구성 요소들을 살펴봅니다.

----
==== 1) 변수 선언 ====

자바스크립트에서 변수를 선언하는 방법은 ''var'', ''let'', ''const'' 세 가지 키워드를 사용합니다. 각 키워드는 변수의 스코프(scope)와 재할당/재선언 가능성에 차이를 보입니다.

^ 키워드 ^ 스코프 ^ 재할당 ^ 재선언 ^ 초기화 ^
| ''var'' | 함수 스코프 | 가능 | 가능 | 선택 사항 |
| ''let'' | 블록 스코프 | 가능 | 불가능 | 선택 사항 |
| ''const'' | 블록 스코프 | 불가능 | 불가능 | 필수 |

  * **''var''**: ES6 이전에 사용되던 변수 선언 키워드입니다. 함수 스코프를 가지며, 재선언 및 재할당이 모두 가능하여 예상치 못한 문제를 야기할 수 있습니다.
  * **''let''**: ES6에서 도입된 키워드로, 블록 스코프를 가집니다. 재할당은 가능하지만, 같은 스코프 내에서 재선언은 불가능합니다.
  * **''const''**: ''let''과 마찬가지로 ES6에서 도입되었으며, 블록 스코프를 가집니다. 한 번 선언되면 재할당이 불가능하며, 선언 시 반드시 초기화해야 합니다. 상수로 사용되거나, 변하지 않는 값을 선언할 때 유용합니다.

----
==== 2) 데이터 타입 ====

자바스크립트의 데이터 타입은 크게 원시 타입(Primitive Type)과 객체 타입(Object Type)으로 나뉩니다.

  * **원시 타입**
    - ''string'' (문자열): 텍스트 데이터를 나타냅니다. 예: ''Hello, DokuWiki!''
    - ''number'' (숫자): 정수 및 부동 소수점 숫자를 나타냅니다. 예: ''123'', ''3.14''
    - ''boolean'' (불리언): 참(''true'') 또는 거짓(''false'')을 나타냅니다.
    - ''null'': 값이 없음을 명시적으로 나타내는 특별한 값입니다.
    - ''undefined'': 값이 할당되지 않은 변수의 초기값입니다.
    - ''symbol'': ES6에서 추가된 고유하고 변경 불가능한 값입니다.
    - ''bigint'': ES2020에서 추가된 임의 정밀도의 정수를 나타냅니다.

  * **객체 타입**
    - ''Object'' (객체): 키-값 쌍의 컬렉션입니다.
    - ''Array'' (배열): 순서가 있는 값들의 컬렉션입니다.
    - ''Function'' (함수): 호출 가능한 코드 블록입니다.

----
==== 3) 연산자 ====

자바스크립트는 다양한 종류의 연산자를 제공하여 값들을 조작합니다.

  * **산술 연산자**: <nowiki>+, -, *, /, %%, **</nowiki> (거듭제곱)
  * **할당 연산자**: %%=%%(할당), +=, -=, *= 등
  * **비교 연산자**: %%==%%(동등), %%===%%(일치), %%!=%%(부등), %%!==%%(불일치), %%>%%(보다 큼), %%<%%(보다 작음), %%>=%%(크거나 같음), %%<=%%(작거나 같음)
  * **논리 연산자**: &&(AND), ||(OR), %%!%%(NOT)
  * **삼항 연산자**: 조건 ? 값1 : 값2 (조건이 참이면 값1, 거짓이면 값2)

----
==== 4) 조건문과 반복문 ====

프로그램의 흐름을 제어하기 위해 조건문과 반복문을 사용합니다.

  * **조건문**
    - ''if / else if / else'': 특정 조건에 따라 다른 코드 블록을 실행합니다.
    - ''switch'': 여러 경우의 수 중 하나를 선택하여 실행합니다.

  * **반복문**
    - ''for'': 정해진 횟수만큼 반복합니다.
    - ''while'': 조건이 참인 동안 반복합니다.
    - ''do / while'': 일단 한 번 실행한 후, 조건이 참인 동안 반복합니다.
    - ''for...in'': 객체의 속성(키)들을 반복합니다.
    - ''for...of'': 반복 가능한 객체(배열, 문자열 등)의 요소들을 반복합니다.

----
==== 5) 함수 ====

함수는 특정 작업을 수행하는 코드 블록입니다. 재사용 가능한 코드를 작성하고 프로그램의 모듈성을 높이는 데 사용됩니다.

  * **함수 선언 방식**
   * **함수 선언식**:
<file>
function greet(name) {
  return "안녕하세요, " + name + "님!";
}
</file>
   * **함수 표현식**:
<file>
const greet = function(name) {
  return "안녕하세요, " + name + "님!";
};
</file>
   * **화살표 함수 (ES6)**: 간결한 문법을 제공하며, ''this'' 바인딩 방식이 다릅니다.
<file>
const greet = (name) => {
  return "안녕하세요, " + name + "님!";
};

// 매개변수가 하나이고, return 문만 있을 경우
const greetShort = name => "안녕하세요, " + name + "님!";
</file>

  * **스코프**: 변수나 함수에 접근할 수 있는 범위를 의미합니다.
    - **전역 스코프**: 코드 어디에서든 접근 가능한 범위.
    - **지역 스코프(함수 스코프/블록 스코프)**: 함수나 블록 내부에서만 접근 가능한 범위.
  * **클로저**: 함수가 선언될 당시의 렉시컬 환경(변수, 스코프 등)을 기억하여, 함수가 스코프 밖에서 호출되어도 해당 환경에 접근할 수 있는 현상입니다.

----
==== 6) 객체와 배열 ====

자바스크립트에서 객체와 배열은 데이터를 구조화하고 관리하는 데 필수적인 자료구조입니다.

  * **객체 (Object)**
    - 키(key)와 값(value)의 쌍으로 이루어진 데이터 컬렉션입니다. 중괄호 (''{}'')를 사용하여 생성합니다.
    - 속성 접근은 점 표기법(''object.property'') 또는 대괄호 표기법(''object[''property'']'')을 사용합니다.
<file>
const person = {
  name: "김철수",
  age: 30,
  isStudent: false,
  greet: function() {
    console.log("안녕하세요, 제 이름은 " + this.name + "입니다.");
  }
};

console.log(person.name); // 김철수
person.greet(); // 안녕하세요, 제 이름은 김철수입니다.
</file>

  * **배열 (Array)**
    - 순서가 있는 값들의 컬렉션입니다. 대괄호 (''[]'')를 사용하여 생성합니다.
    - 인덱스를 통해 요소에 접근하며, 0부터 시작합니다.
    - 다양한 내장 메서드를 제공하여 배열 조작을 용이하게 합니다.
<file>
const fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]); // 사과

fruits.push("포도"); // 배열 끝에 요소 추가
console.log(fruits); // ["사과", "바나나", "오렌지", "포도"]

fruits.pop(); // 배열 끝 요소 제거
console.log(fruits); // ["사과", "바나나", "오렌지"]
</file>

----
===== 3. 자바스크립트 활용 예제 =====

이 섹션에서는 실제 웹 개발에서 자주 사용되는 자바스크립트 활용 예제들을 통해 앞서 배운 개념들을 적용해 봅니다.

----
==== 1) DOM 조작 예제 ====

DOM(//Document Object Model//)은 웹 페이지의 구조를 객체 모델로 표현한 것으로, 자바스크립트를 사용하여 HTML 요소의 내용을 변경하거나 스타일을 적용하고, 이벤트를 처리할 수 있습니다.

  * **HTML 구조**:
<file>
<h1 id="myHeading">안녕하세요!</h1>
<button id="myButton">클릭하세요</button>
</file>

  * **자바스크립트 코드**:
<file>
// ID가 "myHeading"인 요소를 가져옵니다.
const heading = document.getElementById('myHeading');

// ID가 "myButton"인 요소를 가져옵니다.
const button = document.getElementById('myButton');

// heading 요소의 텍스트 내용을 변경합니다.
heading.textContent = "자바스크립트로 변경된 텍스트입니다!";

// 버튼에 클릭 이벤트 리스너를 추가합니다.
button.addEventListener('click', function() {
  alert('버튼이 클릭되었습니다!');
  heading.style.color = 'blue'; // 텍스트 색상을 파란색으로 변경
});
</file>

----
==== 2) 비동기 처리 예제 ====

자바스크립트는 싱글 스레드 언어이므로, 네트워크 요청과 같이 시간이 오래 걸리는 작업은 비동기적으로 처리해야 합니다. ''Promise''와 ''async/await''는 비동기 작업을 효율적으로 관리하는 데 사용됩니다.

  * **''Promise''를 사용한 비동기 처리**:
<file>
function fetchData() {
  return new Promise((resolve, reject) => {
    // 2초 후 데이터를 성공적으로 가져왔다고 가정
    setTimeout(() => {
      const data = { message: "데이터 로딩 완료!" };
      resolve(data); // 성공 시 resolve 호출
      // reject(new Error("데이터 로딩 실패!")); // 실패 시 reject 호출
    }, 2000);
  });
}

fetchData()
  .then(response => {
    console.log(response.message);
  })
  .catch(error => {
    console.error("오류 발생:", error.message);
  });

console.log("데이터를 기다리는 중..."); // 비동기 작업이 백그라운드에서 진행
</file>

  * **''async/await''를 사용한 비동기 처리**:
<file>
async function loadData() {
  try {
    console.log("데이터 로드를 시작합니다...");
    const data = await fetchData(); // fetchData()가 resolve될 때까지 기다림
    console.log(data.message);
    console.log("데이터 로드 완료!");
  } catch (error) {
    console.error("데이터 로드 중 오류 발생:", error.message);
  }
}

loadData();
</file>

----
==== 3) 배열 메서드 활용 예제 ====

배열 메서드는 배열을 효율적으로 조작하고 변환하는 데 매우 유용합니다. ''map'', ''filter'', ''reduce''는 특히 자주 사용됩니다.

  * **''map()''**: 배열의 모든 요소에 대해 함수를 호출하고, 그 결과로 새 배열을 반환합니다.
<file>
const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8]
</file>

  * **''filter()''**: 주어진 판별 함수를 통과하는 모든 요소로 새 배열을 만듭니다.
<file>
const ages = [12, 19, 25, 8];
const adults = ages.filter(age => age >= 18);
console.log(adults); // [19, 25]
</file>

  * **''reduce()''**: 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과 값을 반환합니다.
<file>
const prices = [1000, 2500, 500];
const total = prices.reduce((sum, currentPrice) => sum + currentPrice, 0);
console.log(total); // 4000
</file>

----
==== 4) JSON 데이터 처리 예제 ====

JSON(//JavaScript Object Notation//)은 데이터를 교환하기 위한 경량의 데이터 포맷입니다. 자바스크립트 객체와 유사한 구조를 가지며, 웹에서 데이터를 주고받을 때 널리 사용됩니다.

  * **''JSON.parse()''**: JSON 문자열을 자바스크립트 객체로 변환합니다.
<file>
const jsonString = '{"name": "홍길동", "age": 25, "city": "서울"}';
const userObject = JSON.parse(jsonString);

console.log(userObject.name); // 홍길동
console.log(userObject.age);  // 25
</file>

  * **''JSON.stringify()''**: 자바스크립트 객체를 JSON 문자열로 변환합니다.
<file>
const product = {
  id: 101,
  name: "노트북",
  price: 1200000,
  available: true
};

const jsonProduct = JSON.stringify(product);
console.log(jsonProduct); // {"id":101,"name":"노트북","price":1200000,"available":true}

// JSON 문자열을 예쁘게 포맷팅 (들여쓰기 2칸)
const prettyJsonProduct = JSON.stringify(product, null, 2);
console.log(prettyJsonProduct);
/*
{
  "id": 101,
  "name": "노트북",
  "price": 1200000,
  "available": true
}
*/
</file>

===== 4. 결론 =====

이 문서는 자바스크립트의 기본 개념부터 핵심 문법, 그리고 실제 활용 예제에 이르기까지 전반적인 내용을 다루었습니다. 자바스크립트는 단순히 웹 브라우저에서 동적인 요소를 구현하는 것을 넘어, Node.js를 통한 서버 개발, 모바일 앱, 데스크톱 앱 등 다양한 분야에서 사용되는 강력하고 유연한 언어입니다.

이 가이드라인이 자바스크립트 학습의 든든한 기반이 되기를 바랍니다. 지속적인 학습과 실습을 통해 언어에 대한 이해를 심화하고, 다양한 프로젝트에 적용하여 실력을 향상시키시길 권장합니다. 끊임없이 발전하는 웹 생태계에서 자바스크립트는 여전히 가장 중요한 기술 중 하나로 자리매김하고 있으며, 그 중요성은 앞으로도 계속될 것입니다.