📑프론트엔드 개발자 면접준비(1)

굉장히 오랜만에 블로그 포스팅을 하게 되었다. 거의 3주라는 시간동안 프로젝트에 몰두했기 때문에, 블로그를 쓰지 못했다. 프로젝트 기간동안 겪은 문제나 해결방안은 차차 블로그에 포스팅 할 예정이다. 오늘은 멋사 시간에 면접 준비 강의 들은 것을 정리 해보았다. 멋사 프론트엔드 기간동안 많은 것을 배웠지만 그만큼 많이 까먹은 것 같다고 느꼈다. 복습의 중요성을 알게 되었고, 지금까지 배웠던 것을 다시 상기시킬 수 있었던 아주 소중한 시간이었던 것 같다.

Q1. section 요소와 article 요소의 사용 용도에 대해 설명해 주세요.

• section과 article: html요소를 구획짓는 요소(sectioning 요소)
• section: 제목을 가지고 있는 비슷한 주제의 컨텐츠의 그룹
• article: 문서 내의 하나의 완전한 독립적인 컨텐츠를 명시할 때 사용
  
  

Q2. CSS Sprite기법에 대한 정의와 장단점에 대해 설명해주세요.

• CSS Sprite 기법은 하나의 이미지 파일에 여러개의 이미지를 넣어서 좌표와 범위를 통해 특정 이미지를 불러오는 기법.
• 하나의 이미지 파일만 불러오면 되기 때문에 이미지를 불러오는데에 있어서 성능 최적화의 장점이 있다.
• 단점은 이미지를 계속해서 추가해서 이미지 파일이 너무 커질 경우에 여러판의 이미지를 따로 따로 로드하는 게 오히려 효율적일 수 있다.
  
  

Q3. 다음 이미지 포맷에 대해 각 특징에 대해 설명 해 주세요. (JPG, GIF, PNG, SVG)

• JPG/JPEG : 매우 화소가 높고 선명. 용량도 적지만 투명처리가 불가능
• GIF : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 든다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능. 애니메이션 처리가 가능.
• PNG : 웬만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 크다.
• SVG : 2차원 백터 그래픽을 그릴때 사용하는 마크업 언어. SVG 이미지는 이미지 품질 저하 없이 모든 크기로 랜더링 가능하지만, 복잡한 이미지를 그리게 되면 용량이 너무 커지게되는 단점도 있음.
• webp/avif: 최신 브라우저에서 지원하는 차세대 이미지 포맷
  
  

Q4. Pixel Ratio에 대해서 설명을 해주세요.

• Pixel Ratio란 디바이스 장치의 물리적 픽셀과 CSS로 그리는 논리적 픽셀의 비율을 의미. 즉 하나의 css 픽셀을 그릴때 사용해야하는 디바이스 장치의 픽셀 갯수라고 할 수 있음.
• 레티나 디스플레이란 pixel ratio 값이 2이상 일 때 즉, css로 그리는 1px 안에 디바이스가 가지고 있는 물리적인 픽셀이 2개 이상이 들어갈 때를 의미한다.
• 브라우저는 css에서 정의한 픽셀만큼 이미지를 렌더링 해야하기 때문에 원래는 물리픽셀에 맞게 렌더링된 이미지가 논리픽셀만큼 커져버리게 된다. 가로 2 세로 4를 그린다고 해보자. 레티나(고해상도 화면)의 화소가 더 많은데도 불구하고 CSS에서 명령한대로 가로2 세로4를 그려버린다. 그래서 이게 억지로 크기에 맞춰 늘어나서 물먹은 것 처럼 보이게 되는것! (출처: https://velog.io/@ewaterbin/CSS-%EC%8B%A4%EB%AC%B4%ED%85%8C%ED%81%AC%EB%8B%89)
  
  

Q5. CSS 선택자 우선순위에 대해 설명해 보세요.

• !important —> Inline 스타일 —> id —> class, 가상클래스(nth-child, hover), 속성 선택자 —> tag, 가상요소 선택자(::after) —> 선언 순서
  
  

Q6. Margin Collapsing 현상에 대해 설명해 보세요.

• Margin Collapsing현상은 두 개 이상의 블록요소에 상하 마진이 겹칠 때, 또는 부모와 자식 사이에 마진이 있는 경우 두 마진 중 큰 값이 적용되는 경우.
• 해결방법은 overflow: hidden주기, overflow hidden을 주거나 display속성을 사용하면 block format context라는 영역을 생성하게 된다.
  
  

Q7. button 태그와 input type="button"의 차이에 대해 설명해 보세요.

• button 태그는 폼 태그 안에서 사용하면 기본 속성인 submit이 적용되어 클릭 시 폼이 제출 된다.
• 버튼 태그는 닫는 태그가 있어 하위 태그를 넣을 수 있고 input 태그는 그렇지 않다.
  
  

Q8. 브라우저가 웹 페이지를 렌더링 하는 과정을 설명해 보세요.

1. 파싱: html 파일을 DOM트리로 바꾼다.
   • 오타 혹은 잘못된 문법을 사용했을 경우 예외처리를 한다.
   • <link>, <img>와 같은 태그를 만나면 DOM 파싱을 중단하고 리소스를 다운로드 한다.
   • <script> 태그를 만나면 DOM 파싱을 중단하고 자바스크립트를 해석한다.
     -> 파싱을 중단시키는 태그: render blocking resources
2. 스타일 계산: CSS 역시 파싱하여 CSSOM 트리로 변환시킨다.
3. 레이아웃: 아까 생성한 DOM트리와 CSSOM 트리를 합쳐서 레이아웃 트리(렌더트리)를 생성한다.
4. 페인트: 레이아웃 트리가 생성되면 이 트리를 따라 페인트 기록이 생성된다.
5. 컴포지팅: 각각의 레이어를 스크린에 픽셀로 표현하고 나누어 있던 레이어들을 합성해 페이지를 그린다.
   
   

Q9. 브라우저 리플로우 현상에 대해 설명해 보세요.

• 브라우저 랜더링의 각 단계는 반드시 전 단계의 데이터가 필요하며, html의 레이아웃이 변경될 경우 레이아웃 단계에서 랜더 트리가 재생성되며 이를 리플로우라고 한다.
• 레이아웃에 변화를 주는 거의 모든 속성이 리플로우를 유발한다. 이를 피하기 위해 GPU를 이용하는 transform 속성을 이용하여 레이아웃을 제어하는게 좋다.