본문 바로가기

전체 글152

[JS] async function ✨ async • await ES2017 Promise chaining을 async & await로 간편하게 사용할 수 있다. async 와 await는 새로운 것이 추가 된게 아니라, 기존에 존재하는 Promise 위에 조금 더 간편한 API를 제공한다. => Syntactic sugar(기존에 존재하고 있는 것을 감싸서 조금 더 간편하게 사용할 수 있는 것) 1. async function 앞에 async 키워드 사용 결과값을 Promise로 반환 async function fetchUser() { // do network request in 10 secs... return 'ellie'; } const user = fetchUser(); user.then(console.log); console.lo.. 2021. 7. 8.
[JS] Promise 개념 및 활용 🌟 Promise ES6 자바스크립트에서 제공하는 비동기 코드를 간편하게 처리할 수 있도록 도와주는 object 프로미스는 어떤 기능을 실행하고 나서 정상적으로 동작하면, 성공의 메세지와 함께 처리된 결과값을 전달해준다. 만약 예상치 못한 문제가 발생하면 error를 전달해준다. Producer vs Consumer (생산자와 사용자 차이점 이해) 비동기 수행상태를 가진다. Promise State pending(보류) -> fulfilled(이행) or rejected(거부) 1. Producer (생산자) Promise 객체가 생성되는 즉시 executor(콜백함수)가 실행된다. const promise = new Promise((resolve, reject) => { // doing some hea.. 2021. 7. 6.
[JS] Array api 총 정리 📍 split : String ➜ Array { const fruits = '🍎, 🥝, 🍌, 🍒'; console.log(fruits.split(',')); console.log(fruits.split(',', 2)); // 리턴 받을 배열 수 } 📍 join : Array ➜ String { const fruits = ['apple', 'banana', 'orange']; console.log(fruits.join()); // apple,banana,orange console.log(fruits.join('|')); // apple|banana|orange } 📍 Reverse { const array = [1, 2, 3, 4, 5]; console.log(array.reverse()); //본 배열도.. 2021. 7. 5.
[Web APIs] scrollBy, scrollTo, scrollIntoView 💡 Window.scrollBy() window 창에 있는 document를 지정된 크기만큼 스크롤한다 Syntax window.scrollBy(x-coord, y-coord); window.scrollBy(options) 예를 들어 window.scrollBy(0, 100) 이면 수직으로 100px씩 스크롤 💡 Window.scrollTo() document의 특정 좌표로 스크롤 Syntax window.scrollTo(x-coord, y-coord) window.scrollTo(options) 예를 들어 window.scrollTo(0, 100)이면 y축이 100px 인곳으로 스크롤 💡 Element.scrollIntoView() Element의 위치로 스크롤 Syntax element.scrollI.. 2021. 6. 29.
[HTML] script async vs defer 🌟드림코딩 엘리님의 youtube강의를 보고 공부한 내용을 정리한 포스팅입니다🌟 👉youtube강의 https://www.youtube.com/watch?v=tJieVCgGzhs 💡 HTML에서 자바스크립트를 포함할 때 어떻게 포함하는게 효율적인가 1. 🅰 브라우저가 한줄씩 HTML parsing 🅱 script태그가 나오면 HTML parsing 하는 것을 잠시 멈추고, 필요한 자바스크립트(app.js)를 다운받고 실행한다. 그 다음 다시 HTML parsing 단점 💩 만약 자바스크립트 파일용량이 크고, 인터넷도 느리면 웹사이트를 보기까지 많은 시간이 소요된다. 2. 안에 script 포함하는 방법 🅰 ⬇ ⬇ 🅱 ➡ ⬇ 페이지가 준비가 된 다음에 자바스크립트를 다운받고 실행한다. 장점 😀 사용자가 기.. 2021. 6. 28.
[Web APIs] 브라우저 좌표 - client X,Y 와 page X,Y 비교 💡 client X,Y 와 page X,Y 비교 client의 X,Y 좌표는 브라우저 창을 통해 "보이는" 페이지의 왼쪽 상단 모서리에 상대적 page의 X,Y 좌표는 전체 페이지의 왼쪽 상단 모서리에 상대적(스크롤링으로 숨겨진 부분 포함) 즉, page 좌표는 브라우저 창에 숨겨진 영역까지 포함해서 좌표가 측정되고, client 좌표는 브라우저 창을 기준으로 좌표가 측정되는 것 참고 https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y 2021. 6. 28.
반응형

티스토리툴바