기록하며 성장하기

await & async promise가 콜백지옥을 무찌를 수 있는 좋은 방법이지만 그래도 코드가 복잡하기는 하다. 그래서 ES8 문법으로 await 과 async 가 추가되었다. await 과 async 는 promise를 더 깔끔하게 사용할 수 있는 방법이다. 하지만 경우에 따라 더 좋은 방법들이 다르기때문에, 적절히 섞어서 활용하는 것이 필요하다. promise 복습을 먼저 해보자 1초 후 텍스트 출력, 다시 2초후 텍스트 출력, 다시 3초후 텍스트를 출력하는 함수가 있다. function timer(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(time); }, time); }); } console.log(..

개념정리 동기 호이스팅이 된 다음, 작성한 코드들이 차례대로 실행되는 것을 말한다. ( hoisting : 변수, 함수 선언이 가장 먼저 실행되는 것 ) 비동기 코드 순서에 따르지 않고 실행되는 것으로, setTimeout / AJAX / eventListener 등의 처리 시 비동기 처리 된다. 콜백함수 실행할때 다시 call back 해달라고 하는 함수. 함수 안에서 동작하는 또 다른 함수의 형태. 콜백함수로 동기 / 비동기 처리 모두 할 수 있다. Synchronous callback : 함수 내 코드가 바로 실행될 수 있는 코드인 경우 Asynchronous callback : 함수 내 코드가 실행 타이밍을 기다려야하는 코드인 경우 콜백함수의 중첩이 많아지면 가독성이 떨어지고 복잡해지므로, pro..

다른 언어가 동작할때는 코드 윗줄부터 순서대로 작동하지만, 자바스크립트는 아닌 경우가 있다. 그래서 Stack과 Queue, 동기와 비동기, 콜백함수 등의 개념을 이해하고 있으면 도움이 된다. Stack 과 Queue stack은 쌓여있는 코드를 위에서부터 차례차례 실행하고, queue는 먼저 들어온 코드를 먼저 처리한다. 자바스크립트를 읽어올때 브라우저는 stack이라는 공간에 코드를 쌓아둔다. 윗 줄 부터 실행되기 시작하다가 도중에 시간이 필요한 코드를 만나게 되면 그 코드들은 Queue라는 공간으로 일단 보내놓고 바로 할 수 있는 다음 작업부터 실행한다. console.log(1+1) // 첫번째 실행 setTimeout(function(){ console.log(2+2) }, 1000) // 시간..

object : 속성을 가진 값을 저장할때 객체 자료형으로 만든다. array : 요소들을 순서대로 저장할때 배열 자료형으로 만든다. 작업을 하다보면 객체나 배열 데이터 전부가 아닌, 일부만 필요한 경우가 있다고 한다. 이럴때 자료를 변수로 '분해' 할 수 있게 해주는 문법이 [ 구조분해할당 ] 이다. Array 데이터를 변수에 담기 const arr = [1,2,3] const a = arr[0] const b = arr[1] const c = arr[2] // 위 코드를 아래와 같이 바꿀 수 있다. const [a,b,c] = arr 왼쪽에 선언한 변수 명의 갯수와, 배열 요소의 갯수가 맞지 않으면 값이 제대로 할당되지 않으므로 디폴트값을 넣어줄 수 있다. const arr = [1,2] const ..

UI 클론하는 강의에서 보너스(?) 자바스크립트 강의를 듣다가 처음 알게된 내용이 있어서 정리해본다. 조건부 삼항 연산자는 if문의 단축 형태이다. const person = { name: 'Jessie', age: 30, price: null, } 어린이는 입장권 가격을 할인해주고 있고, 그것을 체크하는 코드를 만들어보자. if (person.age

얼마전에 투표UI 만들면서 DOM 요소가 맘대로 잡아와지지 않아서 한참 고생했는데 강의들으면서 쪼끔 정리할 수 있게 된것 같다. 배우고 나니까 별 일이 아니네.. 처음에는 어떻게 검색해야할지도 몰라서 멀리 돌아갔었다. 😭 DOM node? element? 검색하다보니 DOM node와 element의 개념이 다르다는걸 알게됐다. What's the Difference between DOM Node and Element? What's the difference between a DOM node and an element? Let's find out! dmitripavlutin.com 간략하게 말하면 DOM node가 element를 포함하는 개념으로 node에는 여러가지 타입이 있고, 그 중 하나가 el..

여러가지 이유로 한동안 코딩을 놓고 있었다. 어쨌든 틈틈이 이전에 만든 것에 목표한 기능을 추가하는데 성공했고 그러면서 배운 개념들을 복습할겸 대략 정리해 본다. 1. 값이 자동으로 계산되는 인풋 만들기 옵션A 와 옵션B 퍼센트 수치를 입력하는 인풋에, 한쪽만 입력해도 나머지가 자동 계산되도록 하는 기능을 추가했다. const inputPercent = document.querySelectorAll('.input.number'); function calculatePercent() { const max = 100; if(this.value > max) { alert('It must be a number less than 100'); this.value = 0; } if(this == inputPercent..

새로운 프로젝트의 메인 화면 디자인이 드디어 마무리 되었다. (아마도) 그 중 한 부분에 애니메이션을 추가하고 싶었는데, 피그마로 프로토타입을 구현하는 것 보다 직접 코드를 짜보면 좋겠다는 생각에 처음으로 업무용 코드를 만들었고 생각보다 더 많은 것을 배우는 중이다. 화면 자체를 만드는 일은 생각보다 오래걸리지 않았다. SCSS 수업을 다시 듣고 기억을 떠올려서 활용한다면 훨~씬 좋겠지만 일단 급하니까 쌩 CSS로 잡았다. 문제는 여러개의 버튼 중 내가 클릭한 요소에 맞는 이벤트를 넣어줄 수 있는가였다. 화면에 있는 8개의 버튼은 각각 왼쪽 버튼인지, 오른쪽 버튼인지 어느 li 태그에 속한 버튼인지 해당 버튼이 가지고 있는 percent가 몇인지 를 구분할 수 있어야했다. 1. 일단 동작이 되도록 만들어..

같은 부모 유전자를 가진 여러 객체를 만들어내기 위해 변수와 메소드가 정의되어 있는 Class라는 틀을 사용한다. 이전에는 Constructor를 사용해서 위 기능을 구현했고, ES6에서 Class 문법이 추가되었다. Class를 사용하면 Constructor보다 더 명확하고 깔끔한 코드를 만들 수 있다. 📌 constructor로 생성자를 만든 경우 function Person (name, age) { this.name = name; this.age = age; } // 상속할 속성을 constructor에 정의 Person.prototype.sayHello = function() { console.log('Hello, I am ' + this.name ); } // 메서드를 prototype에 추가 ..

자바스크립트의 객체지향적 특성에 대해 공부하며 프로토타입 기반의 언어라는 내용이 계속 나왔지만 한번에 다 이해할 수가 없어서.. 때되면 이해할 수 있겠지 하며 넘겨왔었다. 그리고 이제 드디어 정리가 좀 되는 중! 👀 Prototype 이란? 프로토타입은 유전자 같은 것이다. 부모가 가진 유전자를 기반으로 자식객체를 만드는 개념이다. 자바스크립트가 프로토타입 기반 언어라는 것은 결국 객체지향적 특성을 설명한다. 클래스 기반 객체지향 VS 프로토타입 기반 객체지향 객체지향은 블럭을 조립해 제품을 만들어가는 과정 같은 것이라고 했다. Java 나 Python, C++ 같은 언어에서는 클래스를 정의해 그것으로부터 블럭(자식 객체)을 만들어 나간다면, Javascript는 클래스 없이 부모의 유전자를 가진 자식객..