| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |
- HTML
- react
- API
- Algorithm
- c++
- 알고리즘
- Git
- 알고리즘 풀이
- MAC
- PYTHON
- form
- 파이썬
- django widget
- js
- web
- 백준
- Baekjoon
- django rest framework
- DRF
- java
- Django
- 알고리즘 문제
- 알고리즘 연습
- django ORM
- es6
- AWS
- 장고
- 파이썬 알고리즘
- javascript
- CSS
- Today
- Total
목록웹프로그래밍/ES6 (14)
수학과의 좌충우돌 프로그래밍
Symbol symbol 은 새로운 데이터 타입입니다. 하지만 실제로 많이 사용되지는 않으니 간단히 알아보도록 하겠습니다. symbol 의 첫번째 특징은 unique 입니다. symbol 객체를 만들면 이는 다른 모든 것과는 다른 유일한 것이 됩니다. const s1 = Symbol(); const s2 = Symbol(); console.log(s1 === s2); // false symbol 객체를 만들 때 description 을 넣을 수 있습니다. 하지만 이는 해당 symbol을 설명하기 위할 뿐 값으로서 사용할 수 없습니다. const s1 = Symbol("first"); const s2 = Symbol("second"); console.log(s1); // Symbol(first) conso..
generator generator 는 중간에 멈출 수 있는 함수입니다. 일반적인 함수를 생각해보면 함수를 실행함과 동시에 함수의 처음부터 끝까지 한 번에 실행합니다. 하지만 generator 함수는 일시적으로 정지할 수 있고, 이를 다시 시작할 수 있습니다. 이를 사용하기 위해서는 function 뒤에 * 를 붙여주면 함수 내부에서는 yield 를 사용할 수 있습니다. 함수가 yield 를 만나게 되면 해당 함수는 일시적으로 정지되고 yield 뒤에 인자를 반환합니다. 일반적인 함수의 return 과 비슷한 역할을 하고 있습니다. function* fruits() { yield "apple"; yield "banana"; yield "melon"; yield "strawberry"; } 해당 함수를 찍..
Proxy Proxy 객체는 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 새로운 행동을 정의할 때 사용합니다. proxy 는 target 과 handler 두 개의 인자를 받습니다. target 으로는 새로운 행동을 정의하고 싶은 object 를, handler 에서는 target 의 행동을 정의합니다. const user = { name: "minsung", age: 24, school: "UOS" } const userFilter = {}; const filteredUser = new Proxy(user, userFilter); proxy 객체 filteredUser 는 target 의 필드를 참조가능합니다. 이 뿐만 아니라 target 과 동일하게 사용이 가능합니다. conso..
Class class 의 기본적인 형태를 알아봅시다. class 의 개념적인 부분은 생략하고 javacript 에서 어떻게 사용되는지 위주로 다루도록 하겠습니다. 생성자는 constructor 를 통해 구현가능하고 instance 를 생성할 때는 new 를 사용하여 정의합니다. class User { constructor(username, password){ this.username = username; this.password = password; } introduce(){ console.log(`My name is ${this.username}`); } } user = new User("minsung","1234"); user.introduce(); // My name is minsung 상속 기존에..
이번 포스팅에서는 async 와 await 에 대해서 알아보도록 하겠습니다. 이를 제대로 이해하기 위해서는 저번 포스팅을 먼저 이해해야 합니다. https://ssungkang.tistory.com/entry/ES6-Promises-then-catch-all-race-finally [ES6] Promises - then, catch, all, race, finally 이번 포스팅에서는 js 의 Promises 에 대해서 알아보도록 하겠습니다. javascript 의 비동기성 사람은 한 번에 두 가지 일을 할 수가 없습니다. 흔히들 말하는 멀티태스킹도 실제로는 한 번에 두 가지 일을 동시에.. ssungkang.tistory.com 왜냐면 이들을 Promise 의 업데이트한 것이기 때문입니다. 업데이트를 ..
이번 포스팅에서는 js 의 Promises 에 대해서 알아보도록 하겠습니다. javascript 의 비동기성 사람은 한 번에 두 가지 일을 할 수가 없습니다. 흔히들 말하는 멀티태스킹도 실제로는 한 번에 두 가지 일을 동시에 하는 것이 아니라 빠르게 스위칭해서 동시에 일어나는 것 처럼 보일 뿐입니다. 그에 비해 컴퓨터는 동시에 두 가지 일을 할 수 있습니다. 두 가지 뿐만 아니라 그 이상도 가능하죠. 영상을 녹화하며 충전을 하고 오디오를 녹음하고 사용자로 부터 입력을 받고 시간이 바뀌는 것을 기다리는 것이 가능합니다. 자바스크립트도 이와 같습니다. 동시에 많은 일을 하는게 가능합니다. 한 쪽에서 다른 일을 하고 있어도 프로그램은 계속 실행이 됩니다. 예시를 통해 알아보도록 하겠습니다. 다음과 같이 fet..
간단하게 반복문에 대해서 알아보도록 하겠습니다. 우선 기존의 js 에서 반복문은 다음과 같습니다. const fruits = ["apple", "banana", "melon", "strawberry"] for (let i=0;i console.log(`${index} 번째 원소 :${current}`); fruits.forEach(printFruit); for of for of 는 아래와 같이 사용합니다. for (const fruit of fruits){ console.log(fruit); } 문자열에서도 가능 뿐만 아니라 여러 iterable 한 객체에 대해서 모두 가능합니다. 문자열도 마찬가지죠. for (const letter of "minsung"){ console.log(letter); } /..
Spread Spread 는 변수를 가져와서 풀어헤치고 전개해주는 것을 말합니다. unpacking 이라고 하죠. Spread 를 사용하기 위해서 ... 을 사용합니다. const fruits = ["apple", "banana", "melon", "strawberry"]; console.log(fruits); console.log(...fruits); // [ 'apple', 'banana', 'melon', 'strawberry' ] // apple banana melon strawberry 이는 두 개의 array 를 합칠 때도 유용하게 사용합니다. Spread 를 사용하지 않아도 배열을 합치는 방법은 많겠지만 코드 길이나 가독성 면에서 Spread 가 상당히 우수합니다. const fruits =..
Destructuring 의 뜻은 비구조화 입니다. Destructuring 는 object 나 array, 그 외의 여러 요소들 안의 변수를 바깥으로 꺼내서 사용하는 것을 의미합니다. 여러 요소들에 대한 Destructuring 을 알아보도록 하겠습니다. Object Destructuring 우선 Object Destructuring 입니다. Destructuring 을 사용하기 전의 코드를 보도록 하겠습니다. settings 안에 여러 설정 중에서 follow 에 대한 값을 확인하기 위해서는 다음과 같이 하나씩 순차적으로 타고 들어가야 했습니다. const settings = { notifications: { follow: true, alerts: true }, color: { theme: "dark..
Array Method array method 역시도 ES6 에서 많이 업데이트 되었습니다. 이들에 대해서 알아보도록 하겠습니다. Array.of Array.of() 는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 Array 인스턴스를 만듭니다. const fruit = Array.of("apple","banana","strawberry"); console.log(fruit); // [ 'apple', 'banana', 'strawberry' ] Array.from Array.from() 은 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해새로운 Array 객체를 만듭니다. 글로만 봐서는 어려울 수 있으니 예제를 통해 살펴보도록 합시다..