230217 30분 TIL

1. 이터러블(iterable)

이터러블이란 자료를 반복할 수 있는 객체를 말하는 것이다. 

우리가 흔히 쓰는 배열 역시 이터러블 객체이다 .

iterable

정의 : 이터레이터를 리턴하는 [Symbol.iterator]() 메서드를 가진 객체

배열의 경우 Array.prototype 의 Symbol.iterator 를 상속받기 때문에 이터러블이다. 문자열도 마찬가지

iterator

정의 : {value : 값 , done : true/false} 형태의 이터레이터 객체를 리턴하는 next() 메서드를 가진 객체.

next 메서드로 순환 할 수 있는 객체다.

[Symbol.iterator]() 안에 정의 되어있다.

---

2. 제너레이터 

• ES6에 도입된 제너레이터 함수는 이터러블 함수를 생성하는 함수
• 이를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블 구현 가능 
• 비동기 처리에 유용하게 사용 
• 함수의 코드 블록을 한 번에 실행하지 않는 일반함수와 달리 함수 코드 블록 실행을 일시 중지했다가 필요한 시점에 재시작할 수 있는 특수한 함수 
• 일반 함수를 호출하면 return 문으로 반환값을 리턴하지만 제너레이터 함수를 호출하면 제너레이터를 반환한다
• 이 제너레이터는 이터러블이면서 동시에 이터레이터인 객체이다. 

1) 정의 

제너레이터 함수는 function* 키워드로 선언한다. 그리고 하나 이상의 yield 문을 포함한다.

 

---

3. script async와 defer의 차이

1) head안에 script 태그 포함 

html 을 파싱하다가 script 태그가 보이면 html 파싱을 멈추고 필요한 JS 파일을 서버에서 다운받아 실행한 다음에 다시 html 파싱을 재개한다. 이때 자바스크립트 파일이 큰 경우 페이지 로드 되는데 많은 시간 소요되기 때문에 좋지 않다. 

 

2) body안 끝 부분 script 추가 

html을 쭉 파싱해서 페이지가 준비된 다음에 script 태그를 만남.

사용자가 html 컨텐츠를 빨리 본다는 장점이 있지만 자바스크립트 의존성이 큰 경우, 사용자가 정상적으로 웹페이지를 보지 못함 

 

3) head + async 

브라우저가 html을 파싱하다가 script 태그 안의 async를 발견 시 병렬로 다운로드 명령만 하고 다시 파싱을 계속 함.

JS 다운로드가 완료되면 그때 html 파싱을 멈추고 JS를 실행한다.  이후 JS가 완료시 나머지 html을 파싱함

 

단점)

1. 이는 JS 다운로드 속도를 절약할 수는 있지만 html이 파싱 전에 JS가 실행되기 때문에 DOM 요소 조작 시 위험함

2. html 파싱 완료 전에 JS 실행을 위해 멈추기 때문에 사용자가 페이지를 보는데 시간이 걸릴 수 있다.

3. 실행의 순서가 다운로드 완료 시점으로 결정되므로 실행 순서가 중요한 스크립트들에 async 사용에 유의해야함 

 

4) head + defer 

JS파일을 병렬로 다운로드 명령시키고 나머지 html을 끝까지 파싱하게 한 후 다운로드된 JS 파일이 실행 

 

참고자료: https://velog.io/@cherrycock/script-async%EC%99%80-defer%EC%9D%98-%EC%B0%A8%EC%9D%B4

---

4. CSS Preprocessor 란?

 

웹에서는 표준 CSS만 동작할 수 있음 

하지만 CSS는 불필요한 선택자 과용, 연산기능 한계, 구문의 부재 등으로 프로젝트 규모가 커질 수록 불편함이 커짐

 

이때 CSS Preprocessor (전처리기) 사용.

대표적인 것으로 Sass(Scss), Less, Stylus 등이 있음 

 

전처리기로 먼저 작성 후 표준 CSS로 컴파일해서 동작시킴  

 

참고자료: https://heropy.blog/2018/01/31/sass/#sasswa-scssneun-caijeomeun-mweongayo