FU11M00N

- asyncd와 await async와 await는 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하기 위해 나온 문법입니다. - async와 await 사용하기 async function 함수명() { await 비동기처리 메서드(); } 함수 앞에 async 예약어를 붙이고 비동기 처리를 해야 하는 코드를 await앞에 붙이면 됩니다. async function findAndSaveUsers(Users){ //생략 } findAndSaveUsers().then(()=> { /*생략*/ }); // 혹은 async function other(){ const result = await findAndSaveUsers(); } 하지만 비동기 처리 메서드가 프로미스 객체를 반환하지 않는다면 a..

- JS 프로미스 프로미스는 비동기 작업을 조금 더 편하게 하기위해 나온 ES6의 새로운 기능입니다. 이전엔 비동기 작업을 처리할 때에 콜백 함수로 처리를했었습니다. 하지만 콜백 함수로 하게되면 비동기 작업이 많아질수록 코드가 난잡해져 일명 "콜백 지옥"이 나오게 되었습니다. 콜백지옥을 방지하기위해 프로미스를 사용합니다. 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체 Then을 붙이면 결괏값을 반환합니다. 만약 실행이 완료되지 않았으면 완료된 후에 Then 내부 함수가 실행됩니다. - Promise 만들기 Promise 는 다음과 같이 만듭니다. const myPromise = new Promise((resolve, reject) => { //블라블라 //블라블라 //블라블라 //블라블라 //블..

- 자바스크립트 런타임 환경 아래의 사진은 자바스크립트 런타임 환경 사진입니다. - Call Stack 기본적으로 Anonymous는 가상의 전역 콘텍스트로 항상 존재한다고 생각하면 됩니다. 함수의 호출 순서대로 쌓이고 역순으로 실행됩니다. 함수 실행이 완료되면 스택에서 빠져나갑니다. 스택의 LIFO구조입니다. Call stack은 함수의 호출을 저장하는 자료구조입니다. 함수를 호출하면 스택에 쌓이고 또 다른 함수를 호출하면 다음 스택에 쌓으면서 가장 위에 쌓인 함수가 가장 먼저 처리됩니다. 가장먼저 first()을 호출하므로 call stack에 first() 이 쌓입니다. 그 후 first()에서 second()를 호출하므로 call stack에는 second()가 쌓이고, second()에서는 th..

- Node.js 란? Node.js의 공식 홈페이지에서 내린 정의는 Node.js는 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다. 런타임은 쉽게말해 실행기라고 이해하면 됩니다. 이제 자바스크립트로 앱, 게임 등등 많은 것들을 만들 수 있게 되었습니다. - 노드란 자바스크립트는 원래 브라우저, html에 종속되어 실행되어왔었습니다. 하지만 Node를 설치하게 되면 V8 자바스크립트 엔진이 실행시켜줘서 꼭 브라우저, html이 아니라도 자바스크립트를 실행할 수 있습니다. 여기서 자바스크립트가 브라우저에 종속되었다가 해방된 것이 매우 중요합니다. 이제 자바스크립트로 앱, 게임 등등 많은 것들을 만들 수 있게 되었습니다. 그럼 노드는 어떻게 사용할까요? 자바스크립트 소스코드를 작성하고 그것을 노..

- 즉시 실행 함수를 쓰는 이유 첫 로드 시 초기화 할 때 변수를 global하게 선언하고 싶지 않고싶을때 변수에 함수를 이용해 즉시 값을 할당하고 싶을 때 라이브러리 전역 변수 충돌 방지를 원할때 (function(version){ console.log(version) }("ES5")); ((version)=>{ console.log(version) })("ES6"); ES6에서는 익명함수에서는 function 키워드 대신 괄호와 화살표를 사용합니다. 콜백 함수로 실행될 때 기존의 익명 함수는 글로벌 컨텍스트에 접근했지만, 화살표 함수는 콜백 함수를 할당한 당시의 컨텍스트를 그대로 활용합니다. 즉시실행 함수를 사용할 때는 , 괄호로 묶고 함수를 호출해야합니다.

- ES6 화살표 함수 아래와 같은 형태로 화살표 함수를 나타낼 수 있습니다. ( )=>{ } 소괄호와 화살표를 사용하여 function 키워드 없이 함수를 선언할 수 있습니다. function 대신 화살표가 생겼다고 생각하면 됩니다. const func = () => { console.log("화살표 함수"); }; func(); const func = () => console.log("arrow function"); func() 화살표 함수 안에 실행문이 하나면, 중괄호도 없앨 수 있습니다. 위와같이도 가능합니다. - this 객체 지향 관점에서 콜백을 정의할 때 더 유연하게 컨텍스트 활용이 가능합니다. 자바스크립트의 함수 실행에서의 this 는 기본적으로 전역객체입니다. 그렇기 때문에 아래와 같은 ..

기존 자바스크립트에서 객체지향 구현시 function 이 생성자였습니다. 하지만 function 으로 하다보니 표현력이 떨어지고, 코드가 점점 복잡해져서 ES6부터는 class가 생겨났습니다. 1. class class Study{ constructor(name){ this.name = name; } getName(){ return this.name; } } let study = new Study("풀문"); console.log("study.getName();" + study.getName()); class 키워드를 이용해서 클래스를 정의하고 Study 클래스를 선언했습니다. 생성자 함수는 constructor 라는 이름으로 정의되어있는데, 이는 클래스가 생성될때 기본적으로 호출되는 함수입니다. 클래스..

- 비구조화 할당 왜 쓸까? const book = { korean: "korean", math: "math", english: "english" }; const korean = book.korean; const math = book.math; const english = book.english; console.log(korean); // korean console.log(math); // math console.log(english); // english 만약 배열이나 객체에서 해당 값들을 새로운 변수에 할당 해줘야할때 위와같은 행위를 여러번 해야합니다. 하지만 const { korean, math, english } = { korean: "korean", math: "math", englissh: "..