Starters Starters

JS 에서 비동기적 작업을 할 때 Promise를 더욱 쉽게 사용할 수 있게 해주는 함수들 // 몇 ms 이후에 끝나는 함수 function sleep(ms) { // 특정 ms 이후 resolve가 호출되고 함수 끝남 return new Promise(resolve => setTimeout(resolve, ms)); } // 함수 앞에 async 라고 써주면 됨 async function process(){ console.log('안녕하세요!'); await sleep(1000); // promise의 앞부분에 await 써줌 console.log('반갑습니다!'); } process(); .then() ~~ 이런식으로 사용하지 않아도 된다. async 를 사용하면 해당 함수는 promise를 반환하게..

callback 함수 사용해서 어떤 작업 이후에 다른 작업 실행하게 했음 하지만 작업이 많아지게 되면 코드가 복잡해졌음 ==> Promise 사용 1초마다 1씩 더해지는 알고리즘 function increaseAndPring(n, callback){ setTimeout(() => { const increased = n + 1; console.log(increased); if(callback){ callback(increased); } }, 1000); } increaseAndPrint(0, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { consol..

동기적 / 비동기적 처리 동기적 처리 function work(){ const start = Date.now(); // 현재 날짜를 숫자형태로 표시 for (let i = 0; i { const start = Date.now(); // 현재 날짜를 숫자형태로 표시 for (let i = 0; i < 1000000000; i++){ } const end = Date.now..

flex와 grid의 가장 큰 차이점: - flex는 1차원(한방향) 레이아웃 시스템, grid는 2차원(가로, 세로/ 두방향) 레이아웃 시스템 - grid가 더 복잡한 레이아웃 표현이 가능 IE에서도 지원하지만 방법이 다름 firefox사용하면 그리드 사용하기 더 편리하다고 한다. 1 2 3 4 5 6 7 8 9 부모요소 Grid Container 자식요소 Grid Item 시작 부모요소에 display: grid; Grid Track - grid의 행 또는 열 Grid Cell - grid의 한 칸 의미 Grid Line - gird 셀을 구분하는 선 Grid Number - Grid 라인의 각 번호 Grid Gap - gird 셀 사이의 간격 Grid Area - gird 셀의 집합 컨네이너에 적용..

Hoisting - js에서 아직 선언되지 않는 함수 또는 변수를 끌어 올려서 사용하는 js의 작동 방식 myFunction(); function myFunction(){ console.log('hello'); } JS는 위처럼 함수 선언과 호출의 순서가 달라져도 똑같이 값을 가진다. 하지만 const나 let에서는 hoisting발생하지 않음 hoisiting은 최대한 발생하지 않게 하는 것이 좋다. 코드가 복잡하고 이해하기 어려워질 수 있기 때문

scope란? - 변수 또는 함수 선언 시, 어디서 어디까지가 유효한지의 범위를 의미함 - 세가지 종류가 있음(global, function, block) * block은 if문 for문 등 { } 로 감싸진 부분에서 동작 const value = 'hello!'; function myFunction() { console.log('myFunction: '); console.log(value); => hello! } function otherFunction(){ console.log('otherFunction: '); const value = 'bye!'; console.log(value); => bye! } myFunction(); otherFunction(); console.log('global sco..

파라미터의 모든 값 합해주는 함수 function sum(a, b, c, d, e, f, g) { return a + b + c + d + e + f + g; } console.log(sum(1,2,3,4,5,6)); 하지만 숫자 하나라도 없다면 작동 안함 function sum(...rest) { return rest.reduce( (acc, current) => acc + current, 0 ); } console.log(sum(1,2,3,4,5,6)); 위와 같이 파라미터로 rest 사용하면 rest는 입력받은 인자를 모두 하나의 배열로 묶는다. spread 인자로 사용 function sum(...rest) { return rest.reduce( (acc, current) => acc + curr..

...사용 하지만 spread와 다르게 사용 const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple' }; const { color, ...rest } = purpleCuteSlime; console.log(color); => purple console.log(rest); => name: '슬라임' attribute: 'cute' ...rest (이름은 rest 아니어도됨) 쓰면 앞서 지정한 값을 제외하고 모든 값을 지정 배열에서 사용 const numbers = [0, 1, 2, 3, 4, 5, 6]; const [one, two, ...rest] = numbers; console.log(one); => 0 console.log..