JavaScript | 자바스크립트20 Promise / async / await Promise 어떠한 값으로 이행, 거부될 예정인 상태 또는 그 상태가 정해지지 않은 상태를 나타내며 값이 현재 시점에 결정되지 않은채로 작업을 이어나갈때 쓰기 좋은 타입이다. Promise의 생성 생성하는 방법은 여러가지이다. Promise.resolve 또는 Promise.reject를 통하여 생성이 가능하다. 특정한 값이 아닌 함수의 결과 (API를 이용한 미래에 값이 도출되는 경우도 마찬가지이다.)를 Promise로 만들고 싶을때에는 new Promise(callback)으로 구성이 가능하다. Promise의 resolve, reject메서드를 통한 생성 Promise.resolve(a)는 a라는 값으로 이행될 Promise를 생성한다. Promise.reject(a)는 a라는 이유로 거부될 Pr.. 2020. 8. 17. JavaScript - class 다중상속 다중상속이란 일반적인 상속(prototype chain)은 다음과 같이 구성되어있다. A클래스 A를 상속받은 B클래스 B를 상속받은 C클래스 C를 상속받은 D클래스 하지만 간혹 특수한 상속이 필요할 때가 존재한다. A클래스 A를 상속받은 B클래스 B를 상속받은 C클래스 D클래스 D를 상속받은 E클래스 E를 상속받은 F클래스 C클래스와 F클래스를 모두 상속받은 G클래스 JavaScript에서 이러한 유형의 상속은 불가능하다. 타언어였다면...? 타 언어들을 기준으로 다중상속이 가능한 언어들이 있다. 다만 해당 언어들도 모든것이 완벽한것이 아니다. 몇가지 규칙이 있는데 다중상속시 우선순위 되는 class가 있다. 상속받은 class에 없는 메서드 호출시 우선순위가 되는 class의 상속관계 라인에서 먼저 확.. 2020. 7. 29. OOP - 객체지향 / 상속 객체지향이란 Object Oriented Programming 의 약자로 하나의 페러다임이다. 간단하게... 각각의 객체를 생성하는 것은 클래스이며 생성된 객체를 인스턴스라고 부른다. 인스턴스는 각각의 고유한 속성을 지니는것이 가능하다. 또, 새로운 클래스를 만들 때 이전에 만든 클래스를 상속 받을 수 있다 왜 써야 하나? 객체 지향을 사용하는 이유는 실생활의 무언가를 가장 잘 표현할 수 있기 때문이다. 감이 잡히지 않는다면 class instance 또는 Object Oriented Programming 에 대해서 real-life example 키워드와 함께 검색해 보는것을 권장한다. 예제 금형 - 클래스 빵틀 - 금형 클래스를 상속받는다. 붕어빵 틀 - 빵틀 클래스를 상속받는다. (모양 이라는 속성.. 2020. 7. 29. 복잡도 - 시간복잡도 복잡도란? 복잡도는 우리가 정의한 알고리즘(로직, 함수 등)이 입력값에 대한 연산을 수행하는데 있어서 걸리는 시간, 차지하는 공간 에 대한 상관관계를 나타낸 것으로시간복잡도 와 공간복잡도 로 나누게 된다. 시간복잡도 - 표기 일반적으로 시간복잡도를 표기할 때에는 점근표기법중 하나인 대문자O표기법 (Big-O Notation)이 사용된다. - $O(1)$, $O(n)$ 등 으로 표기한다. 표기할때에 유의 할 점은 최고차항을 제외한 모든 항과, 최고차항의 계수는 무시한다. 예를들어 함수가 n개의 요소에 대한 연산을 처리할때에 걸리는 연산횟수가 $4n^2+2n+1000$ 와 같다면 이에 대한 시간복잡도는 $O(n^2)$으로 표현한다. 아래는 모두 같은기능 (0부터 n까지(n을 포함)를 더한 값을 돌려주는)을 .. 2020. 7. 19. 재귀호출 함수의 재귀호출이란 이름에서 유추할 수 있듯이 자기 자신을 호출하는 행위이다. 이때에 주의해야 할 점은 함수가 무한루프에 빠지지 않도록 작성 해줘야 한다. 사용법 사용방법 자체는 매우 간단하다. 함수 내에서 자기 자신을 호출하는 행위가 존재하면 된다. 위에서 언급한대로 무한루프에 빠지지 않도록 탈출구문을 작성해준다. function logHi(num) { if (num === 0) {return} console.log('hi') logHi(num - 1) } logHi(3) // hi // hi // hi // undefined (return 값이 undefined일 뿐이다.) 입력받은 num의 수만큼 'hi'를 console.log를 통하여 출력하는 함수이다. 정말 별것 아닌 함수처럼 보이지만 이처럼 .. 2020. 7. 18. 함수의 메서드 - call, apply, bind this에서 잠깐 튀어나왔던 call, apply, bind에 대해 다루는 글이다. 함수를 호출하는 일반적인 방법은 함수뒤에 전달인자를 소괄호 ( )로 묶어 호출하게된다. 이러한 방법말고 call, apply와 같이 원하는 this와 전달인자를 바인딩하여 실행하는 메서드가 있고, bind와 같이 무언가를 바인딩한 함수 자체를 돌려주는 메서드가 있다. 사용방법 함수명.call, 함수명.apply, 함수명.bind로 메서드 이기 때문에 역시 호출해줘야 한다. 각 메서드 모두 첫번째 전달인자로는 this를 받는다. 호출할 함수가 this에 관한 작업을 하지 않는다면 null, undefined등 어떤값을 넣어주어도 무방하다. 다만 undefined는 의도치 않게 들어갈 수도 있는 값이기 때문에 null을 써주.. 2020. 7. 17. this Execution context Execution context는 함수가 호출 될 때에 생성된다. 여기에 담긴 내용으로는 다음과 같다. scope내의 변수, 함수 호출된 근원 전달인자 this 이중에 this에 대해서 알아보기로 하자. this this라는 키워드는 모든 함수 scope내에서 자동으로 설정되는 특수한 식별자를 말한다. 타 언어에서 this, self, Me 등등 여러 키워드로 사용되기도 한다. 다만 javascript에서 this는 여러 상황에 따라 가르키는 값이 다르기에 유의해야 한다. this값의 규칙 (this가 바인딩 되는 규칙) 타 언어를 경험해본적 있다면 this는 보통 class에서 사용되며 이때에 this는 인스턴스를 가르키게 된다.(클래스의 초기화 함수에 많이 사용된다.).. 2020. 7. 16. DOM - 2 이미 존재하는 html의 요소를 조회할 수 있다면 요소의 속성을 변경하여 조회한 html의 요소를 update해줄 수 있다. 또한 remove메서드를 이용하여 선택한 요소를 지워버릴 수 도 있다. 그럼 만드는것은...? 생성 document.createElement를 사용할 수 있다. let newElement = document.createElement('태그') // 가 만들어진다. newElement.textContent = '내용' console.log(newElement) // 내용 하지만 화면엔 아무것도 추가되지 않았다. 우리가 만든 요소를 html에 추가해 줘야 한다. HTML에 추가 우선 추가될 기준점을 고른 후 기준점의 자식으로 추가 해주면 페이지에 정상적으로 렌더링되는것을 확인할 수 있.. 2020. 7. 16. DOM - 1 DOM이란 Document Object Model의 줄임말로 JavaScript를 이용해서 엘리먼트의 속성을 생성, 조회, 변경, 삭제 하는 방법을 일컫는다. javaScript를 이용하여 HTML요소에 접근할때는 다음 함수에서 셀렉터 규칙을 이용하여 선택 할 수 있다. document.querySelector document.querySelectorAll 둘의 차이는 규칙에 맞는 처음 만나는 요소를 선택하냐, 규칙에 맞는 모든 요소를 선택하냐 의 차이. 셀렉터 규칙 셀텍터 규칙은 다양하지만 크게 아래와 같이 나열 할 수 있다. 태그 id class 공통규칙 참고할 html 황대성 안녕하세요~ 황대성 저만 댓글 다나요..? 운영자 저도 있습니다. 1. 태그 html의 요소들을 태그로 구분하여 선택할 수 .. 2020. 7. 15. 이전 1 2 3 다음
