2022-08-22

김범주·2022년 8월 23일
0

FE

목록 보기
1/1

FE 심화코스 첫날은 모의면접 준비가 메인이었다.
어렴풋이 알던 내용도 있었고 완전 처음 듣는 질문도 있어서 정리하면서 새로운 내용을 알 수 있었다.

  1. CSS link 태그를 head 태그 사이에 위치시키는 이유
    브라우저는 HTML을 다운로드 받으면 DOM을 만들고, CSS를 다운로드 받으면 CSSOM(CSS Object Model)을 만든다. HTML은 한 줄씩 읽으면서 DOM 트리를 생성하고, CSS는 파일 앞부분에서 작성된 CSS 속성이 파일 뒷부분에서 재정의될 수 있기 때문에 코드를 다 읽고나서 CSSOM 트리를 생성한다. DOM과 CSSOM이 모두 생성되면 이 둘을 합쳐 렌더 트리를 생성한다.
    HTML을 파싱하는 중간에 link 를 만나면 link 파싱은 병렬적으로 수행되어 HTML 파싱과 동시에 진행된다. 다만, CSS 규칙 없이 렌더링을 했다가 CSS를 적용하면서 다시 렌더링하는 비효율적인 리소스 소모를 방지하기 위해서 CSSOM이 완성되기 전에는 렌더링이 진행되지 않는다( Rendering Blocking ).
    따라서 head 태그 안에 CSS link 를 삽입하면, HTML과 CSS가 병렬적으로 파싱되어 CSSOM을 더 빠르게 완성할 수 있다. 따라서 사이트에 렌더링 되는 시간도 빨라진다.
    하지만 link 를 HTML 중간이나 마지막에 삽입하면, link 이전의 요소들을 렌더링하다가 link 를 만난 후에 CSSOM을 생성하고, 여기에 맞춰 다시 렌더링을 한다. 이렇게 되면 첫번째 렌더링을 할 때 사용자에게 스타일되지 않은 HTML 요소를 보여주게 되어 UX에 좋지 않고, 두번째 렌더링을 할 때 HTML 요소들이 재렌더링 되기 때문에 낭비가 심하다. 또한 link 의 삽입이 늦어진 만큼 CSSOM 생성도 늦춰져 렌더링 완료 시간이 늦춰진다.

  2. JS script 태그를 body 태그가 끝나기 직전에 위치시키는 이유
    브라우저는 script 태그를 만나면 HTML 파싱을 잠시 멈추고, script 를 다운로드하고 실행한다( Parsing Blocking ). 이 경우, 사용자에게 화면이 보여지기까지 시간이 늦어진다. 또한, script 가 DOM을 조작하는 경우, HTML요소를 파싱하기 전, 즉 DOM이 생성되기 전에 script 를 불러오면 DOM을 조작하는 것이 불가능해진다. 따라서 HTML 요소를 모두 파싱하고 자바스크립트 파일을 다운로드하고 실행할 수 있도록 script 태그를 body 태그 맨 뒤에 두는 것이 바람직하다.

script, script async, script defer 태그들의 차이점은 무엇인가요?

  1. script 을 만나면, HTML 파싱을 중단하고 해당 스크립트를 즉시 다운로드 받고 실행한다. 스크립트 실행이 완료되면 HTML 파싱을 재개한다.
  2. script async 는 HTML을 파싱하는 동시에 해당 스크립트를 다운로드 받는다. 그리고 HTML 파싱이 완료되지 않았어도 스크립트를 실행할 수 있을 때 즉시 실행한다.
  3. script defer는 HTML을 파싱하는 동시에 해당 스크립트를 다운로드 받는다는 점에서 script async와 동일하지만, HTML 파싱이 끝나야 스크립트를 실행한다. 스크립트가 여러개인 경우, 스크립트는 페이지에 나타나는 순서대로 실행된다. 스크립트가 DOM에 의존적인 경우 유용하게 사용된다. 또한 HTML이 파싱된 후 스크립트가 실행된다는 점에서 script 태그를 body 태그가 끝나기 직전에 위치시키는 것과 거의 비슷한 효과를 가져온다.

시맨틱 태그(sementic tag) 에 대해 설명하세요.

  1. 시맨틱 태그는 자신의 목적과 의미를 브라우저와 개발자에게 명확하게 설명하는 태그를 말한다. 가령 div 나 span은 자신이 무엇을 담고 있는 컨텐츠인지 그 자체로 설명하지 못하는 반면, form, table 은 자신이 각각 폼과 표를 담당하는 컨텐츠라고 설명한다.
    '어떻게 보여져야 하는가'는 CSS의 영역이며, HTML은 채워질 데이터를 나타내도록 코딩해야 한다. 따라서 그 자체로 데이터를 나타내는 시맨틱 태그를 적절히 사용하는 것이 중요하다.

  2. 시맨틱 태그를 사용할 때의 장점은 다음과 같다.
    검색 엔진은 시맨틱 태그를 페이지의 검색 랭킹에 사용할 중요한 지표로 활용한다.
    시각 장애인을 위한 화면 판독기로 페이지를 탐색할 때, 시맨틱 태그가 중요한 지표로 활용된다.
    의미 없는 div를 클래스와 함께 무더기로 사용하는 것보다, 적절한 시맨틱 태그를 사용하는 것이 개발할 때 더 편하다.

웹팩과 바벨의 역할에 대해서 설명하세요.

웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러이다. 모듈은 우리가 작성한 자바스크립트 소스코드와 우리가 사용한 라이브러리들이다. 번들러는 의존성 있는 모듈을 하나의 파일로 통합시켜주는 도구이다. 우리 코드와 라이브러리들을 하나로 통합시키는 모듈 번들러가 필요한 이유는 다음과 같다.

  1. 웹페이지에서 자바스크립트 파일을 여러번 다운로드 받지 않게 하기 위해
    웹 페이지를 로드할 때마다 각각의 모듈을 따로 다운로드 받는다면 네트워크 병목 현상이 일어날 수 있다. 그래서 각기 다른 자바스크립트 파일을 하나로 만들어, 한번에 다운로드 받을 수 있게 한다.

  2. 모듈 단위로 개발할 수 있게 해준다.
    만약, 자바스크립트 파일 하나에 모든 코드를 담는다면 유지보수 하기 굉장히 어려울 것이다. 우리는 기능에 따라 코드를 모듈화 하여 우리가 이해하기 쉽도록 코드를 구분해 가독성과 유지보수성을 효율적으로 개선할 수 있다. 그리고 코드를 배포할 때는 자바스크립트 파일을 한번에 다운로드 할 수 있도록 웹팩이 코드를 하나로 합쳐주기 때문에, 모듈화로 인한 네트워크 병목 현상을 걱정할 필요가 없다.

바벨은 자바스크립트 트랜스파일러이다. 트랜스파일러는 하나의 언어로 작성된 소스코드를 비슷한 수준의 다른 언어로 변환하는 것을 의미한다.

  1. 구형 웹 브라우저에서도 사용할 수 있게 하기 위해
    자바스크립트는 다양한 웹브라우저에서 사용되며, 웹 브라우저에서도 각기 다른 자바스크립트 엔진을 사용한다. 이 엔진들은 각기 다른 자바스크립트 버전을 지원한다. 가령 V8 엔진은 ES7을 지원하고, 차크라 엔진은 ES5까지만 지원한다고 가정하자. 만약 우리가 ES7 문법을 사용한다면 차크라 엔진은 우리가 작성한 자바스크립트 코드를 읽지 못하고 에러를 뱉어낼 것이다.
    모든 자바스크립트 실행 환경에서 정상적으로 동작하게 하기 위해서는 바벨을 사용해 최신 자바스크립트 문법을 레거시 문법으로 변경시켜주어야 한다.

event.preventDefault() 의 역할이 무엇인지 설명하세요.

preventDefault 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드입니다.
특정 이벤트가 트리거되면, 해당 이벤트에 수반되는 디폴트 액션을 취소시킵니다.

예) checkbox 요소의 디폴트 액션은 checkbox가 토글링 되는 것입니다. 만약, checkbox 요소의 click 이벤트 콜백함수에 preventDefault()를 선언하면, checkbox를 눌러도 checkbox가 토글링 되지 않습니다.

window.requestAnimationFrame(callback) 의 역할이 무엇인지 설명하세요.

window.requestAnimationFrame(callback)은 HTML5의 Canvas, SVG 등의 애니메이션 구현을 위해 사용하는 함수이다.

window.requestAnimationFrame(callback)은 비동기 함수로, 브라우저가 실행 시기를 결정하며, 스스로 반복해서 호출하지 않는다.

  1. 브라우저가 실행시기를 결정한다 : window.requestAnimationFrame(callback)은 애니메이션을 위해 만들어진 비동기 함수로, 우리가window.requestAnimationFrame(callback)를 호출하면, 브라우저는 모니터의 주사율에 맞추어 함수를 실행한다. 가령, 모니터의 평균 주사율이 60FPS이면 1초에 60번 함수를 실행하는 것이다.
  2. 스스로 반복해서 호출하지 않는다 : window.requestAnimationFrame(callback)은 스스로 반복해서 호출하지 않기 때문에, window.requestAnimationFrame(callback) 함수로 다음 함수를 반복하려면 재귀적으로 window.requestAnimationFrame(callback) 함수를 다시 호출해주어야 한다.

또한 모니터의 주사율에 맞춰 실행 주기가 결정되기 때문에, 사용 환경에 따라 애니메이션이 완료되는 시기가 달라질 수 있다. window.requestAnimationFrame(callback)은 FPS를 직접 제어할 수 있는 옵션을 제공하지 않기 때문에 직접 함수 안에서 분기를 만들어 throttle을 걸어주어야 한다.

이 때문에 window.setInterval 함수가 더 편해보이지만, window.requestAnimationFrame(callback)의 장점은 콜백함수의 인자로 timestamp 값이 넘어온다. timestamp는 밀리세컨드 단위의 시간값이기 때문에, 복잡한 물리학 공식을 이용해 애니메이션을 구현해야 할 때는 window.setInterval 함수보다는 시간값이 제공되는 window.requestAnimationFrame(callback)가 편하다.

intersection Observer API가 무엇인지 설명하세요.

우리가 웹사이트를 개발할 때, 사용자가 특정 위치에 도달했을 때 액션을 취할 수 있도록 구현해야 하는 때가 있다.

  1. 페이지 스크롤 시 이미지를 lazy-loading 할 때
  2. infinite-scroll(무한 스크롤)을 구현할 때
  3. 광고의 가시성을 확인하여 광고 수익을 계산해야 할 때
  4. 사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때

기존에는 특정 위치에 도달했을 때 어떤 액션을 취하도록 하기 위해서는 addEventListener()와 scroll 이벤트를 사용했다. 그러나 scroll 이벤트는 단시간에 수백, 수천번 호출될 수 있기 때문에, DOM을 변경하는 등의 무거운 작업을 수행하기는 어렵다. 또한 scroll 이벤트가 한 페이지 내 여러 요소에 등록되있을 경우, 사용자가 스크롤할 때마다 끊임없이 이벤트가 호출될 수 있다.

그리고 특정 지점을 관찰하기 위해 getBoundingClientRect() 함수를 사용해야 하는데, 이 함수는 잦은 reflow 현상이 발생한다는 단점이 있다.

결론적으로, scroll 이벤트나 getBoundingClientRect() 를 사용할 경우, 우리가 기대하는 효과를 내기 위해 너무 많은 리소스가 들어간다.
이러한 문제를 해결하기 위해, 2016년 Intersection Observer API가 등장하였다. Intersection Observer API는 관찰하고자 하는 타겟 요소가 조상 요소나 최상위 문서의 뷰포트(e.g. 브라우저의 viewport)의 교차영역에서 변경이 발생할 때마다 실행될 콜백 함수를 등록할 수 있게 한다.

Intersection Observer API는 정확히 몇 픽셀이 겹쳤는지, 어떤 픽셀이 겹쳤는지 알려주지는 않지만, "N% 정도 교차하는 경우 상호작용을 이루어야 한다" 수준의 일반적인 사용은 가능하다.

performance API가 무엇인지 설명하세요.

performance API는 좀 더 정교하게 어플리케이션을 모니터링 할 수 있게 도와준다.
performance API의 대표적인 메서드로는 performance.now()가 있다. performance.now()를 통해 페이지를 로드한 이후 지난 밀리세컨드를 보여준다. 단위는 일반 Date가 아닌 DOMHighResTimeStamp이기 때문에, 최대 정밀도는 5µs이다.

또한 performance.now() 외에도 코드의 특정 지점에 대한 시간을 측정하여, 성능 테스트 도구처럼 사용하고, 사용자 지정 메트릭으로 활용할 수 있는 메서드들이 있다.

  1. performance.mark(name)
    코드 내에 마킹을 하는 메서드
    performance buffer에 timestamp를 생성하여, 코드의 특정 부분을 실행하는 데 걸린 시간을 저장해둔다.
    인자 name은 문자열로, 마킹을 식별하는 용도이다.

  2. performance.measure(name, start_mark, end_mark)
    코드 내 특정 구간을 마킹하고 측정하는 메서드
    start_mark와 end_mark가 지정되면, 해당 구간을 실행하는 데 걸린 시간을 측정한다.
    start_mark가 undefined이면, 네비게이션 시작부터 특정 마킹까지 걸린 시간을 측정한다.
    end_mark를 지정하지 않으면 마킹부터 지금까지 걸린 시간을 측정한다.

Bundling이 무엇이며 왜 필요한가요?

번들링의 개념은 말 그대로 어떤 것들을 묶는다는 뜻을 가지고 있습니다.

자바스크립트로 코딩을 하다보면 작업하는 코드를 여러 파일로 나누게 되는 경우도 있고 npm 을 통해 다양한 모듈을 다운 받아서 사용하게 되는 경우도 발생합니다.

이렇게 만들어진 여러 파일들, 모듈들을 묶어주는 것을 번들링이라고 하며 웹팩이 대표적인 번들러의 예시입니다.

번들링의 장점은 다음과 같습니다.

  1. 이전에 각 파일들마다 서버에 요청을 하여 자원을 얻어와야했던 반면, 같은 타입(html, css, js 등)의 파일을 묶어서 요청/응답을 받기 때문에 네트워크 비용을 줄일 수 있습니다.

  2. Webpack 4 버전 이상부터는 development , production 이 두가지의 mode 지원을 하면서, 특히 production 모드로 번들링을 진행할 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원하기도 합니다.

  3. Webpack의 주요 구성 요소 중 하나인 로더(Loder)가 일부 브라우저에서 지원이 되지 않는 ES6 형식의 자바스크립트 파일을 ES5로 변환하여 사용가능하게 해 줍니다. 웹 개발을 진행할 때 크롬과 같은 대중적인 브라우저만 고려하는 것이 아닌, 다른 모든 브라우저에 대해서도 커버가 가능합니다.

profile
개발꿈나무

0개의 댓글