- 노션특강
- HTML, CSS, DOM
- Iterable, Iterator, Generator✒ 노션특강
노션은 위키와 같이 잘 정돈된 트리형태로 현업에서 많이 쓰인다.
직관적인 인터페이스로 사용하기도 쉬워보이고, 그럴듯하게 꾸미기 쉬워보이는데, 이래서 사람들이 노션병에 걸리는구나 싶었다.
✒ HTML, CSS, DOM
아는 얼굴들이 나올 때마다 반갑다.
그치만 아는 얼굴인데도 서먹서먹한 사이이거나, 처음 알게된 것들도 있었다.
- Normalize.css : 브라우저마다 미묘하게 다른 스타일을 통일시켜줌
- codepen.io : css스타일을 모아둔 곳. css 배우기 좋음
- 돔은 조작할때마다 렌더링을 해야하는데, 이를 해결하기 위해 가상돔(Virtual DOM)이 만들어졌다.
✒ Iterable, Iterator, Generator
스펠링이 틀리진 않았을까 몇 번씩 확인할 정도로, 난생 처음보는 것들이었다. 이름은 뭔가 불친절했지만, ES6의 소중한 for(let .. of ..)를 만들어주는 것들이라고 하니 좀 알아가고 싶은 마음이 생겼다.
✏ Iterable
iterable프로토콜은 반복가능한 객체를 나타낸 프로토콜로, Array, Map, Set, String 등 for(let .. of)로 반복 가능한 객체들을 반복가능(Iterable)하다고 한다.
이들은 [Symbol.iterator]라는 키를 가지는데 이 키에 가진 객체를 반환하는 next라는 함수를 통해 값을 반환한다.
const iterator = [1, 2, 3][Symbol.iterator]();
iterator.next().value; // 1
iterator.next().value; // 2
iterator.next().value; // 3
iterator.next().done; // true✏ Iterator
iterator프로토콜은 반복가능한 객체를 흐름대로 처리하는 프로토콜을 말한다.
iterator(반복기)와 generator(생성기)는 for...of의 루프동작 메커니즘 제공을 제공하며, iterator는 위에서 했던 것 처럼 두개의 속성(value, done)을 반환하는 next()를 사용하여 iterator protocol을 구성한다.
계속해서 값을 반환하는 것이, 부셔버리고 싶었던 트라이 과제에서 노드값을 반환했던 것과 비슷했다. 아마 같은 로직일 것 같다.
✏ generator functions
generator functions: 실행이 연속적이지 않은 함수.
function* 이라는 특이한 문법을 사용하는데, 함수 내부에 어떤 코드도 실행되지 않고 generator만 반환한다.
generator는 generator를 실행,재개하는 next와, 실행을 멈춘고 뒤에 오는 표현식을 반환하는 yield라는 함수를 가진다.
generator에서 next 메소드를 호출함으로서 어떤 값이 소비되면 generator 함수는 yield 키워드를 만날 때까지만 실행하는데, 그래서 아래와 같은 함수도 가능하다.
function* infinity(i=0){
while(true) yield i++;
}
while문이기 때문에 무한히 실행되어 프로그램이 멈출것이라 생각하지만, 호출할 때만(yield를 만날 때 까지만) 실행되기 때문에 무한히 실행하지만 무한히 실행하지 않는다. 말은 이상하지만 무슨 의미인지는 알 것 같지 않은가?
참고사이트: JavaScript Generator 이해하기 ES6의 심볼, 이터레이터, 제네레이터에 대해 알아보자
여러 특강이 있던 날이라 시간이 조금 빠듯한 감이 없지않아 있었지만, 강의가 그렇게 어려웠던 것은 아니라 다행이었다. Iterable, Iterator, Generator는 아직 감이 잡힐랑 말랑 하지만, 앞으로 배울 것이 많다고 하니 보다보면 이해될 것이라 믿는다. 제발.
