| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- Git
- django rest framework
- API
- c++
- 알고리즘 풀이
- MAC
- java
- AWS
- Django
- django ORM
- js
- web
- django widget
- DRF
- 파이썬
- 파이썬 알고리즘
- Algorithm
- javascript
- 장고
- 알고리즘 문제
- PYTHON
- HTML
- 백준
- 알고리즘
- Baekjoon
- form
- 알고리즘 연습
- react
- CSS
- es6
- Today
- Total
목록웹프로그래밍 (163)
수학과의 좌충우돌 프로그래밍
이번 포스팅에서는 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 객체를 만듭니다. 글로만 봐서는 어려울 수 있으니 예제를 통해 살펴보도록 합시다..
Template Literal Template Literal 은 문자열과 변수가 합쳐진 것을 말합니다. 이번에는 Template Literal 의 개선된 사항에 대해서 알아보도록 하겠습니다. 다음 예시를 살펴봅시다. const intro = (name="anonymous") => "My name is " + name; console.log(intro("minsung")); // My name is minsung 결과를 출력하기 위해서 문자열과 변수를 합쳐주는 부분이 문자와 변수가 많이질수록 가독성을 해칠 위험이 있습니다. 따라서 `(GRAVE ACCENT) 와 $, {} 를 사용해줍니다. `` 로 묶인 부분은 string 으로 인식되고 ${ } 안은 변수로서 인식합니다. const intro = (nam..
Arrow Functions arrow function 은 기존 자바스크립트에서 함수의 모습을 개선한 것 입니다. 사용 방법을 살펴보도록 합시다. 우선 arrow 는 => 을 의미합니다. 기존의 function 이라는 키워드를 없애고 이를 arrow 로 대체한 것이죠. 우선 arrow function 을 사용하지 않은 기존의 예시부터 살펴보겠습니다. const nameList = ["minsung", "sungbin"] const nameLength = nameList.map(function(name){ return name.length; }) console.log(nameLength); // [7,7] 이를 arrow function으로 개선하면 다음과 같습니다. const nameLength = na..
Let and Const let 과 const 에 대해서 알아보도록 하겠습니다. 이 둘은 변수를 선언할 때 사용하게 되는데 이전에는 var 를 사용하였습니다. var 로 변수를 선언하게 된다면 다음과 같이 변수의 overwrite 가 가능해집니다. var name = "minsung"; name = "sungbin"; 이렇게 var 를 사용하게 되면 큰 어플리케이션을 만들거나 협업을 할 경우 문제가 생길 수 있습니다. 다른 개발자가 다른 파일에서 또는 같은 파일인데 다른 위치에서 작업을 할 경우 name 이라는 변수명을 또 사용할 수 있게 되고 의도치않게 name 은 sungbin 으로 덮어쓰게 됩니다. 따라서 변수가 변하는 걸 막기 위한 매커니즘이 필요했고 const 가 등장하였습니다. const 는 ..
javascript 를 공부하려고 보니 ES6 라는 말이 많이 등장해서, 중요하다고 해서, 이에 대해서 정리해보고자 합니다. ES 는 무엇인가 ES 는 ECMAScript 의 약자입니다. 그리고 숫자 6은 여섯번째 ES 라고 생각하면 되겠습니다. 그렇다면 ES, ECMAScript 는 무엇일까요? 위키백과를 보면 ECMAScript 는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어입니다. 자바스크립트를 표준화하기 위해서 만들어졌으며 꼭 자바스크립트가 아니더라도 어도비 플래시를 사용하는 소프트웨어에서 사용하는 액션스크립트, MS 사의 인터넷 익스플로러에 쓰이는 J스크립트 등 다른 구현체들 역시 포함하고 있습니다. ES 가 등장하게 된 배경을 살펴보면 1990년대..