현대 JavaScript 와 ES6 - ES13 (JS-튜토리얼)

이 JavaScript ES6 코스에서 당신을 기다리는 것.

브라우저에는 오랫동안 JavaScript가 있습니다. 거의 모든 웹 사이트에는 JS 코드가 조금씩 들어 있습니다. 초창기 버전은 매우 부조화스러웠지만, ES5 표준을 사용하면 어느 정도 잘 작업할 수 있었지만 함정과 불확실성을 능숙히 피해야 했습니다. 그렇다면 새로운 기술을 배우는 것이 왜 좋을까요? 왜 기존의 것을 사용하지 않을까요? 이 강의에서는 새로운 ES6 표준의 장점과 이를 무시할 수 없는 이유를 보여 드리겠습니다.

이 강의는 개발 환경을 설정하는 방법을 소개합니다. 이 과정에서는 MS의 IDE Visual Studio Code와 개발 서버로 ViteJS를 사용합니다.

ES5까지 var 키워드가 변수를 선언하는 유일한 방법이었으며, 그 특징들로 인해 종종 의도치 않은 행동이나 심지어 오류를 유발했습니다. ES6은 이제 let과 const라는 두 개의 새로운 키워드를 도입하여 var의 몇 가지 불편함을 해소합니다.

for 루프는 모든 웹 개발자가 알고 있습니다. 이것은 배열을 반복하는 데 자주 사용됩니다. ES6에서 이 작업을 훨씬 더 짧고 간결하게 수행할 수있는 for 루프의 변형이 있습니다.

함수는 JS에서 중요하며 지금까지는 function 키워드를 사용하여 선언 및 정의되었습니다. ES6는 매우 우아하고 간결한 쓰기 방식을 도입하며 코드를 더 읽기 쉽게 만들뿐만 아니라 this와 관련된 귀찮은 문제에 대한 해결책을 제시합니다.

ES5에서는 선택적 매개변수를 다소 번거롭게 구현하고 호출자에게 드러나지 않습니다. ES6에서는 선택적 매개변수를 기본값과 함께 함수 서명에 직접 작성할 수 있습니다.

디스트럭처링은 객체와 배열에서 요소를 gezielt 추출하는 것을 허용합니다. 자세히 살펴보면 JS 코드를 더 우아하고 간결하게 만드는 다양한 응용 가능성이 드러납니다.

ES6까지 arguments- 변수를 다루는 것은 함수 매개변수의 가변 개수를 허용하기 위해 필요했습니다. ES6에서는 이를 더 쉽게 할 수 있는 Rest 매개변수로 가능합니다.

함수 정의뿐만 아니라 나머지 매개변수에서 …-연산자를 사용할 수 있을 뿐만 아니라 배열 비구조화 시에도 "나머지" 요소를 캐치하여 배열로 제공할 수 있습니다.

배열뿐만 아니라 객체에서도, 나머지 속성을 캐치하고 객체로 제공할 수 있는 나머지 연산자를 사용할 수 있습니다.

나머지 연산자의 반대는 전개 연산자입니다. 이 연산자는 똑같이 보이지만 (…), 할당 문의 반대편에 위치하며 배열을 각각의 구성 요소로 펼칩니다.

스프레드 연산자를 사용하는 "트릭"은 객체에도 매우 잘 작동합니다. 이를 사용하면 객체를 다른 객체에 "혼합"할 수 있습니다. 그러나 이를 대체할 매우 좋은 대안인 Object.assign()도 있습니다.

객체 리터럴 내의 함수는 function- 키워드와 함께 작성하기가 매우 번거롭습니다. 그러나 ES6에서는 더 간결하고 직관적으로 작성할 수 있습니다.

문자열을 다루는 것은 모든 프로그래머의 기본 도구 중 하나입니다. ES6은 많은 입력 작업을 절약할 수 있는 새로운 유용한 문자열 함수를 제공합니다.

그렇게 말할 수밖에 없다: ES6까지는 통합 변수 값을 포함한 여러 줄의 문자열 리터럴은 고통스럽고 읽기 어려웠다. 그러나 ES6의 새로운 템플릿 리터럴은 구문상으로 즐거운 것이다.

ES5와 함께 이미 매우 유용한 배열 함수들이 있습니다. ES6는 더 추가되어 배열을 다루는 데 더욱 편리한 기능을 제공합니다. 여기에는 ES5에서 이미 사용되었던 몇 가지 "이전" 함수도 포함되어 있습니다.

오브젝트는 항상 Key-Value 저장소 또는 사전으로 악용 되었지만 몇 가지 단점이 있습니다. 새로운 Map 데이터 구조는 이러한 단점을 해결하고 다른 프로그래밍 언어에서 알고 있는 견고한 사전 기능을 제공합니다.

비동기적인 작업은 콜백 함수로 처리될 수 있지만, 중첩 수준이 너무 깊어져 코드가 더 이상 알아보기 어려워지는 위험이 존재합니다 (해당 문제를 "콜백 지옥"이라고 합니다). 프로미스는 이 문제를 해결하여 중첩을 회피하고 비동기 작업을 하나의 수준에서 연결할 수 있게 합니다.

Promise를 통해 콜백 지옥을 피할 수 있다는 것을 감안하면, async/await 구조는 구문적 설탕을 추가합니다. 이는 Promise를 기반으로 하며, 비동기 작업을 동기적으로 프로그래밍하는 것과 거의 동일합니다. async/await로 프로그래밍한 사람은 더 이상 Promise의 then 메소드를 직접 사용하지 않고 (특히 콜백 사용을 더욱 피합니다).

Node.js에서는 처음부터 모듈이 사용되었지만, 처음에는 CommonJS 모듈 형식인 require에 중점을 둔 것이었습니다. ES6부터는 표준 모듈 정의와 import/export라는 새로운 키워드가 도입되었습니다. 이 형식은 현재 대부분의 (새로운) JS 라이브러리에서 지원되며, Node.js도 최신 버전에서 그것을 처리할 수 있습니다.

ES6은 import; 키워드를 사용한 모듈의 정적 가져오기 외에도 import- 함수를 사용한 동적 가져오기를 지원합니다. 이 모든 것이 비동기적으로 작동하므로 해결되는 Promise가 반환되며, 이를 await를 사용하여 기다릴 수 있습니다. 따라서 런타임 중에 모듈을 언제든지 로드할 수 있습니다.

전통적인 클래스와 상속 개념에 기반한 객체지향 프로그래밍은 ES6 이전에는 생성자 함수의 프로토타입을 통해만 가능했습니다. 이는 번거로웠고 간결하지 않았으며, 따라서 오류가 발생하기 쉬웠습니다. 새로운 class 키워드를 통해 ES6에서는 다른 프로그래밍 언어인 Java, C# 및 C++에서 알고 있는 것과 같이 간결한 형식으로 정의할 수 있습니다. 내부적으로는 여전히 기본적으로 프로토타입 기반 시스템이지만 더 아름다운 구문으로 제공됩니다.

상속은 여전히 프로토타입에 기반을 두지만 ES6에서는 extends 키워드를 사용하여 훨씬 쉽고 명확하게 작성됩니다. 사용할 때는 기본 클래스의 생성자를 올바른 시기에 super로 호출해야 합니다. 이 과정도 물론 이 강의에서 설명됩니다.

회원 또는 필드의 선언도 최신 표준을 통해 가능해졌습니다. 이를 통해 정적 필드도 선언하고 초기화할 수 있습니다.

이제 private 필드도 선언할 수 있으며 외부에서 접근할 수 없습니다. 약간은 익숙해지는데 다른 프로그래밍 언어들과는 뚜렷하게 다른 선언이니까요.

새로운 키워드 class와 관련된 기능인 상속 및 데이터 캡슐화(비공개 필드)가 모든 객체 지향 프로그래머들이 만족해야 한다고 생각되는데요. 이 레슨에서는 클래스, 프로토타입 및 this 없이 객체를 생성하는 대신 "상속" 또는 오히려 "컴포지션"을 더 유연하게 지원하는 대체 방법을 소개하고자 합니다.

ES6 버전 이상의 주요 기능은 이제 다루어졌어야합니다. 그러나 계속해서 새로운 기능이 추가됩니다. 일부 사용 빈도가 낮은 기능은 아직 언급되지 않았습니다. 이 강의에서는 앞으로 무엇을 기대해야 하는지와 특정 상황에서 여전히 흥미로울 수 있는 기능을 설명합니다.