써먹는 웹개발

?.은 ?. '앞'의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다. user.address.street 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 let user = {}; // 주소 정보가 없는 사용자 alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다. ////////////////////////////////////////////////////////////////////////// let user = null; alert( user?.address ); // undefined alert( user?.address.street ); // undefined /////////////..

비동기 처리의 시작 0. 사전 정보 - 자바스크립트는 동기적인 특성이 있어 첫번째 행의 소스가 실행된 다음에 두번째 행의 소스가 실행된다. - hoisting : var, function 선언들이 (작성 순서와 상관없이) 제일 먼저 실행되는 것 - 동기 처리 : 첫번째 요청이 끝날때까지 다른 요청이 들어올 수 없는 처리방식 비동기 처리 : 첫번째 요청이 들어와도 다른 요청 작업을 진행할 수 있는 처리방식 [동기와 비동기. 출처=책 ‘한빛미디어 Boost.Asio를 이용한 네트워크 프로그래밍’] 1. callback 1-1. 정의 1) 다른 함수의 인자로써 이용되는 함수 2) 어떤 이벤트에 의해 호출되어지는 함수. 1-2. 예제 console.log('1'); setTimeout(() => console...

비구조화 할당 1. 정의 : 객체,배열안의 값을 추출해서 변수, 상수에 바로 선언하는 문법 2. 쓰는 이유 : 코드를 더욱 짧고 보기 좋게 작성할 수 있다. 3-1. 객체 비구조화 할당 전 const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' }; const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' }; function print(hero) { const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${ hero.actor } 입니다.`; console.log(text); } print(ironMan); pri..

1. For.. of - 배열 값 순환 - 예시 var arr = [1, 2, 3]; for (var item of arr) { console.log(item); // 1, 2, 3 } // 배열을 for.. in으로 출력한다면? var arr = [1, 2, 3]; for (var item in arr) { console.log(item); // 0, 1, 2 } 2. For.. in - 객체 값 순환 - 예시 var obj = { a: 1, b: 2, c: 3 } for (var item in obj) { console.log(item); // a, b, c } // 객체를 for.. of로 출력한다면? var obj = { a: 1, b: 2, c: 3 } for (var item of obj) {..

모듈기반으로 참고파일에서 로직을 구현후에 호출해서 쓰는 방법입니다. 1. export : 프로퍼티나 메서드를 구현해놓는다. // myLogger.js 파일 속 코드 export function log(data) { console.log(data); } export const getTime = () => { return Date.now(); } export const getCurrentHour = () => { return (new Date).getHours(); } 2. import : 프로퍼티나 메서드를 필요한 파일에서 쓸수있도록 가져온다. // myLogger.js와 같은 경로의 파일 import {log, getTime, getCurrentHour} from './myLogger'; log('my ..

객체의 Prototype을 변경하려면 Object.setPrototypeOf() 메서드를 사용하면 됩니다. 사용방법 let person = { getGreeting() { return "안녕!"; } }; let dog = { getGreeting() { return "멍!"; } }; // prototype은 person let friend = Object.create(person); console.log(friend.getGreeting()); // "안녕!" console.log(Object.getPrototypeOf(friend) === person); // true // prototype을 dog로 설정 Object.setPrototypeOf(friend, dog); console.log(fri..

weakMap과 weakSet의 정의 - 해당 객체는 object만을 키로 허용하고 값은 임의의 값을 허용하는 키/값 형태 요소의 집합 - 객체 외에 특정 type의 값을 저장할 수 없다. - 윈도우 파일의 바로가기 같은 역할이다. (용량을 차지하지 않기 때문) 그러므로 가비지 콜렉터의 실행 대상이 아니다. 1. weakMap - 객체 중복가능 - 주어진 객체가 map안에 존재하는지 확인하는 용도 - 관련 메서드 1) WeakMap.prototype.delete(key) : delete되면 has할때 false 반환 2) WeakMap.prototype.get(key) : 관련값이 없으면 undefined 반환 3) WeakMap.prototype.has(key) : boolean 반환 4) WeakMa..

html 소스 ... apple orange banana strawberry function print() { // 문자열 'e'가 포함된 노드로 구성된 배열을 만들어서 반환하기 let list = document.quarySelectorAll("li"); let listArray = Array.from(list); let eArray = listArray.filter(function(v) { return v.innerText.includes("e"); }); return eArray; } 출처 : https://www.inflearn.com/course/es6-%EA%B0%95%EC%A2%8C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8/lectur..