웹(FE) 기본 이론 모아보기

date

Feb 18, 2023

slug

front-end-web-core-post

tags

Front-end

keywords

summary

type

Post

Last updated

Mar 2, 2023 07:27 AM

Created time

Feb 17, 2023 11:55 PM

💡

이벤트루프와 콜스택의 동작 방식 브라우저는 js엔진이 코드를 해석해서 실행한다 브라우저는 싱글 스레드로 구성되어 있다 js는 싱글 스레드의 한계를 극복하기 위해 비동기적으로 실행되고 비동기로 동작되는 것은 Web APIs가 있다 (AJAX, Timeout, 웹소켓, 콜백함수, promise, async/await 등) 코드를 위에서부터 순차적으로 콜스택에 넣는다 브라우저는 항상 콜스택을 비우고자 한다 콜스택에 들어온 애 중에 Web API에 해당하는 아이들은 비동기로 별도로 해석되어 콜스택에서 빼놓는다 이후 남은 코드들도 마저 콜스택에 담아서 처리한다 Web API에서 종료되어 실행이 완료되었다면 Callback Queue에 완료된 순서대로 담아둔다 이벤트루프는 항상 콜스택과 콜백큐를 바라보고, 콜스택이 비었을때마다 콜백큐 아이들을 하나씩 넣어준다 + 변수 같은 것들은 메모리 힙에 저장되어서 필요할때 참조(호출)된다

💡

콜백을 활용하여 비동기 호출 순서 제어되는 원리 js가 싱글스레드의 한계를 극복하기 위해 동작되는 비동기 방식이 도리어 코드를 작성할 때에는 혼란을 야기하게 되었다 이런 혼란을 방지하기 위해 콜백으로 동기적으로 동작되도록 하면 된다 다만, 이렇게 콜백으로 항상 보장하도록 코드를 작성하면 콜백지옥에 빠지게 된다. 그래서 es6부터는 promise와 async await이라는 개념이 등장하였다

💡

js의 동기와 비동기 프로그래밍의 등장 배경 및 원리 브라우저, js엔진은 싱글스레드이다 콜스택: 동기로 실행 Web APIs: 대부분 비동기로 실행 콜스택은 하나지만, 여러개 인 것 처럼 사용하게 해주는 것은 Web APIs 덕분이다

💡

이벤트 버블링이란? 이벤트의 특성이므로, 필수적인 현상이 아니라서 의도적으로 중단시켜야 할 때도 있음 부모에게 클릭 이벤트를 할당해놓았다면, 자식을 클릭해도 부모의 클릭 이벤트가 동작된다 위와 같은 원리로 동작될 수 있는 이유가 바로 이벤트 버블링 특성때문이다 가장 안쪽의 자식에 대한 이벤트가 발생하면, document 객체를 만날 때 까지 같은 이벤트가 동작한다 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 한다 단, 모든 이벤트가 버블링되는 것은 아니고 “거의” 모든 이벤트가 해당된다 (focus 등은 안됨) 이벤트가 발생했을 때, 해당 이벤트의 target에는 발생하게된 원인 요소가 잡힌다 currentTarget은 현재 요소가 실행중인 요소가 잡힌다 event.stopPropagation은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작되는건 못막는다 event.stopImmediatePropagation을 사용하면 해당 요소에 할당된 다른 모든 핸들러도 막는다

💡

이벤트 캡쳐링이란? 사실 돔의 표준적인 이벤트는 거의 캡쳐링 → 타겟페이즈 → 버블링 순으로 일어나게 된다 즉, 상위 태그(객체)에서 하위 태그로 들어갔다가 다시 돌아나오는 순서인 것이다 addEventListener에 두번째 인자로 옵션을 넣을 수 있는데, 그 곳에 capture: true 값을 부여하면 된다 이벤트를 제거할때에도 마찬가지다

💡

실행 컨텍스트란? 한마디로 정의하자면, 식별자 결정을 위해 더욱 효율적으로 동작되기 위한 수단(객체) 실행 컨텍스트는 순전히 자바스크립트 스펙을 위한 메커니즘이다 실행 컨텍스트를 이해 하면 scope, hoisting, closure 등 이해할 수 있다 (반대도 마찬가지) Record로 js 호이스팅 이해가능 Outer로 매번 함수 호출시 사다리를 놓고 해당 값이 없을 경우 타고 호출한 곳으로 내려감

기타

polyfill은 사용자의 범위가 넓은 서비스에서 매우 중요함

하지만, 무분별한 polyfill적용은 웹을 무겁게 만들어요

따라서, user agent로 사용자의 브라우저를 구분해서 적용하는 커스텀 폴리필을 구현하는것이 좋다