Design Kits Blog

기본 개념

자바스크립트(JavaScript)는 웹 개발을 위한 높은 수준의 프로그래밍 입니다. 주로 웹사이트 페이지에 동적인 모습을 추가하기 위해 사용됩니다.

JavaScript는 클라이언트 측 스크립트 언어로 시작했지만, 이제는 서버 측에서도 Node.js 같은 환경에서 널리 사용됩니다. 다음은 JavaScript의 주요 특징들입니다:

인터프리터 언어

JavaScript 코드는 브라우저에서 직접 해석되고 실행됩니다.

특징

코드를 작성하고 저장한 후 별도의 컴파일 과정 없이 바로 실행할 수 있습니다. 즉, 소스 코드 자체가 실행 파일입니다.

변수의 타입이 실행 시점에 결정됩니다. 이는 코드를 작성할 때 타입을 명시적으로 선언할 필요가 없음을 의미합니다.

소스 코드가 특정 기계어로 컴파일되지 않기 때문에, 인터프리터만 있으면 어떤 플랫폼에서도 동일한 코드를 실행할 수 있습니다.

코드를 실행하는 도중에 중단하고, 값을 확인하거나 코드를 수정하고 다시 실행하는 것이 상대적으로 쉽습니다.

동적 타이핑

변수의 타입이 런타임에 결정됩니다.

장점

유연성: 다양한 타입의 값을 하나의 변수에 저장할 수 있어 코드 작성이 유연합니다.

빠른 프로토타이핑: 타입을 미리 지정할 필요가 없기 때문에 코드를 빠르게 작성하고 테스트할 수 있습니다.

코드 간결성: 타입 선언이 필요 없으므로 코드가 더 간결해집니다.

단점

런타임 오류 가능성: 타입이 런타임에 결정되기 때문에, 예상치 못한 타입 관련 오류가 발생할 수 있습니다.

디버깅 어려움: 타입 오류를 컴파일 시점에 잡아낼 수 없으므로, 디버깅이 어려울 수 있습니다.

가독성 저하: 변수의 타입을 코드만으로 쉽게 알 수 없기 때문에, 코드 가독성이 떨어질 수 있습니다.

객체 기반

객체지향 프로그래밍의 원칙을 따르며, 객체와 프로토타입을 사용합니다.

JavaScript는 객체 기반 언어입니다. 객체 기반(object-based)이라는 말은 JavaScript가 객체를 중심으로 설계되고 사용된다는 것을 의미함.

JavaScript에서 거의 모든 것은 객체입니다. 

객체는 키-값 쌍으로 이루어진 데이터 구조로, 프로퍼티와 메서드를 포함할 수 있다.

이벤트 중심

이벤트를 기반으로 동작하여 사용자 상호작용에 반응합니다.

JavaScript의 이벤트 중심 프로그래밍은 사용자 상호작용과 비동기 작업을 효과적으로 처리하는 방법을 제공합니다. 

이벤트 리스너를 등록하고, 이벤트 객체를 활용하며, 이벤트 전파를 이해하는 것은 현대 웹 개발에서 중요한 개념입니다. 

이를 통해 동적인 사용자 경험과 반응형 웹 애플리케이션을 구현할 수 있습니다.

호출백 함수

비동기 프로그래밍을 쉽게 하기 위해 콜백 함수를 많이 사용합니다.

JavaScript에서 호출백 함수(callback function)는 특정 이벤트가 발생했을 때 실행되도록 설정된 함수입니다. 

호출백 함수는 주로 비동기 작업을 처리할 때 많이 사용됩니다. 

이는 JavaScript의 비동기적 특성과 밀접한 관련이 있습니다.

표준화

ECMA 국제 표준에 의해 관리되며, ECMAScript(ES) 사양을 따릅니다.

주요 ECMAScript 버전

1. ECMAScript 3 (ES3, 1999):

초기 표준화 작업 중 중요한 버전으로, 널리 사용되는 기능을 정의했습니다.

2. ECMAScript 5 (ES5, 2009):

중요한 개선과 추가 기능이 도입되었습니다. 예를 들어, strict mode, JSON 지원, 배열 메서드(forEach, map, filter 등)가 포함되었습니다.

3. ECMAScript 6 (ES6, ECMAScript 2015):

대규모 업데이트로, let과 const 키워드, 클래스, 모듈, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, 프라미스, Map과 Set 컬렉션 등 많은 새로운 기능이 도입되었습니다.

4. ECMAScript 7 (ES7, ECMAScript 2016):

지수 연산자(**), 배열 프로토타입 메서드 includes 등이 추가되었습니다.

5. ECMAScript 8 (ES8, ECMAScript 2017):

async/await, Object.entries(), Object.values(), 문자열 패딩(padStart, padEnd) 등이 포함되었습니다.

6. ECMAScript 9 (ES9, ECMAScript 2018):

async 이터레이터, 객체 스프레드 연산자, Promise.prototype.finally 등이 추가되었습니다.

7. ECMAScript 10 (ES10, ECMAScript 2019):

Array.prototype.flat(), Array.prototype.flatMap(), Object.fromEntries(), 문자열의 trimStart()와 trimEnd() 등이 포함되었습니다.

8. ECMAScript 11 (ES11, ECMAScript 2020):

BigInt, 동적 import(), nullish coalescing operator (??), optional chaining operator (?.) 등이 포함되었습니다.

9. ECMAScript 12 (ES12, ECMAScript 2021):

String.prototype.replaceAll, 논리 연산자의 할당 연산자(&&=, ||=, ??=), WeakRefs 등이 포함되었습니다.

기본 예제

다음은 간단한 JavaScript 코드 예제입니다:

```javascript

// 변수 선언 및 할당

let message = "Hello, World!";

console.log(message);

// 함수 선언

function greet(name) {

    return `Hello, ${name}!`;

}

// 함수 호출

let greeting = greet("Alice");

console.log(greeting);

// 객체 사용

let person = {

    name: "Bob",

    age: 25

};

JavaScript의 주요 사용 사례

1. 웹 페이지 동적 콘텐츠 생성: DOM(Document Object Model)을 조작하여 웹 페이지의 내용을 동적으로 변경할 수 있습니다.

2. 폼 데이터 검증: 사용자 입력을 클라이언트 측에서 검증하여 서버의 부하를 줄입니다.

3. 비동기 통신: AJAX(Asynchronous JavaScript and XML)를 사용하여 페이지를 새로 고침하지 않고 서버와 데이터를 주고받을 수 있습니다.

4. 웹 애플리케이션 개발: React, Angular, Vue.js와 같은 프레임워크를 사용하여 복잡한 웹 애플리케이션을 개발할 수 있습니다.

5. 서버 측 개발: Node.js를 통해 서버 측 애플리케이션을 구축할 수 있습니다.

JavaScript는 웹의 필수 구성 요소 중 하나로, HTML, CSS와 함께 사용되어 인터랙티브하고 반응성 있는 웹 사이트를 만드는 데 중요한 역할을 합니다.