JavaScript12 [JavaScript] JS의 반복문 그동안 배운 것들이 있었다... 그냥 for문을 써도 되는 상황에 굳이굳이 map을 사용한 나는 바보다 그래서 예전에 정리해둔 반복문을 가져왔다... 😎 두줄 요약 객체 순회 할 때 → Object.keys, Object.values, Object.entries 배열 순회 할 때 → forEach, map, filter, reduce 등등 ✔ for for (let i = 0; i < 10; i++) { console.log(i); } 너도알고 나도알고 모두가 아는 그 for문 ✔ for in const obj = { name: '김점프', age: '4' } for (const key in obj) { console.log(`${key} : ${obj[key]}`); } // name : 김점프 // .. 2021. 11. 21. [JavaScript] Callback vs Promise vs async-await promise는 이제 진짜 알 때도 되었다. #가보자고... ✅ Callback 콜백 지옥 = 콜백이 너무 길어지면 읽기 힘들고, 이해하기도 힘듬 에러처리하기도 힘듬 유지보수도 힘듬 그리고 실패했는지/성공했는지/대기중인지 알려주지 않음 (에러가 나야만 아 뭔가 잘못됐구나 라고 알수있음😰) → 그래서 promise가 등장 ✅ Promise promise는 객체임 new Promise()로 프로미스를 생성하고 종료할 때 까지 프로미스는 3가지 상태를 가짐 pending(대기) : 비동기처리 미완료 (생성 직후 === 기본상태) fulfilled(이행) : 비동기 처리 성공 → resolve 호출 rejected(실패) : 비동기 처리 실패 → reject 호출 Promise 후속 처리 메서드 then : 인.. 2021. 10. 10. [JavaScript] 화살표함수 vs 일반함수 ✅ 일반 함수 this는 마지막으로 자신을 품고있는 scope로 항상 변함 (❌어디서 선언했느냐❌ ⭕어디서 호출했느냐⭕) const example = { name: "world", speak: function() { function getName() { return `${this.name}`; } return `Hello ${getName()}`; } }; example.speak(); // Hello //이를 해결하려면.. const example = { name: "world", speak: function() { //여기까지는 this에 객체 example이 bind돼있음 const self = this; // self를 선언해서 결합시킴 function getName() { return `${se.. 2021. 10. 9. [JavaScript] Babel 🤔 Babel?? 바벨 = 자바스크립트 컴파일러 (바벨 공홈에 그렇게 써있다!) ES6+ 이상의 최신 ECMAScript문법을 이전 문법(~ES5)으로 변환 🤔 그래서 그걸 왜 쓰는데? 우리의 영원한 친구(^^) IE와... IE 말고도 최신 문법을 지원하지않는 브라우저가 있을 수 있기 때문에! 모든 실행환경에서 js가 돌아가도록 하는 느낌이다. // Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); 😎 바벨을 써보자 yarn add -D @babel/core @babel/cli \ @babel/regist.. 2021. 9. 25. [JavaScript] 이벤트 위임(Event delegation) 📃 이어지는 글 이벤트 플로우(Event Flow) 이벤트 버블링(Event Bubbling) + e.stopPropagation() 이벤트 캡쳐링(Event Capturing) 이벤트 위임(Event delegation )← Now ! 🤔 이벤트 위임이란? 하위 요소에 각각 이벤트를 붙이지 않고, 상위요소에서 하위 요소의 이벤트를 컨트롤 하는 방식 컨테이너에 (아래 예시에서는 ul) 하나의 핸들러를 할당함 핸들러의 e.target 을 사용해서 이벤트가 발생한 요소가 어디인지 알아냄 원하는 요소에서 이벤트가 발생한 것이 확인되면 이벤트를 핸들링함 (아래 예시에서는 tagName으로 확인함) li 1 li 2 li 3 const ul = document.querySelector("ul"); ul.addEv.. 2021. 9. 23. 이전 1 2 3 다음
