| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 29 | 30 | 31 |
- 파이썬
- Algorithm
- HTML
- react
- form
- 알고리즘 문제
- django ORM
- django widget
- API
- PYTHON
- AWS
- 알고리즘
- js
- Django
- 알고리즘 풀이
- 장고
- MAC
- DRF
- 알고리즘 연습
- web
- javascript
- c++
- 백준
- django rest framework
- CSS
- 파이썬 알고리즘
- Git
- es6
- Baekjoon
- java
- Today
- Total
목록es6 (13)
수학과의 좌충우돌 프로그래밍
일반적으로 javascript 로 API 데이터를 가져오기 위해서 fetch 와 axios 중 하나를 사용합니다. 둘 다 장단점이 존재하여 우월을 가리기 힘들지만 이번 포스팅에서는 axios 를 사용하여 네트워크 통신을 하도록 하겠습니다. API 로는 YTS 에서 만든 영화 API 를 사용하도록 하겠습니다. https://yts.lt/api/v2/list_movies.json Axios axios 를 사용하기 위해서는 설치와 import 가 필요합니다. > npm install axios // src/App.js import axios from "axios"; // 생략 react 에서 API 데이터를 가져오는 부분은 componentDidMount() 메소드에서 구현을 합니다. state 에 movie..
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 =..
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 객체를 만듭니다. 글로만 봐서는 어려울 수 있으니 예제를 통해 살펴보도록 합시다..