모던 자바스크립트

📘 모던 자바스크립트란 무엇인가요?

---

1️⃣ 자바스크립트는 어떤 언어인가요?

자바스크립트는 웹 개발에 꼭 필요한 언어입니다. 우리가 매일 사용하는 웹사이트에서 클릭, 스크롤, 팝업 창 같은 다양한 동작을 만들 수 있게 해주는 역할을 합니다.

예를 들어:

• 버튼을 클릭하면 화면이 바뀌는 것
• 검색창에 단어를 입력할 때 추천 단어가 나오는 것

모두 자바스크립트 덕분입니다.

---

2️⃣ 왜 '모던 자바스크립트'가 등장했나요?

초기 자바스크립트는 간단한 기능만 수행할 수 있었습니다. 하지만 웹이 점점 발전하면서 더 복잡한 작업이 필요해졌습니다.

이에 따라 자바스크립트도 점점 진화하게 되었고, 그 결과 모던 자바스크립트라는 새로운 개념이 생겼습니다.

모던 자바스크립트란?

자바스크립트를 더 쉽고, 빠르고, 효율적으로 만들기 위해 2015년부터 추가된 새로운 문법과 기능을 말합니다.

---

3️⃣ 모던 자바스크립트의 주요 변화

이해가 바로 되지 않더라도, 부담 없이 쭉 읽어보세요. 나중에 다시 보면 더 쉽게 이해될 거예요!

1. 더 똑똑한 변수 선언 방법

기존에는 var라는 키워드로 변수를 선언했지만, 문제가 많았습니다.

이제는 let과 const를 사용해 더 안전하고 직관적으로 변수를 선언할 수 있습니다.

// let: 재할당 가능
let count = 10;
count = 20; // 가능

// const: 재할당 불가
const max = 100;
max = 200; // 오류 발생

---

2. 코드가 더 간결해진 함수

기존 함수는 길고 복잡했습니다. 모던 자바스크립트에서는 화살표 함수를 통해 훨씬 짧고 간결하게 표현할 수 있습니다.

// 기존 함수
function sayHello(name) {
  return `안녕하세요, ${name}님`;
}

// 화살표 함수
const sayHello = (name) => `안녕하세요, ${name}님`;

console.log(sayHello("철수")); // "안녕하세요, 철수님"

---

3. 템플릿 리터럴로 문자열 쉽게 다루기

기존에는 문자열에 변수를 추가하거나 여러 줄로 작성하기가 어려웠습니다.

모던 자바스크립트에서는 템플릿 리터럴로 훨씬 편리해졌습니다.

const name = "영희";
console.log(`안녕하세요, ${name}님!`); // "안녕하세요, 영희님!"

const message = `이 문장은
여러 줄로 작성됩니다.`;
console.log(message);
/*이 문장은
여러 줄로 작성됩니다.*/

---

4. 더 나은 비동기 처리

웹에서 데이터를 가져오거나 작업을 기다리는 동안(예: 파일 업로드) 페이지가 멈추지 않도록 비동기 처리를 쉽게 할 수 있게 개선되었습니다.

기존 방식: 콜백 지옥

setTimeout(() => {
  console.log("1초 뒤 실행");
  setTimeout(() => {
    console.log("2초 뒤 실행");
  }, 1000);
}, 1000);

특징

1. 중첩 구조:

- setTimeout이 중첩되면서 코드가 점점 오른쪽으로 밀려납니다.

- 콜백 함수가 많아질수록 코드가 읽기 어려워지고, 유지보수가 복잡해지는 콜백 지옥 현상이 발생합니다.

 

2. 순차적 실행 표현 어려움:

작업 순서를 파악하기 어렵고, 비슷한 작업이 많아질수록 코드가 난잡해집니다.

 

3. 에러 처리 어려움:

비동기 작업 중 에러를 처리하려면 try-catch 대신 복잡한 callback 체인을 관리해야 합니다.

모던 방식: async/await

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const run = async () => {
  await wait(1000);
  console.log("1초 뒤 실행");
  await wait(1000);
  console.log("2초 뒤 실행");
};
run();

특징

1. 동기식 코드처럼 작성:

- await 키워드 덕분에 비동기 작업을 순차적으로 실행하는 코드처럼 보입니다.

- 코드를 위에서 아래로 읽기만 해도 실행 순서를 쉽게 파악할 수 있습니다.

 

2. 가독성 향상:

- 중첩된 콜백 대신 직선적인 코드 구조로 작성되기 때문에 유지보수가 훨씬 쉽습니다.

 

3. 에러 처리 간단:

- try-catch 블록으로 에러를 관리할 수 있어 가독성과 코드 안정성이 높아집니다.

---

4️⃣ 모던 자바스크립트가 중요한 이유

1. 더 나은 가독성: 코드가 짧고 간결해져서 읽기 쉽습니다.

2. 효율적인 개발: 반복 작업을 줄이고, 복잡한 작업을 간단히 해결할 수 있습니다.

3. 미래 지향적: React, Vue와 같은 최신 프레임워크와 잘 호환됩니다.

4. 대규모 프로젝트 지원: 모듈화, 클래스 같은 기능으로 큰 프로젝트를 효율적으로 관리할 수 있습니다.

---

5️⃣ 모던 자바스크립트의 요약

모던 자바스크립트는 웹 개발을 더 쉽고 빠르게 만들어주는 도구입니다.

초보자도 사용할 수 있을 만큼 간단하지만, 프로 개발자가 사용하기에도 강력한 기능을 제공합니다.

이제 웹 개발을 시작한다면, 모던 자바스크립트를 배우는 것이 필수입니다!