공부하는 비오

제너레이터 함수는 일반 함수와 같이 함수의 코드 블록을 한 번에 실행하지 않고 함수 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재시작할 수 있는 특수한 함수이다. 비동기 처리에 유용하게 사용된다. 제너레이터는 이터러블 이면서 동시에 이터레이터인 객체이다. 제너레이터 함수 정의 및 호출 제너레이터 함수는 function* 로 선언하며, 하나 이상의 yield 를 가진다. 제너레이터는 next 메서드를 소유한다. next 메서드를 호출하면, yield를 사용한 지점까지 함수를 실행하고 멈췄다가, 그 다음 호출 시 다음 yield 지점까지 실행한다. (yield는 break point와 같다.) 일반 함수를 호출하면 return문을 반환하지만, 제너레이터 함수를 호출하면 제너레이터를 반환한다. .nex..

JavaScript 2020. 12. 15. 11:13

정규식을 만들어보기 이전에 제일 기본적인 표현을 살펴보자. 정규식은 / 사이에 적는다./여기에적힌단어가정규식/ g는 global로 g가없으면 하나만 선택된다.g가 있으면 해당하는 모든 항목이 선택된다.  예를 들어, /#/g라고하면 모든 #이 선택된다. /#./g#다음 한 글자까지 포함.하지만 해시태그가 몇 글자로 이루어져있는지 알수 없다. /#.+/g# 이후의 모든 글자 선택  정규식의 대괄호 안에 있는 글자들은 그 글자만 포함한다는 뜻./#[해첫익]/g은 # 바로다음 '해, 첫, 익'이 오는 글자만 선택.  ^은 그 글자들을 제외한 다른 글자만 포함한다./#[^해첫익]/g 해, 첫, 익 이외의 다른 단어만 포함된다.  /#[^두익해]+/이렇게 사용하면 # + (두, 익, 해 제외) + 그 이후단어까지..

JavaScript 2020. 12. 12. 22:31

Example: Showing thumbnails of user-selected images function handleFiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; if (!file.type.startsWith('image/')){ continue } const img = document.createElement("img"); img.classList.add("obj"); img.file = file; preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed. const rea..

JavaScript 2020. 11. 26. 10:40

배열의 인덱스 번호를 가져오는 배열메서드이다. 찾는 내용이 배열 안에 있으면 인덱스 번호를, 없으면 -1을 반환한다. indexOf를 사용하면 여러상황에서 코드를 단순화 할 수 있다. - A배열에서 B배열의 요소들을 뺀 배열 가져오기. (Remove multiple values in an array) - 배열의 중복 제거

JavaScript 2020. 11. 12. 10:20

원래 쓰던 방법. 템플릿 리터럴이랑 map을 사용하면 훨씬더 간편하게 코드작성이 가능하다.

JavaScript 2020. 10. 15. 14:07

promise의 메서드를 사용하면 더 쉽게 원하는 결과를 얻을 수 있다. all 여러가지 promise를 동시에 실행시킴. (전부다 실행된 후 완료) Promise.all([promise1, promise2, ... ]); **promise배열 안에 하나의 promise라도 reject되면, promise.all 전체가 reject됨. 이전포스팅에서 했던 🍎 + 🍌 를 출력하기 위해 Promise 메서드인 all을 사용하면 더 간단하게 코드를 짤 수 있다. race 여러 promise 중 제일 먼저 완료(혹은 거절)되는 promise를 받아옴. Promise.race([...promises...]); getApple은 3초, getBanana는 1초일 경우, getBanana가 먼저 호출되므로 결과는 🍌..

JavaScript 2020. 10. 14. 12:14

async async는 일종의 synctactic Sugar이다. (synctactic sugar란 문법적 기능은 그대로이나 읽기 편리한 코드.) Promise를 적지않아도, 함수 앞에 async를 붙이면 Promise를 사용한 것과 같은 결과를 준다. 왼쪽의 Promise를 사용한 코드와 오른쪽의 async를 사용한 코드의 결과가 동일하다. async를 사용할 경우, 좀더 적은양의 코드를 사용할 수 있다. await await은 async가 있을때에만 사용 가능하다. await 은 뒤쪽의 코드가 실행된 후, 그 다음코드가 실행되게 한다. 즉 비동기적인 코드들이 순서대로 실행될 수 있도록 도와준다. await은 비동기적 코드를 순서대로 읽기 편하게 만들어줌으로써 가독성을 높여준다. await을 사용하지 ..

JavaScript 2020. 10. 13. 23:25

Promise 비동기 처리에 사용되는 객체. 비동기를 처리할 때 사용. Promise는 pending(new Promise()메서드 호출), fulfilled(resolve 호출), rejected(reject 호출)의 3가지 상태를 가진다. **주의** Promise를 만들엇을 때, executor(resolve나 reject)는 바로 실행된다. new Promise (resolve, reject){ ... } resolve와 reject를 인자로 가짐. promise의 사용 promise .then( resolve의 콜백함수(value == resolve의 반환값) ) .catch( reject의 콜백함수(error == reject의 반환값) ) .final( fn{resolve와 reject에 상..

JavaScript 2020. 10. 13. 20:45