23-01-20) JS ES6 문법 Promise, async, await

프로미스는 자바스크립에 내장된 내장객체 입니다 프로미스 객체에서는 2가지를 형태를 지닙니다. 1. 상태(state) pending : 수행중 fullfilled : 성공적 완료 rejected : 실패 2. 프로듀서 - 정보를 제공하는 제공자(즉, Promise) 컨슈머 - 사용자(즉, 호출하는사람) 프로미스 생성 executor콜백함수를 전달해야 하며 executor콜백함수는 다시 resolve함수와 reject함수를 받습니다. //매개변수는 컨슈머가 분명 콜백함수를 전달할거야!(그 콜백함수로 리턴해줄게!) let promise = new Promise( (success, fail) => { //producer 입장에서 성공했을 때 성공을 알리는 함수 success("success"); //produc..
JavaScript 2023. 1. 21. 16:30
JS ES6 문법 한눈에 보기

23/01/12 수업 1. let과 const * let let변수는 중복선언이 불가능하다. let변수의 유효범위는 {}블록이다. (자바의 변수 범위와 같다고 생각하면 된다.) //let변수는 같은 블록에서 내에서 중복이 불가능하다. let y = 1; // let y = 100; //에러 //let변수의 유효범위는 {}블록이다 let z = 10; if(true) { let z = 100; console.log(z); //100 } console.log(z); //10 *확인 목록1 목록2 목록3 목록4 -위에 for문에 var 변수 선언시 클로져 방식(즉시실행함수)으로 실행하지 않으면 for(var i=0 ; i console.log(a); //출력 console.log( b1(1) ); //unde..
JavaScript 2023. 1. 12. 21:04
23-01-06 AJAX(비동기 통신) , 외부 API 가져오기

*화면 이동없이 데이터만 전송하는 기술. *함수를 실행할 때 순서대로 실행해주는 거를 동기적 방식이라고 함. *함수가 실행되는데 이전함수가 실행되서 종료되기까지 기다리지 않고 바로바로 다음 함수들이 실행됨. *API 미리 만들어져 있는 기능들을 통칭적으로 API 라고 함. *fetch() API *promise = fetch(요청) // promise객체를 반환 pending(진행중이라는 의미) reject(거절됨을 의미) 반환을 promise객체로 받는다면 뒤에 .then(콜백함수) 함수 사용가능. fullfilled(요청이 성공했음을 의미) 이때 콜백의 매개변수로 실행에 대한 결과(응답)를 받을 수 있음. *비동기방식에서는 순서를 보장하지 않음. 그래서 순서를 보장받기..
JavaScript 2023. 1. 6. 18:32
23-01-05 JS ) location객체, history객체, navigator객체, 콜백함수, 쿠키, 세션 - localstorage와 sessionStorage

* location객체 -location.href = 주소; -> 원하는 페이지로 바로 이동시켜줌. *자바스크립트 새로고침 -location.reload() -> 이게 들어가면 화면이 가만히 있다가 계속 새로고침이 들어가기 때문에 잘 사용하지는 않음. location객체 사용 코드 이동 *history객체 -브라우저의 기록을 담당. -뒤로가기, 앞으로 가기 버튼을 생각하면 됨. -history.go(-3); go는 앞뒤로 이동가능 해서 3페이지씩 이동도 가능. -history.forward()는 한단계 앞으로가기. -history.back(); 는 한단계 뒤로가기. -history.pushState(저장할데이터, 바꿀제목, 바뀐주소); pushState는 기록을 사이에 추가해주는 것. -history.r..
JavaScript 2023. 1. 5. 17:50
23-01-04 DOM- form객체, 정규표현식, 날짜객체 / BOM - window팝업, window인터벌, window타임아웃

*css의 애니메이션에대해서 참고하고싶을 때 아래 참고. -w3school -https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io -https://whirl.netlify.app/ Whirl: CSS loading animations with minimal effort! You need to enable JavaScript to run this app. WhirlCSS loading animations with minimal effort! whirl.netlify.app -또는 구글에 무료 CSS animation 치고 들어가면 ..
JavaScript 2023. 1. 4. 19:00
23-01-03 클래스 속성 제어 실습, 다중이벤트, 이벤트전파, 이벤트전파원리, 이벤트전파여러클래스, 이벤트중단, 이벤트객체와 dataset

#클래스의 속성 제어하기 내용 중에서. -클래스라는 키워드는 디자인 할 때 많이 사용할 것. *실습 (선생님이 작성해주신 내용.) -코드 이벤트객체활용 결과: -결과 *실습2 -코드 이벤트 위임 이용해서 다음을 만들어 보세요. 번호 제목 내용 삭제 1 첫글 hi 삭제 2 첫글 hi 삭제 3 첫글 hi 삭제 4 첫글 hi 삭제 -결과 #이벤트 전파의 원리 *기본적으로 실행되는 이벤트 함수들은 버블링 형식( 자식 -> 부모태그의 이벤트) 으로 실행된다. *이벤트 캡쳐링은 쓸일은 없으나 보고만 감. * event.stopPropagation() -> 이벤트가 캡쳐페이스나 버블링 페이스를 타고 넘어갈 때 중간에 event.stopPropagation()을 만나면 딱 거기까지만 이벤트가 실행되고 이후의 이벤트는 ..
JavaScript 2023. 1. 3. 19:32
1 2