Today Hailie Learned

🤔nvm이란? nvm(Node Version Manager)= Node.js 를 설치하는 툴이자, Node.js의 다양한 버전을 관리하는 프로그램 (Node.js의 다양한 버전을 쉽게 설치할 수 있다. ) nvm을 왜 쓰지? OS에 특정 버젼의 Node.js 를 설치하면, 여러 버전의 Node.js 를 설치해야 할 경우에 대응을 할 수가 없게 된다. 그렇기 때문에 먼저 nvm 을 설치하고, 설치한 nvm 을 통하여 원하는 특정 버젼의 Node.js 를 원하는 조건에 따라 복수로 설치하는 방법이 나중을 위해서는 더 좋은 방법이 된다. ⭕️ nvm 설치 후 ➝ Node.js 설치 후➝ npm 설치! 🤔npm이란? npm(Node Package Manager) = Node.js 로 개발된 프로그램을(npm 패..

Node는 무엇일까? JavaScript의 런타임이다. 우리는 JavaScript을 따로 설치하지 않는다. 대신 일정한 사양을 갖추어야 한다. ECMAScript 사양을 갖추면 브라우저가 JavaScript를 실행한다! 오랫동안 브라우저는 JavaScript를 작성하고 실행할 수 있는 유일한 장소였다. 그래서 JavaScript는 웹 애플리케이션에 적합하다. Node는 브라우저 밖에서 작동되는 JavaScript의 실행 환경이다. 이제 JavaScript 코드를 브라우저를 열지 않고, 심지어 브라우저가 없어도 실행할 수 있다. (그렇다고 똑같은 일을 할 수 있는 건 아니다. ) (-> 브라우저가 없으면 문서 객체 모델을 쓸 수 없고, 사용자의 입력, 이벤트 등을 사용할 수 없다. ) 그래도 Node는 정..

Async function는 비동기 코드를 아주 깔끔하게 작성하도록 돕는 함수이다. (Promise함수보다 더 깔끔!) Promise 위에 적용되기 때문에 Promise에 뿌리는 설탕이라고도 한다. 참고 **IE에서는 지원하지 않는다. ** async & await async 자체가 함수를 비동기 함수로 선언하는 키워드이다. 함수 앞에 async를 입력해서 함수를 비동기 함수로 선언하면, 함수는 자동으로 Promise를 반환한다. ➥ 빈 함수를 호출하면 undefined가 출력된다. ➥ 비어있는 async 함수를 호출하면 Promise가 출력된다. ➥ 비어있는 async 화살표 함수를 호출하면 Promise가 출력된다. ➥ async 화살표 함수를 호출하면 Promise가 리턴된다. Promise의 원리..

👇 우리가 콜백을 해야하는 이유 반복해야할때마다 같은 식을 여러번 써야한다. setTimeout(() => { document.body.style.backgroundColor = 'red'; }, 1000) setTimeout(() => { document.body.style.backgroundColor = 'orange'; }, 2000) setTimeout(() => { document.body.style.backgroundColor = 'yellow'; }, 3000) setTimeout(() => { document.body.style.backgroundColor = 'green'; }, 4000) setTimeout(() => { document.body.style.backgroundColor ..

Math.random() ⇒ 0 ~ 1 사이의 숫자를 랜덤으로 출력한다. (1미만) (소수점이하도 모두 출력) Math.random() * 10 ⇒ 0 ~ 10 사이의 숫자를 랜덤으로 출력한다. (10미만) (소수점이하도 모두 출력) Math.floor(Math.random() * 10) ⇒ 0 ~ 10 사이의 숫자를 랜덤으로 출력한다. (10미만) (정수만) Math.floor(Math.random() * 10) + 1 ⇒ 1 ~ 11 사이의 숫자를 랜덤으로 출력한다. (11미만) (정수만) **더 알아보기** Math.floor() 함수는 입력받은 숫자를 내림한 정수를 리턴하는 함수입니다. Math.ceil() 함수는 입력받은 숫자를 올림한 정수를 리턴하는 함수입니다. Math.round() 함수는 ..

class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum() { return this.first + this.second; } } class PersonPlus extends Person{ avg() { return (this.first + this.second) / 2; } } const kim = new PersonPlus('kim', 10, 20); console.log('kim.sum()',kim.sum()); console.log('kim.avg()',kim.avg()); // 출력값 kim.sum() 30 kim.avg() 15 👇 위 코드에서 P..

커링함수와 클로저의 차이에 대해 알아보았습니다. 커링함수가 클로저의 사용 사례 중 하나라고 말하는 엔지니어가 있는 반면, 클로저는 자바스크립트의 핵심 기능이고, 커링함수는 자바스크립트에 내장 지원되지 않기 때문에 완전히 다른 개념이라고 말하는 엔지니어가 있었습니다. 1. closure : 자바스크립트의 핵심 기능 중 하나입니다. 클로저는 외부 함수 범위와 외부 함수 외부에서 실행되는 경우에도 위의 모든 범위에 액세스할 수 있는 내부 함수입니다. 클로저를 언제 쓸까? 주로 정보를 은닉할 때 사용하고, 전역 변수의 사용을 억제하기 위해 사용합니다. function numbers(firstNum, secondNum) { let a = 'The result is'; return add(); } function ..

동기화 코드자 짜여진 순서대로 결과값이 도출된다. function waitSyns(ms) { var start = Date.now(); var now = start; while(now - start < ms ) { now = Date.now(); } } // 현재 시각과 시작 시각을 비교하며 ms 범위 내에서 무한 루프를 도는 blocking 함수입니다. function drink(person, coffee) { console.log(person + '는 ' + coffee + '를 마십니다'); } function orderCoffeeSync(coffee) { console.log(coffee + '가 접수되었습니다'); waitSyns(4000); return coffee; } let customer..

비동기란? 동시에 여러 작업을 해볼 수 있다! 자바스크립트는 단일 스레드 기반의 언어로 한 순간 하나의 작업만을 처리할 수 있다. 하지만 자바스크립트는 비 동기로 동작하기 때문에 단일 스레드에도 불구하고 동시에 많은 작업을 수행한다. => 비동기 => 주의할 점! 자바스크립트 언어 자체가 비동기 동작을 지원하는 것은 아니다. 비 동기로 동작하는 핵심요소는 자바스크립트 언어가 아니라 브라우저가 가지고 있다. 브라우저는 Web APIs, Event Table, Callback Queue, Event Loop 등으로 구성되며 자바스크립트 코드가 실행될 때 브라우저와의 동작은 아래 그림으로 표현할 수 있다. Web APIs: setTimeout이 Call Stack에 들어와 실행되면 Browser API인 ti..

forEach 함수와 for of // 배열에서 쓴다. const numbers = [1,2,3,4,5,6,7]; numbers.forEach(function(el) { console.log(el) }) // forEach와 for of 역할은 같다 for (let el of numbers) { console.log(el); } //출력 1 2 3 4 5 6 7 요즘에는 forEach를 잘 사용하지 않는다고 한다. 더 쉽고 간편한 for of가 생겼으니까!! for in // 객체에서 쓰인다. 객체 안의 모든 키를 출력한다. const hailie = { name: 'hailie', age:2, city:'hawaii' } for(key in hailie) { console.log(value); } //..