Attribute 와 Property 차이점
Attribute : HTML의 속성 , element에 id / class 와 같은 추가적인 정보 , 정적임
Property : DOM의 속성 , 동적임
둘이 연결은 되어있지만 Property값을 변경하면 DOM객체만 업데이트 되고 HTML은 업데이트 되지 않아
Attribute 값은 그대로임
// Destructuring 구조분해할당
// 배열은 위치(index) , 객체는 key가 중요함
const person = {
name: "르탄이",
age: 25,
job: "개발자",
};
const { name, age } = person;
console.log(`hi ${name}!, ${age}!!`);
const movie = {
title: "inception",
director: "Christopher Nolan",
release: {
year: 2010,
month: "July",
},
};
const {
title,
release: { year },
} = movie;
console.log(`movie! ${title}!/${year}!!!`);
const numbers = [10, 20, 30, 40, 50];
const [first, , third] = numbers;
console.log(first);
console.log(third);
//
function confirmReservation(user) {
const { name, roomType, date: firstDate } = user;
return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`;
}
const userInfo = {
name: "James",
roomType: "Deluxe",
date: "2023-05-30",
};
const result = confirmReservation(userInfo);
console.log(result);
// Spread Operators : 배열,객체가 [] {} 를 벗어버리고 요소들이 펼쳐짐
const originalUser = {
name: "르탄이",
age: 28,
};
// 어딘가로 복사 -> 같은 데이터 위치를 참조하여 복사를 변경하면 원본이 같이 변함 -> 불변성이 아님
// const updatedUser = originalUser;
// updatedUser.name = "르순이";
// console.log("원본 : ", originalUser);
// console.log("복사 : ", updatedUser);
// 불변성 유지 -> 여기서 SpreadOperators 사용
const updatedUser = { ...originalUser };
updatedUser.name = "르순이";
console.log("원본 : ", originalUser);
console.log("복사 : ", updatedUser);
const f = [1, 2, 3];
const s = [4, 5, 6];
// [1,2,3,4,5,6]
const combinedArray = [...f, ...s];
console.log(combinedArray);
const obj1 = { name: "르탄이", age: 25 };
const obj2 = { name: "르순이", email: "rsoony@sparta.com" };
// 키가 중복될 시 뒷 객체가 앞 객체를 덮어씌움
const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject);
// 복사된 객체의 키 값을 변경해도 원본 객체의 키 값이 유지됨
mergedObject.name = "원장님";
console.log(obj1);
console.log(obj2);
// Rest Operator는 Spread Operator와 비슷하다 -> ...변수명
// Spread는 객체나 배열을 복사하거나 합칠 때 사용
// Rest는 함수의 매개변수로 쓰임 -> 매개변수로 쓰기 용이하게 배열로 묶어줌
function sum(...numbers) {
console.log("here : ", numbers);
return numbers.reduce((acc, cur) => acc + cur);
}
const r = sum(1, 2, 3, 4, 5);
console.log(r);
//객체 분해 할당 시 여러 값을 그룹핑 시 쓰임
const p = {
name: "John",
age: 30,
country: "USA",
occupation: "Developer",
};
// const { occupation, name2, age2, country } = person;
// 객체를 분해하여 일부만 할당 할 때에도 쓰임
const { occupation, ...rest } = person;
console.log("rest : ", rest);
// optional chaining : 객체의 속성에 접근 시 속성이 없더라도 에러 대신 undefined반환
// -> 에러가 발생하지 않으므로 안전하게 접근 가능
const user = {
profile: {
name: "르탄이",
details: {
age: 30,
location: "서울시 강남구",
},
},
printHello: () => console.log("Hello"),
};
const result = user.printHello1?.();
console.log(result);
// Null 병합 연산자 ??
let userLocation = null;
// console.log(userLocation ? userLocation : "no!");
// ??을 기준으로 좌변의 값이 존재한다면 좌변 , null undefined라면 우변
// 즉 ??을 기준으로 값을 평가한다라는 표현을 사용한다
console.log(userLocation ?? "no!");
function displayPreferences(preferences) {
// textLength가 0일 경우 50이 할당됨
const textLength = preferences.textLength || 50;
console.log(`Text Length: ${textLength}`);
// itemsPerPage가 null 또는 undefined일 때만 10이 할당됨
const itemsPerPage = preferences.itemsPerPage ?? 10;
console.log(`Items Per Page: ${itemsPerPage}`);
}
const userPreferences = {
textLength: 0, // 0이 유효한 값이지만 || 연산자로 인해 50이 출력됨
itemsPerPage: null, // null 값에 대해 ?? 연산자로 인해 10이 출력됨
};
displayPreferences(userPreferences);
//모듈의 필요성
// 명확환 종속성 관리 : script 파일간 종속성 및 로딩 순서를 수동 관리
// -> 버그 발생 가능성 증가 / 모듈은 종속성을 내부적으로 선언
// -> 개발자는 파일 로드 순서 신경X
import $ from "jquery";
import plugin from "plugin"; // 자동으로 jQuery에 대한 의존성을 처리
import app from "app"; // 모든 의존성이 충족되면 실행
// 코드 캡슐화와 충돌 방지 : 모듈은 자체적인 스코프를 가짐
// -> 모듈 외부에서 내부의 변수에 직접 접근X
// -> 전역 변수의 오염 방지 및 충돌 방지
// 여러 스크립트에서 동일 함수 이름 사용 시에도 각 모듈 내에서만 유효
// module1.js
export function conflictFunction() {
console.log("Module 1의 함수");
}
// module2.js
export function conflictFunction() {
console.log("Module 2의 함수");
}
// app.js 이부분에서 이름이 같아도 각 묘듈에서 다름의 예시
import { conflictFunction as function1 } from "./module1";
import { conflictFunction as function2 } from "./module2";
function1(); // "Module 1의 함수"
function2(); // "Module 2의 함수"
// 효율적인 코드 로딩 : 필요한 기능만 선택적으로 로드 가능
// -> 앱 초기 로딩 시간 단축 , 코드 스플리팅 사용 시 필요 코드만 동적 로드 가능
// -> 위와 같은 지연 로딩(lazy-loading)은 큰 규모일수록 성능 및 자원 사용 최적화됨
// 동적으로 모듈 로드 (예: 사용자가 특정 기능을 활성화했을 때)
button.addEventListener("click", (event) => {
import("./heavyModule.js")
.then((module) => {
module.heavyFunction();
})
.catch((err) => {
console.error("모듈 로딩에 실패했습니다.", err);
});
});
// 한 모듈에서 export default를 하나 실행하고 import는 임의의 이름으로 사용 가능
// 대신 파일 주소 및 이름은 명확해야함
// math.js
export default function multiply(x, y) {
return x * y;
}
// app.js
import multiply from './math.js';
console.log(multiply(6, 7)); // 42
// export default 시 모듈이름 변경은 자유
// utils.js
export default function square(x) {
return x * x;
}
// main.js
import mySquare from './utils.js';
console.log(mySquare(4)); // 출력: 16
// 모듈의 모든 내용을 객체 형태로 내보냄
// app.js
import * as MathFunctions from './math.js';
console.log(MathFunctions.add(10, 5)); // 15
console.log(MathFunctions.multiply(10, 5)); // 50
// Promise : 비동기 작업의 최종 완료 및 실패를 나타내는 객체
// -> 비동기 작업 시 결과값을 나중에 받기 위한 형태
// 주로 서버로부터 request 후 response 하는 HTTP 요청 처리에 사용
// Pending(대기) , Fulfilled(이행) , Rejected(거부) 3가지 상태 중 하나를 가짐
// .then() , .catch() , .finally() 메소드 활용하여 결과 연속 처리
// -> 콜백지옥 줄이고 코드 가독성 증가
const myPromise = new Promise(function (resolve, reject) {
// 비동기 작업을 수행하고
if (true) {
resolve("Success!");
} else {
reject("Error!");
}
});
myPromise
.then(function (value) {
// 성공(resolve)한 경우 수행
console.log(value); // 'Success!'
})
.catch(function (error) {
// 실패(reject)한 경우 수행
console.error(error); // 'Error!'
});
// Async 함수는 Promise를 반환함
async function fetchData() {
return "Data loaded";
}
// async function fetchData() {
// return Promise.resolve('Data loaded');
// }
fetchData().then(console.log); // 'Data loaded'
// await 키워드는 Promise의 완료를 기다리는 동안 함수의 실행 일시 중단
// -> Promise가 해결되면 자동으로 함수 실행 재개 (동기화 이후 비동기화 순차 실행)
// Promise가 반환되므로 await으로 처리를 기다리는 과정을 꼭 신경써야함
function fetchData() {
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("Data loading failed", error));
}
fetchData();