webdevelopment 4

[ES6][중급반] Step 6. 클래스와 모듈: 객체 지향과 코드 분리

1. Class (클래스): 객체 지향의 정석ES6 이전에는 함수와 프로토타입을 이용해 복잡하게 구현했던 상속 구조를 이제는 다른 언어들처럼 직관적인 class 키워드로 작성할 수 있습니다.constructor: 인스턴스가 생성될 때 실행되는 생성자 함수입니다.Method: 클래스 내부에서 함수를 정의하며, 자동으로 프로토타입에 등록됩니다.Static: 인스턴스가 아닌 클래스 자체에서 호출하는 정적 메서드나 속성을 정의합니다.JavaScript class Animal { constructor(name) { this.name = name; } // 메서드 정의 speak() { console.log(`${this.name}가 소리를 냅니다.`); } // 정적 메서드 (도구 모음 등에..

개발/Javascript 2025.12.24

[ES6][중급반] Step 5. 비동기 프로그래밍 2: Async/Await와 실전 데이터 통신

1. 🍭 Async/Await: 비동기 코드의 문법적 설탕 (Syntactic Sugar)Async/Await는 새로운 기능이 아니라 Promise를 기반으로 동작하는 특별한 문법입니다. 비동기 로직의 결과를 기다리기 위해 더 이상 .then() 체이닝을 길게 늘어뜨릴 필요가 없습니다.async 키워드: 함수 앞에 붙이며, 이 함수는 항상 Promise를 반환하게 됩니다.await 키워드: async 함수 내부에서만 사용 가능하며, Promise가 처리(settled)될 때까지 함수의 실행을 잠시 중단하고 결과값을 반환합니다.🛠️ 기본 구조 비교JavaScript // Promise 방식function fetchUser() { return fetch('https://api.example.com/us..

개발/Javascript 2025.12.24

[ES6][중급반] Step 2. 객체와 배열의 마법: 구조 분해 할당과 데이터 핸들링

1. 객체 구조 분해 할당 (Object Destructuring)객체의 프로퍼티를 꺼내어 변수로 만드는 과정에서 중복된 코드를 줄여줍니다.기본 사용법: 키 이름과 동일한 변수명을 사용합니다.이름 변경: : (새 이름)을 사용하여 변수명을 바꿀 수 있습니다.기본값 설정: 데이터가 없을 경우를 대비해 초기값을 줄 수 있습니다.JavaScript const user = { id: 1, nickname: "JSMaster", email: "test@test.com" };// nickname을 name이라는 변수로 받고, age가 없으면 20을 기본값으로 사용const { nickname: name, email, age = 20 } = user;console.log(name); // "JSMaster"cons..

개발/Javascript 2025.12.23

[ES6][중급반] Step 1. 함수의 고도화와 스코프: 자바스크립트의 엔진 속으로

1. Arrow Function (화살표 함수): 단순한 단축 문법이 아니다화살표 함수는 코드를 짧게 만들어주지만, 가장 중요한 차이점은 this 바인딩에 있습니다.일반 함수: 호출 방식에 따라 this가 동적으로 결정됩니다.화살표 함수: 함수가 선언된 위치의 상위 스코프 this를 그대로 물려받습니다 (Lexical this).JavaScript const user = { name: "Gemini", // 일반 함수: 호출한 user 객체를 가리킴 sayHi: function() { console.log(this.name); }, // 화살표 함수: 상위 스코프(전역)의 this를 가리킴 sayHiArrow: () => { console.log(this.name); } };user.sayHi..

개발/Javascript 2025.12.23
반응형