오늘 공부한 내용 💻
-
Todo-list Drag & Drop
-
BEM
-
이벤트 루프 - 어쨌든 이벤트 루프는 무엇입니까?
CSS 방법론 - BEM
- BEM
BEM은 Block, Element, Modifier을 뜻한다. 그리고 이 3가지로 이름을 짓고 각각은 “__”와 “—”로 구분한다.
.header__navigation--navi-text {
color:blue;
}위 코드에서 header는 Block, naviagtion은 Element, navi-text는 Modifier이다.
BEM은 기본적으로 ID를 사용하지 않으며, class만을 사용한다.
'어떻게 보이는가'가 아니라 '어떤 목적인가'에 따라 이름을 지어야한다.
- Block / Element / Modifier
- Block
재사용이 가능한 기능적으로 독립적인 페이지 컴포넌트.
어딘가에 종속되지 않고 여기저기 재사용이 가능한 요소를 말한다.
블럭은 블럭을 감쌀 수 있다. - Element
블럭을 구성하는 단위
자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭과 달리 의존적임.
- Modifier
블럭이나 엘리먼트의 속성을 담당.
생긴게 다르거나 조금 다르게 동작하는 블럭 / 엘리먼트를 만들 때 사용한다.
- Block
어려웠던 내용 🤢
이벤트 루프
어쨌든 이벤트 루프는 무엇입니까? | Philip Roberts | JSConf EU
를 보고 내용을 정리하여 작성 합니당 😎
- 콜 스택
자바스크립트는 싱글스레드 프로그래밍 언어이다 !
그 말인 즉슨, 한 번에 하나의 콜 스택만을 가진다는 말.
결론은 ? 하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다!
하나의 스택에서 할 일이 쌓이고, 실행되어 비워진다는 뜻이다.
하지만 스택에는 크기에는 한계가 있으므로 ,,,
function foo() {
return foo();
}
foo();위와 같은 함수 foo를 실행하면 호출이 반복해서 계속 스택에 쌓이고, 그렇게 최대 크기가 되면 오류가 난다. ('스택이 날아간다 !' 라는 표현을 사용함)
- 블로킹
블로킹이란, 정확한 정의가 있는 단어는 아니고 느리게 동작하는 코드를 지칭한다.
그럼 느리게 동작한다는 것은 무엇일까?
느린 동작이 스택에 남아있으면 그 코드는 느리게 동작한다. 그리고 보통 이런 것을 블로킹이라고 한다.
콜 스택이 비어있기 전까지 다른 동작을 하지 못하니, 네트워크 요청과 같은 블로킹이 발생했을때 그냥 끝까지 기다려야 한다.
이런 문제를 해결하기 위해서 비동기적 작업이 필요한 것이다. 😅
- 브라우저
JS는 싱글스레드 언어인데 어떻게 비동기 작업을 할 수 있나?
👉 그 답은 브라우저에 있다.
자바스크립트 엔진은 힙영역과 스택영역으로 구성되어 있으며, 이 부분은 분명히 싱글스레드이다. 따라서 함수 호출이 생길 때마다 하나의 스택에 일렬로 쌓이이며 나중에 쌓인 함수부터 차례대로 처리된다.
자바스크립트 엔진의 또 다른 특징은 setTimeout, DOM, HTTP 요청 관리코드 들이 존재하지 않는다는 것이다. 그러면 어떻게 setTimeout과 같은 요청이 비동기적으로 처리될까?
브라우저가 web API 같은 것들을 지원하여 단순 런타임 이상을 의미하기 때문이다.
- 비동기 콜백
비동기 콜백들은 실제로 어떻게 동작될까?
console.log('hello');
setTimeout(function() {
console.log('there');
}, 5000)
console.log('JSConfEU');
위와 같이 hello -> JSConfEU -> there 순으로 출력된다.
과정을 설명하자면
-
main() 함수가 실행되고 그 위에 log('hello')가 쌓인다.
-
log('hello')가 실행되면 스택에서 사라진다.
-
setTimeout 역시 스택에 쌓인다. 이 때 setTimeout은 비동기 함수이므로 브라우저의 API인 timer를 호출하여 5초의 카운트다운을 시작하고 setTimeout은 스택에서 사라진다.
-
main()은 여전히 남아있고 그 위에 log('JSConfEU')가 쌓였다가 실행되며 사라진다.
-
main()의 모든 코드가 실행 되었으므로, main() 함수도 스택에서 사라진다.
-
스택은 비어있는 상태가 되고 timer가 종료되면 log('there')는 콜백 큐로 이동한다.
-
log('there')는 스택이 비어있다면 이벤트 루프에 의해 콜 스택으로 올라간다.
마지막으로 log('there')이 실행되고 콜 스택이 비워지며 끝나게 된다.
아휴 ,,, 복잡해 ,,,
- 이벤트 루프
어쨌거나 결론적으로 이벤트 루프의 역할은??
콜 스택과 태스크 큐를 주시하는 역할을 하는것,
스택이 비어있으면 큐의 첫번째 콜백을 스택에 쌓아 효과적으로 실행할 수 있게 해준다 !
더 공부할 내용 📃
- 생각이 나지 않는다 ,,,
- 머릿속에 너무 많은것이 들어갔기 때문이겠죠 ,,,
느낀점 👀
브라우저에서 비동기 작업이 어떻게 이루어지는지 이해하는데 많은 도움이 되었다.
1주차인가 2주차에 이벤트루프와 비동기에 대해 다뤘던 기억이 있는데,
사실 그땐 이해 못했었다 ㅋ
지금까지는 자바스크립트는 싱글스레드 기반이고, 그렇지만 비동기가 가능하다! 라고만 외우고 있었는데 브라우저의 구조에 대해 알게 된것이 비동기 콜백의 과정을 이해하는데 중요한 역할을 해준거같다.
참고 사이트 🙄
