본문 바로가기

전체 글

 (602)
[ JavaScript ES 6 ] async, await 1. ES8부터 Promise 대신 async/await 문법 사용 가능 async를 function 앞에 붙이면 함수 실행 후에 Promise 오브젝트가 남음 But, async는 Promise와 달리 기본적으로 reject 처리가 안됨. 정 하고 싶으면 Promise.reject()를 리턴해야 함. async function add(){ return 1 + 1; } add().then(function(res){ console.log(res); }) 2. await은 then() 대신 사용 가능 var pro = new Promise(function(resolve, reject){ resolve(); }); var result = await pro; // Promise가 끝날 때까지 기다려! conso..
[ JavaScript ES 6 ] Promise 1. 콜백함수는 여러번 쓸수록 depth가 깊어지고 가독성이 안좋아지는 문제가 있음 -> 더 쉽게 쓰기 위해 탄생한게 Promise 패턴 // Callback func1(function(){ func2(function(){ func3(function(){ }) }) }); // Promise func1().then(function(){ }).then(function(){ }) 2. Promise는 코드 디자인 패턴이다. var pro = new Promise(); pro.then(function(){ }); 3. Promise는 이전 작업이 성공할 경우 then(), 실패할 경우 catch()를 사용해서 모든 경우에 대비할 수 있도록 해줌 4. Promise는 성공/실패 판정 기계 var pro = ne..
[ JavaScript ES 6 ] 비동기식 처리 1. JavaScript의 비동기식 처리 -> setTimeout(), 이벤트 리스너, ajax 2. 함수들을 좀 더 안전하게 순차적 실행을 하려면 콜백 함수 사용 콜백함수는 함수 디자인 패턴일 뿐, 순차적 실행을 '반드시' 지켜주진 않음. 오래 걸리는 연산은 그냥 비동기로 실행될수도 있음. function func1(paramFunc){ console.log(1); paramFunc(); } function func2(){ console.log(2); } func1(func2));
[ JavaScript ES 6 ] 웹브라우저 동작 원리 1. 웹브라우저 동작 원리 setTimeout() 이런거는 stack에서 바로 처리하는 게 아니라 대기실에 넣어놨다가 실행시키기때문에 다른 언어의 Sleep()처럼 Pending되지 않음. 어려운 수학 계산 등 오래 걸리는 작업은 자바스크립트로 수행하면 안됨. 이 작업이 Stack을 차지하고 있어서 사용자의 UI Request가 Queue에서 Stack으로 올라가지 못하기 때문에 사용자는 "응답없음" 화면을 보게 됨. 1) stack을 바쁘게 하지 말자 2) queue를 바쁘게 하지 말자 event listener 백개 천개 달아놓는 등..
[ JavaScript ES 6 ] import, export 1. ES6에서 import&export를 이용하여 파일간 모듈식 개발 가능 는 옛날 방식, but 호환성은 그만큼 좋음 require()도 옛날 방식 // main.js // library.js var a =10; export default a; 2. export default는 파일 하나당 한번만 사용 가능 여러개 export 하려면 export {a, b, c}; 이렇게 하거나 export {a}; export {b}; 이렇게 하거나 export var a = 10; 이렇게 하면 됨 3. export를 여러개 하는 파일을 import할 때에는 export 변수명과 똑같이 맞춰서 써주어야 함. 똑같이 맞추는 게 기존이지만 이름을 재지정해줄 수 있음 import {a as myA} from '/libr..
[ JavaScript ES 6 ] Destructuring 1. Destructuring ES6에서 Array로부터 변수 만들기 좀 더 쉬워짐 var [a,b,c] = [2,3,4]; 2. Destructuring 하면서 몇개 빼먹을 경우를 대비해 default 값 지정 가능 var [a,b,c = 10] = [2,3]; 3. Object 데이터의 Destructuring 변수명을 key명과 똑같이 써주어야 함 var { name, age } = { name : 'Kim', age : 30 }; // 변수명 변경 가능하고 default 값 지정도 가능 var { name : myName, age = 31 } = { name : 'Kim' }; 4. Destructuring을 역으로 이용하는 방법이 많이 쓰임 var name = 'Kim'; var age = 30..
프로그래머스 SQL 문제 풀이 모음 (2021.12.17 업데이트) SELECT 1. 모든 레코드 조회하기 동물 보호소에 들어온 모든 동물의 정보를 ANIMAL_ID순으로 조회하는 SQL문을 작성해주세요. SELECT * FROM ANIMAL_INS ORDER BY ANIMAL_ID; 2. 역순 정렬하기 동물 보호소에 들어온 모든 동물의 이름과 보호 시작일을 조회하는 SQL문을 작성해주세요. 이때 결과는 ANIMAL_ID 역순으로 보여주세요. SELECT NAME, DATETIME FROM ANIMAL_INS ORDER BY ANIMAL_ID DESC; 3. 아픈 동물 찾기 동물 보호소에 들어온 동물 중 아픈 동물1의 아이디와 이름을 조회하는 SQL 문을 작성해주세요. 이때 결과는 아이디 순으로 조회해주세요. SELECT ANIMAL_ID, NAME FROM ANIMAL..
[ JavaScript ES 6 ] getter, setter 1. ES5부터 getter, setter 문법이 추가됨 get 함수들 -> return이 있어야 함, 파라미터가 없어야 함 set 함수들 -> 파라미터가 1개 있어야 함

티스토리툴바