기술 면접 예상 질문

terry yoon·2021년 9월 1일
htmlcssspritesvg
0

1) svg 파일 스프라이트 기법 적용하기

스프라이트 기법이란?

스프라이트 기법이란 이미지 파일을 각각 유지하는 것이 아니라, 하나의 이미지 파일로 합쳐 해당 파일의 위치에 따라 background-postion을 조정하여 이미지를 표현할 수 있는 기법이다.

따라서 여러 개의 이미지 파일을 서버에 여러 번 요청하지 않아도 되기 때문에 성능 최적화 관점에서 유리한 기법이다.

하지만 위에서 언급했듯, 이미지를 하나의 파일로 합쳐 위치를 조정하는 기법이기 때문에 svg 파일에서 스프라이트 기법은 다른 방식으로 접근해야 한다.

svg 파일 스프라이트 적용 방법

1) .svg 파일에 def 태그를 이용해 symbol을 지정한다.

<svg xmlns="http://www.w3.org/2000/svg">
 <defs>
 </defs>
</svg>

2) 지정된 def 영역 안에 고유한 id를 지닌 symbol들을 정의한다.

<symbol id="facebook" viewBox="0 0 24 24">
 <title>Facebook</title>
 <path d="..."/>
</symbol>

3) 정의된 icon을 사용하기 위해서 use를 사용한다.

<svg class="icon icon--facebook">
 <use xlink:href="#facebook" href="#facebook"></use>
</svg>
  • use를 사용해 해당 아이콘의 아이디 값을 연결하여 html 문서에 선언한다.
<svg>
 <use 
 xlink:href="images/sprite.svg#facebook" 
 href="images/sprite.svg#facebook">
 </use>
</svg>

4) use를 사용할 수 없는 경우

  • 하지만 use 태그는 iframe, img, object 또는 배경 화면과 같이 사용될 수 없다.
  • 따라서 해당 태그에서 svg를 sprite 할 경우 해당 태그의 경로에 svg파일 경로 + '#id' 값을 붙혀준다.
<!-- html file -->
<img src="./sprite.svg#circle" width="100" height="100" />
// css file
.myelement {
  background: url('./sprite.svg#circle');
}
<!-- html file -->
<iframe src="./sprite.svg#circle">
  Your browser does not support iframes.
</iframe>
<!-- html file -->
<object type="image/svg+xml" data="./sprite.svg#circle">
  <img src="./fallback-image.png" />
</object>

2) 웹 바이탈

웹 바이탈을 구글에서 페이지에 대한 사용자 경험을 측정하기 위해 여러 기준을 두어 페이지를 평가하는 지표를 의미한다.

이중 3가지의 핵심 지표가 사용자의 경험을 좌우하는 중요한 지표라고 할 수 있다.

1) LCP(Largest Contentful Paint)

처음 페이지를 방문하여서 뷰포트에 해당하는 텍스트 및 이미지 파일이 로드되고 그려져(Paint) 랜더링이 완료되는 시간을 의미한다. 여기서 뷰포트란 사용자가 화면을 스크롤하지 않고 볼 수 있는 화면을 의미한다.
2) FID(First Input Delay)

사용자가 웹 페이지에서 제공하는 링크나 버튼 혹은 자바스크립트 기반의 콘트롤을 할 경우에 다음 동작을 수행할 수 있을 때까지의 시간의 길이를 말한다. 다른 말로 TBT(Total Blocking Time)이라고 표현되며, 사용자가 입력을 할 수 없는 시간의 총 합을 의미한다. 즉, 해당 지표가 중요하게 보는 것은 해당 액션을 처리하는데 걸리는 시간이 아니라 해당 입력이 지연되는 시간의 길이이다.
3) CLS(Cumulative Layout Shift)

사용자에게 안정적인 레이아웃을 제공하는지 여부를 측정하는 것으로, 페이지 내에서 레이아웃의 변경/이동 거리의 합산을 지표화한 것이다.

3) 브라우저 랜더링 과정

1. 클라이언트(브라우저) 서버 요청

클라이언트는 url을 통해서 도메인을 요청한다. 해당 도메인 주소를 입력하면 해당 도메인 주소가 연결되어 있는 서버의 위치(IP 주소)를 변화시켜주는 DNS(Domain Name System)을 통해서 해당 서버와 클라이언트를 연결한다.

2. DOM / CSSOM

클라이언트는 해당 서버로부터 HTML/CSS/JS 파일 등 웹 페이지를 구성하기 위해 필요한 자원을 다운로드 받는다.
해당 파일은 단순한 텍스트 문서이기 때문에 연산과 관리가 유리한 Object model로 만들게 된다.

3. Render tree 생성

랜더트리는 실제 화면에 표시될 요소들로만 구성되어 있으며, 순수한 요소들의 구조와 텍스트들로만 구성되어 있는 DOM과 달리 스타일 정보가 설정되어 있는 구조를 의미한다.

4. 레이아웃

뷰포트(Viewport) 에서 각 노드들이 표현될 정확한 위치와 크기를 계산합니다. 즉 랜더 트리에 있는 노드들이 가지고 있는 스타일과 속성에 따라 화면에 어느 위치에 어느 크기로 랜더링될 지 결정합니다.

5. 페인트

위치에 따라서 랜더트리에 있는 스타일 값에 따라 실제 화면에 해당 노드를 그리게 됩니다. 이 때 노드들의 스타일값이 적용되어 표시됩니다.

리플로우 리페인트

Reflow

  • html 요소의 크기나 위치등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout 과정을 다시 수행하게 됩니다.
    이렇게 되면 Render Tree와 각 요소들의 크기와 위치를 다시 계산하게 됩니다. 이러한 과정을 Reflow라고 합니다

Repaint

  • Reflow 후에 렌더링 과정과 같이 Render Tree를 다시 화면에 그려주는 과정이 필요합니다. 결국은 Paint 단계가 다시 수행되는 것이며 이를 Repaint 라고 합니다.

  • 즉, reflow가 발생하면 필연적으로 repaint 과정이 따라오게 됩니다. 하지만 repaint는 reflow와 상관 없이 발생하기도 합니다.

  • 예를 들어 일반적으로 width, whitespace, overflow, top, bottom 등 위치와 관련된 속성의 변경은 reflow를 발생시키며 따라서 repaint 과정을 거칩니다.
    하지만 background , background-position 등과 같은 속성은 repaint만 발생하게 됩니다.

  • 따라서 성능 최적화 관점에서 최대한 reflow를 발생시키지 않는 방향으로 문서를 작성해야 합니다.

4) SPA vs MPA, CSR vs SSR

SPA vs MPA

SPA는 싱글 페이지 어플리케이션의 의미로 하나의 페이지로 구성된 웹 페이지를 의미합니다. 일반적으로 MPA는 이동할 페이지마다 해당 페이지에 맞는 HTML/CSS/JS 등을 로드 받아 구성하는 것과 달리, SPA는 페이지가 로드되는 첫 시점에 필요한 모든 리소스를 다운로드 받아 클라이언트에서 동적으로 필요한 부분만 서버로부터 데이터를 받아 동적으로 페이지를 구성하거나 변경합니다.

따라서 SPA는 사용자의 페이지 경험이 유연하고 첫 로딩을 제외하고 성능면에서 서버에 자원 요청을 최소화하여 성능 상 이점이 있습니다.

"SPA의 트릭은 하나의 페이지에서 JS를 통하여 보고 있는 DOM의 내용을 모두 제거하고 다른 컨텐츠로 DOM을 채운 다음에 브라우저상에 URL을 강제로 변경하여, 실제로 방문한적도 없는 URL을 방문하여 해당 페이지를 보고 있는 느낌을 주는 것입니다...

반면, MPA는 일반적으로 하이퍼링크를 클릭했을 때 해당 페이지로 가고 화면이 한번 깜빡이면서 새로운 페이지가 로드되고 그때 해당 페이지에 맞는 HTML, CSS, JS를 받아 화면을 그리는 고전적인 방식입니다." (출처 링크)

따라서 SPA는 CSR 방식으로 랜더링을 합니다.
CSR이란 Client Side Rendering을 의미하며, 브라우저에서 서버로부터 static 파일들을 다운로드 받아 해당 화면을 계산하여 페이지를 랜더링하는 방식을 말합니다.

반면 SSR은 서버에서 완성된 페이지를 만들어 브라우저(클라이언트)에 전달하여 브라우저에서 랜더링되는 방식입니다.

따라서 CSR은 초기 로딩 속도가 느린 대신, 필요할 경우에만 서버에 요청하므로 서버 부하가 적다는 장점이 있다. 다만 초기 로드 시, HTML 정보가 없어 브라우저의 크롤러가 페이지의 데이터를 수집할 수 없어 검색 최적화에 불리하다.

잠깐) 웹사이트가 검색엔진에 노출되는 방식은 무엇일까?

  1. 검색엔진 로봇이 우리가 제출한 url을 방문한다.
  2. 웹페이지의 문서(주로 html문서)를 읽는다.
  3. 읽은 웹페이지 문서를 토대로 검색 엔진에 노출시킨다

이 과정에서 웹페이지가 여러 개가 있는 MPA의 경우는 검색엔진이 해당 문서를 모두 읽어서 정보를 얻을 수 있지만, SPA의 경우는 하나의 HTML문서를 Javascript가 동적으로 페이지를 변경하는 방식이기 때문에 대부분의 검색엔진(크롬 제외)이 js 파일을 읽을 수 없어 충분한 웹페이지 정보를 얻을 수 없다.

SSR은 페이지를 서버에서 만들어 브라우저에 전달하므로 페이지에 대한 HTML 정보가 명시되어 있어 해당 브라우저가 크롤링을 할 수 있다. 하지만 페이지의 변경마다 서버에 요청을 하여 페이지를 다시 그려야 하므로 서버에 부하가 쉽게 간다.

5) WCAG

Web Content Accessibility Guidelines의 약자로,웹 콘텐츠를 장애인이 보다 더 접근 가능하게 만드는 방법을 정의한다.(공식문서)

WCAG에는 4가지의 대원칙이 존재한다.

인식의 용이성

대체 텍스트와 같은 사용자가 해당 페이지 요소의 내용을 인식할 수 있는 대체 수단을 제공할 수 있는 지침

운용의 용이성

UI 컴포넌트와 내비게이션이 작동하는데 문제가 없어야 합니다.

이해의 용이성

정보 전달 및 사용자 인터페이스(UI) 작동에 대해 이해하기 쉬워야 합니다.

견고성

콘텐츠는 보조 기술을 포함하여 다양한 사용자 에이전트가 처리 할 수 있을 정도로 견고해야 합니다.

wai-aria는 장애를 가진 사용자가 웹 컨텐츠 및 웹 어플리케이션을 더 쉽게 접근할 수 있는 여러가지 방법을 정의한 여러가지 특성을 말한다.

그 방법으로 html태그 안에서 role, state, property값을 제공하는데, role은 해당 태그가 어떤 역할을 담당하는지를 명시하고 state는 속성과 property는 상태를 명시합니다. 단 state는 변하지 않는 고정값과 달리 property는 상태가 변경될 수 있습니다.

6) BFC

웹 페이지를 렌더링하는 css의 일부로, 블로모델의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위.

블록서식을 생성하는 조건

html root 태그 (body 태그는 만들어지지 않는다)

none을 제외한 float : float은 BFC를 만들기 때문에, float이 적용된 요소는 자식 요소의 레이아웃을 인식하게 된다.

position: fixed, absolute

display: inline-block, table, table-cell, table-caption

overflow: visible을 제외한 모든 값

display: flow-root (일부 브라우저만 동작함)

display: flex, inline-flex, grid, inline-grid

BFC는 마진 상쇄를 막는다. 마진 상쇄가 일어난 조건은 형제 요소의 마진 위쪽과 아래쪽이 만나거나, 빈 요소에 명시적으로 높이 값을 지정하지 않거나 내부에 inline 컨텐츠가 존재하지 않는 경우, 부모와 자식간의 경계(padding, border, inline 컨텐츠)가 없는 경우 발생

또한 float 된 요소 주위로 text가 wrapping 되는 것을 막는다. 예를 들어 float 요소의 형제 요소 중 text 요소는 float 주위를 감싸게되는데, 해당 형제 요소를 BFC로 만들면 형제 요소가 float 요소 주의를 감싸지 못한다.

7) 반응형 / 적응형

  1. 화면 감지 방법
  • 반응형 : 미디어 쿼리가 감지
  • 적응형 : 서버 또는 브라우저가 해당 기기를 감지하여 기기에 맞는 페이지 url로 리다이렉션(redirection) 한다.
  1. 콘텐츠 최적화
  • 반응형 : 기기 최적화와 상관없이 모든 리소스를 다운로드 받지만, 일부 콘텐츠만 사용합니다.
  • 적응형 : 감지된 기기의 최적화된 준비된 리소스만 받아서 사용합니다.
  1. 기기 특성별 처리
  • 반응형 : 하나의 템플릿이 기기와 상관 없이 적용됨
  • 적응형 : 기기에 따라 준비된 템플릿이 다르게 적용됨.
  1. 로딩 속도
  • 반응형 : 기기와 상관 없이 모든 리소스를 받아야 하므로 느림
  • 적응형 : 기기에 맞는 최적화된 리소스만 받기 때문에 빠름
  1. 개발 배포
  • 반응형 : 기존 사이트의 전면 개발
  • 적응형 : 기존 사이트 변경 없이 기기별 새로운 템플릿 개발.

8) Mordernizer / pollyfill

모더나이저는 해당 브라우저가 제공하는 HTML/CSS/JS 특정 기술을 지원하는지 여부를 확인해주는 라이브러리이다.

따라서 모더나이저는 detect 기능을 제공하여 해당 브라우저가 특정 기술을 지원하지 않는 경우 에러 처리 혹은 특정 기능을 제공할 수 있도록 예외 처리를 할 수 있도록 돕는다.

폴리필은 크로스 브라우징을 위해 특정 브라우저에서 지원하지 않는 기능을 제공하기 위해 추가적으로 js 또는 css에 추가하는 코드를 말한다.

결국 개발자는 모더나이저를 통해 브라우저에서 해다아 기능을 제공하지 않을 경우 예외 처리를 하고, 예외 처리 방식으로 폴리필을 제공하여 크로스 브라우징을 구현할 수 있다.

profile
terry yoon
배운 것을 기록하는 FrontEnd Junior 입니다
다음 포스트

웹 바이탈(Core webvital)

0개의 댓글