진수 성장노트 ~ing 진수 성장노트 ~ing

1. async 란 - 비동기 처리를 위한 문법 - 특정 함수가 Promise를 반환하게 함 - 기존 프로미스보다 더 간결한, 직관적인 코드 작성가능 2. await 란 - 비동기 처리 결과를 기다리게 함 - async 함수 내부에서만 사용 가능 - 프로미스 체이닝을 간결하게 개선(가독성 증가) 더보기 // JavaScript 관련 구글링 // 👉 site:developer.mozilla.org {연관_키워드} 'use strict'; // 1. async 란 // - 비동기 처리를 위한 문법 // - 특정 함수가 Promise를 반환하게 함 // - 기존 프로미스보다 더 간결한, 직관적인 코드 작성가능 // 비동기 함수, Proimse 활용(군더더기가 많은 코드) function myPromise() ..

Callback Hell 을 탈출하기 위해서는 Promise를 사용해야함. Promise란 CallBack Hell 을 탈출하기 위한 객체다. - 기존 CallBack 함수 더보기 // JavaScript 관련 구글링 // 👉 site:developer.mozilla.org {연관_키워드} 'use strict'; // 주문하기 function orderAPI(doNext) { setTimeout(() => { // 비동기 함수 console.log("[주문] 완료!"); doNext(); }, 1000); } // 결제하기 function paymentAPI(doNext) { setTimeout(() => { console.log("[결제] 완료!"); doNext(); }, 1000); } // 배달..

- 동기 방식 : 결과를 확인해야만 넘어가는 방식 - 비동기 방식 : 결과를 기다리지 않고 다음 단계로 넘어감. 이를 통해 지연시간을 최소화 시킴 (순서가 보장 된것에 대한 것은 주의 해야함 ) => 그러므로 Callback 함수를 사용 - 코드 예시 더보기 // JavaScript 관련 구글링 // 👉 site:developer.mozilla.org {연관_키워드} 'use strict'; // 1. 동기 함수(synchronous function) // - 순차적으로 수행되는 함수 // - 결과물을 받아야만, 다음을 진행할 수 있음 // - 👍 장점: 실행 흐름 파악, 쉬움 // - 👎 단점: 대기시간 누적으로, 처리지연 증가 // 동기적 시간 지연 함수(수행이 끝날때까지, 해당 함수에 머무름) fu..

- 자바스크립트 API 유용한 사이트 https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org - 코드 리뷰 출저: 홍팍 (https://www.youtube.com/@hongpark) 더보기 // JavaScript 관련 구글링 // 👉 site:developer.mozilla.org {연관_키워드} "use strict"; // Web API란 // - 웹 개발을 돕는, 잘 만들..

- 예시 더보기 // 1. DOM 이란 // - 브라우저가 웹페이지를 JS 객체화 하는 방식 // - 이를 위해 제공되는 대표 객체가 document // - document: 웹페이지 문서 정보를 모두 지니는 객체 // docuemnt 객체 둘러보기 console.log(document); console.log(document.title); console.log(document.URL); // 웹페이지 제목 변경 document.title = "동적 웹페이지 만들기"; - 코드 리뷰 더보기 // JavaScript 관련 구글링 // 👉 site:developer.mozilla.org {연관_키워드} "use strict"; // 1. DOM 이란 // - 브라우저가 웹페이지를 JS 객체화 하는 방식 /..

더보기 - 예시 // JavaScript 관련 구글링 // 👉 site:developer.mozilla.org {연관_키워드} "use strict"; // 1. 클래스란? // - 클래스란? 객체를 찍어내는 틀(like a 붕어빵틀, 설계도) // - 클래스는 필드(상태)와 메소드(동작)으로 구성 됨 // 댕댕이 클래스 만들기 // 2. 생성자란? // - 생성자란? 객체를 만들때 사용되는 메소드로 constructor라 함 // - 클래스로부터 객체를 만들 시, new 키워드가 필요 // 댕댕이 클래스 만들기 class Dog { // 필드(상태; 변수): 이름, 품종, 나이 _name; _breed; _age; // 생성자(객체를 만드는 특별한 메소드) constructor(name, breed, ..

더보기 // JavaScript 관련 구글링 // 👉 site:developer.mozilla.org {연관_키워드} "use strict"; // 1. 객체란? // - 사용자가 직접 만드는 데이터로서, 프로퍼티의 집합임 // - 프로퍼티는 키(key)와 값(value)로 구성됨 // 객체 생성 const ramen = { // 이름 name: "뽀글이", // 가격 price: 3000, }; const chicken = { name: "슈넬치킨", price: 5000, }; const coke = { name: "코카콜라", price: 1000, }; const americano = { name: "아메리카노", price: 1500, }; // 객체 출력 console.log(ramen); c..

배열 코드 예시 정리 더보기 // JavaScript 관련 구글링 // 👉 site:developer.mozilla.org {연관_키워드} "use strict"; // 1. 배열이란? // - 여러 변수를 하나로 묶은 것 // - 배열의 각 요소는 인덱스로 구분 됨 // - 요소의 타입은 모두 같아야 좋음 // 배열 생성 예 const menus = ["샌드위치", "초밥", "치킨"]; const prices = [11000, 16000, 19000]; console.log(menus); console.log(prices); // 2. 배열 다루기 // - 인덱스는 기본적으로 0부터 시작 // - 인덱스를 통해 배열의 각 요소로 접근 가능 // 배열 요소 가져오기: 식비 총합 계산 let sum = ..