[Javascript] New Javascript 11장 프라이빗 필드/메서드

📖 1. 프라이빗 필드(privateField)자바스크립트는 ES20222(ES13) 버전 부터 프라이빗 필드/메서드를 공식적으로 지원합니다. 방법은 간단하게 # 기호를 붙여 사용할 수 있습니다.class Person { #name; // private 필드 선언 constructor(name) { this.#name = name; // 생성자에서 초기화 } getName() { return this.#name; // 내부에서는 접근 가능 } setName(newName) { this.#name = newName; // 외부 값 접근 허용 }}const p = new Person("mary");console.log(p.getName()); // ✅ "mary";console..

• format_list_bulleted Front-End/JavaScript
• · 2025. 9. 10.
• textsms

[Javascript] New Javascript 10장 모듈 시스템

✅ 1. 자바스크립트 모듈 시스템자바스크립트에서 모듈(module)은 코드의 재사용과 관리 편의성을 위해 나눠서 작성하는 파일입니다. 대표적으로 ESM(ES Module)과 CommonJS(CJS)가 있습니다. 대부분은 ESM 방식을 채택하고 있습니다. 먼저 기존 모듈을 불러오는 방식에 대해서 설명해보겠습니다.// 상수 내보내기export const PI = 3.14;// 함수 내보내기export function add(a, b) { return a + b;}export -> 다른 파일에서 사용할 수 있도록 내보내는 키워드모듈로 내보낸 값은 여러개 사용 가능브라우저에서는 안에서 사용✅ 2. 모듈 가져오기 (import)import 문을 사용해 export한 값을 가져올 수 있습니다. 여러개의 값을 가..

• format_list_bulleted Front-End/JavaScript
• · 2025. 9. 8.
• textsms

[Javascript] New Javascript 9장 클래스 문법

✅ 1. 클래스 기본 문법자바스크립트에서 class는 객체를 생성하기 위한 템플릿으로, ES6(2015)부터 도입된 문법으로 자바나 C#과 조금 비슷한 구조입니다. 클래스 선언 시 class를 사용합니다.class Person { // 생성자 (객체 생성 시 자동 실행) constructor(name, age) { this.name = name; this.age = age; } // 메서드 (Prototype에 저장) sayHell() { console.log(`Hello, my name is ${this.name}, ${this.age} years old`); }}// 객체 생성const p1 = new Person("James", 25);p1.sayHell(); // Hel..

• format_list_bulleted Front-End/JavaScript
• · 2025. 9. 6.
• textsms

[Javascript] New Javascript 8장 async/await

✅ 1. async/await자바스크립트는 단일 스래드 언어로 오래 걸리는 작업을 동기적으로 처리할 시 화면이 멈추는 현상이 발생합니다. 이를 해결하기 위해 비동기 프로그래밍을 사용해야하는 데, 그 작업 중 하나가 바로 async/await입니다.✅ 2.async/await에 관하여async/await는 각 특징을 가지고 있습니다. 먼저 async 함수는 항상 Promise를 반환한다는 특징과 await는 Promise가 끝날 때까지를 기다린 후 결과를 반환하는 역할을 담당하고 있습니다. 동기 코드처럼 직관적으로 작성이 가능합니다.// async/await 함수는 항상 Promise를 반환async function fetchData() { // await는 Promise가 처리될 따까지 대기 con..

• format_list_bulleted Front-End/JavaScript
• · 2025. 8. 30.
• textsms

[Javascript] New Javascript 7장 Null 병합 연산자

📚 1. Null 병합 연산자란?자바스크립트에서 ??는 Null 병합 연산자라고 불리는데, 이 연산자는 값이 null 또는 undefined 일 때만 오른쪽 값을 반환하고, 그렇지 않으면 왼쪽 값을 반환합니다, 즉 값이 없을때만 대체값을 쓰는 목적을 가진 연산자입니다.📚 2. 기본 문법let 결과 = 값1 ?? 값2;값1이 null 또는 undefined -> 값2를 반환그 와(0, 빈문자열 "", false 값을 falsy 값을 포함) -> 값1반환📚 3. 예제 코드🦖 1.기본 동작let name = null;let defaultName = "Guest";let user = name ?? defaultName;console.log(user);👉 name이 null이라 ??연산자 오른쪽 값인 G..

• format_list_bulleted Front-End/JavaScript
• · 2025. 8. 27.
• textsms

[Javascript] New Javascript 6장 - 옵셔널 체이닝

1. 옵셔널 체이닝이란?자바스크립트를 사용하다 보면 객체 속성에 접근할 때 예상치 못한 에러(undefined 나 null)값으로 오류가 발생하는 경우가 흔하게 발생하고 있습니다. 예를 들어 API 응답에서 특정 필드가 누락되거나, 깊은 객체 구조에 중간 값이 비어있으면 흔히 다음과 같은 에러를 보게 됩니다.Uncaught TypeError: Cannot read properties of undefined (reading 'prop')이러한 문제를 해결하기 위해선 기존에 조건문 또는 논리 연산자(&&)를 사용했지만, 코드가 길어지며 점점 가독성이 떨어지는 계기가 되었고 이러한 불편함을 해소하기 위해 ECMAScript 2020(ES11)에서 도입된 문법이 바로 옵셔널 체이닝(Optional Chainin..

• format_list_bulleted Front-End/JavaScript
• · 2025. 8. 25.
• textsms