Quiz - 크로스 브라우징, 웹 성능 최적화, OOP, REST API, Git flow, SEO, BOM/DOM, reflow/repaint

이소라·2023년 5월 15일
0

Interview Questions

목록 보기
32/67

1. 크로스 브라우징에 대해 설명해주세요.

  • 크로스 브라우징이란 표준 웹 기술을 채용하여 다른 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말합니다.

1.1 크로스 브라우징 이슈를 해결했던 경험을 말씀해주세요.

  • range 태그의 모습이 브라우저별로 달랐는데, range와 webit-slider-thumb의 -webkit-appearance 속성을 none으로 주어서 기본 스타일을 제거했습니다. 또한 range 태그를 focus했을 때 outline 속성을 none으로 주어서 기본 블러처리를 제거했습니다. 마지막으로 ms-track에서 background, border-color, color 속성을 transparent로 줌으로써 IE에서 기본적으로 제공하는 기본슬라이드를 숨겼습니다.



2. 웹 사이트 성능 최적화에는 어떤 방법이 있나요?

  • 웹 페이지 로딩 최적화

    • CSS 최적화

      • CSS는 렌더링이 차단되지 않도록 항상 HTML 문서 최상단에 배치합니다(<head> 안에).

    • JavaScript 최적화

      • JavaScript는 렌더링을 차단하지 않도록 HTML 최하단(</body>이전)에 배치합니다.
      • script 태그에 defer, async 속성을 명시하여 HTML 파싱을 멈추지 않게 할 수 있습니다.

    • 리소스 요청 수 줄이기

      • 이미지 스프라이트 : 여러 개의 이미지를 하나로 만들고 CSS의 background-position 속성을 사용하여 부분 이미지를 만드는 방법입니다.
      • CSS, JavaScript 번들하기 : webpack, vite와 같은 번들러를 통해 CSS, JavaScript 파일을 하나로 묶은 번들 파일을 사용하여 리소스 요청을 줄일 수 있습니다.
      • Data URI : 웹 페이지에서 사용하는 아이콘 이미지 개수가 적은 경우, 다운로드한 이미지를 사용하는 대신, 이미지를 Base64 로 변환된 URI로 대체하여 사용할 수 있습니다. 이렇게 하면 외부 이미지를 사용하기 위해 발생하는 요청 횟수를 줄일 수 있습니다.

    • 리소스 용량 줄이기

      • 중복 코드 제거하기 : 자주 사용되는 코드는 utils.js 파일로 정리해서 사용합니다.
      • 만능 유틸 라이브러리 사용 지양하기 : 유틸 함수 라이브러리에서 필요한 함수만 부분적으로 가져오고, 사용하지 않은 기능이 많이 포함된 라이브러리 사용을 되도록 지양합니다.
      • HTML 마크업 최적화 : 태그의 중첩을 최소화하고 공백, 주석 등을 제거하여 사용합니다.
      • 압축(Minify)하여 사용하기 : HTML, JavaScript, CSS 파일을 모두 압축하고 불필요한 주석이나 공백을 삭제한 후 난독화하여 사용합니다.
  • 웹 페이지 렌더링 최적화

    • 레이아웃 최적화

      • reflow를 최대한 적게하고 repaint만 할 수 있도록 합니다.
      • 문제점 : 스타일을 변경한 다음, offsetHeight offsetTop과 같은 속성을 읽을 때 강제로 동기 reflow을 수행해야 합니다.
      • 해결점 : 가능한 한 하위 노드의 DOM을 조작하고 스타일을 변경합니다. 많은 수의 요소들을 수정해야할 경우, 요소의 display 속성을 none으로 줍니다.
        • 요소의 display 속성이 none일 경우, DOM 조작과 스타일을 변경하더라도 reflow와 repaint가 발생하지 않습니다.

    • HTML, CSS 최적화

      • CSS 규칙 수 최소화 : CSS에서 사용하는 규칙이 적을 수록 계산이 빠르므로 CSS 규칙 수를 최소화합니다.

      • DOM 깊이 최소화 : DOM 트리가 깊을 수록 한 노드를 변경했을 때 더 많은 자식노드을 업데이트해야 하므로, 업데이트에 필요한 계산이 많아집니다.

        • DOM의 깊이를 최소화하고 불필요한 레퍼 요소를 제거합니다.

      • 애니메이션 최적화 : 한 프레임 처리가 16ms 내로 완료되어야 렌더링 시 끊김 없이 자연스러운 렌더링을 만들어낼 수 있습니다.

        • 애니메이션을 구현할 때 CSS 사용을 권장합니다.
        • requestAnimationFrame API를 사용하면 브라우저의 프레임 속도에 맞춰 애니메이션을 실행할 수 있게 해줍니다.
        • 애니메이션 영역의 position 속성을 absolute나 fixed로 설정하여 주변 레이아웃에 영향을 주지 않습니다.
        • 요소의 기하학적 변화를 줄 경우 transform 속성을 사용합니다. 이렇게 하면 레이어로 분리되기 때문에 영향 받는 요소가 제한되어 reflow와 repaint를 줄 수 잇고, 하드웨어가 지원될 경우 GPU를 사용할 수 있으므로 성능이 빠릅니다.



3. 객체 지향 프로그래밍이란 무엇인가요?

  • 객체 지향형 프로그래밍은 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임입니다.
  • 객체 지향형 프로그래밍에서 객체는 상태 데이터인 프로퍼티와 동작인 메서드를 가진 복합적인 자료구조입니다.
  • 객체는 다른 객체와 메세지를 주고 받거나 데이터를 처리할 수 있습니다. 또한 다른 객체의 프로퍼티나 메서드를 상속받아 사용할 수도 있습니다.

3.1 객체 지향 프로그래밍의 특징에 대해 설명해주세요.

  • 객체 지향 프로그래밍의 특징에는 상속, 추상화, 다형성, 캡슐화가 있습니다.
  • 상속
    • 어떤 객체의 프로퍼티나 메서드를 다른 객체가 상속 받아 그대로 사용할 수 있는 것을 말합니다.
  • 추상화
    • 다양한 속성 중에서 필요한 속성만 간추려서 표현하는 것을 말합니다.
  • 다형성
    • 메서드의 이름은 같지만 다른 클래스에서 다르게 구현하는 것을 말합니다.
    • 하위클래스의 메서드가 상위클래스의 구현을 대체할 때, overides했다고 합니다.
  • 캡슐화
    • 객체의 내부 상태는 은닉되어 있습니다.
    • 객체의 내부 상태는 객체 자신의 메서드로만 접근할 수 있기 때문입니다.

3.2 객체 지향 프로그래밍의 장단점에 대해 설명해주세요.

  • 장점

    • 각 기능을 독립적인 객체로 관리할 수 있기 때문에 유지보수가 쉽습니다.
    • 객체의 프로퍼티나 메서드를 상속받을 수 있기 때문에 코드의 재사용률이 높습니다.
    • 객체의 캡슐화 특징 덕분에 데이터를 안전하게 보존할 수 있습니다.

  • 단점

    • 상속을 너무 많이 사용하면 복잡하고 단단히 결합된 계층 구조를 가지게 될 수 있습니다. 이는 코드를 이해, 유지 보수하기 힘들게 합니다.



4. REST API에 대해 설명해주세요.

  • REST API는 REST를 기반으로 서비스 API를 구현한 것을 말합니다.
    • REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처를 말합니다.
    • REST API는 자원, 행위, 표현의 3 가지 요소로 구성됩니다.
      • 자원은 URI로 나타냅니다.
      • 행위는 자원에 대한 행위로 HTTP 요청 메서드로 나타냅니다.
      • 표현은 자원에 대한 행위의 구체적인 내용으로 payload로 나타냅니다.

4.1 REST API의 설계 원칙에 대해 설명해주세요.

  • REST API의 설계 원칙은 리소스는 URI로 표현하고, 리소스에 대한 행위는 HTTP 요청 메서드로 표현하는 것입니다.



5. Git Flow에 대해 설명해주세요.

  • git flow는 각 용도에 맞게 master, develop, feature, release, hotfix 브랜치를 분리해서 사용하는 브랜치 전략입니다.

5.1 Git Flow의 장점에 대해 설명해주세요.

  • 제가 느꼈던 git flow의 장점은 병렬 개발을 통해 별도의 브랜치에서 작업하는 동안 메인 브랜치는 안정적으로 배포할 수 있다는 것입니다.



6. SEO에 대해 설명해주세요.

  • SEO는 Search Engine Optimization의 약어로 웹 사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정을 말합니다.

6.1 SEO를 위해 어떻게 해야하나요?

  • 페이지 별로 고유한 title과 핵심 키워드가 포함된 description meta 태그를 사용합니다.
  • image 태그에 alt 속성을 설정합니다.
  • Open Graph 태그를 통해 웹 페이지를 SNS로 공유할 때 보이는 미리보기를 설정합니다.
  • canonical URL를 사용하여 정식 URL를 지정합니다.
  • 보안을 위해 SSL 설정을 합니다.



7. BOM과 DOM에 대해 설명해주세요.

  • DOM은 Document Object Model의 약어로 웹 페이지 내의 모든 컨텐츠를 객체로 나타내주는 모델을 말합니다.
    • 이 객체는 수정이 가능합니다.
    • document 객체는 페이지의 기본 진입점 역할을 합니다.
    • document 객체를 이용해 페이지 내 무엇이든 변경 할 수 있고, 원하는 것을 만들 수 있습니다.
  • BOM은 Browser Object Model의 약어로 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체를 나타내는 모델을 말합니다.
    • navigator 객체 : 브라우저와 운영체제에 대한 정보를 제공합니다.
    • location 객체 : 현재 URL을 읽을 수 있게 해주고, 새로운 URL로 변경할 수 있게 해줍니다.
    • BOM은 HTML 명세서의 일부입니다.



8. reflow와 repaint에 대해 설명해주세요.

  • reflow는 DOM이 추가/삭제되거나 요소에 기하학적인 영향(높이, 넓이, 위치)을 주는 CSS 속성값이 변경하는 경우, 렌더트리가 재구성되서 레이아웃부터 렌더링 과정을 다시 수행하는 것을 말합니다.
  • repaint는 요소에 기하학적인 영향을 주지 않는 CSS 속성값이 변경하는 경우 페인트부터 렌더링 과정을 다시 수행하는 것을 말합니다.

8.1 reflow와 repaint의 발생 조건에 대해 설명해주세요.

  • reflow의 발생 조건은 DOM이 추가/삭제되거나, 요소에 기하학적 영향(높이, 넓이, 위치)을 주는 CSS 속성 값이 변할 때입니다.
  • repaint의 발생 조건은 요소에 기하학적 영향을 주지 않는 CSS 속성 값이 변할 때입니다.

8.2 visibility 속성은 reflow를 발생시킬까요?

  • visibility 속성은 레이아웃에 영향을 주지 않으므로 reflow를 발생시키지 않고 repaint를 발생시킵니다.



참고

profile
이소라
이전 포스트

Quiz- Git, Branch strategy, Conflict

다음 포스트

Quiz - 시간 복잡도, 정렬 Algorithm, Map/Set

0개의 댓글