Front end 면접에서 자주 묻는 질문들

소개

프론트 엔드 개발은 웹 개발의 중요한 부분이며, 따라서 프론트 엔드 면접에서는 자주 묻는 질문들이 포함됩니다. 이러한 질문들은 면접관이 HTML, CSS, JavaScript와 같은 프론트 엔드 기술에 대한 지식과 이해력을 평가하는 데 도움이 됩니다. 이 블로그 포스트에서는 프론트 엔드 면접에서 자주 묻는 일부 일반적인 질문들을 살펴보겠습니다.

1. CSS에서 박스 모델이란 무엇인가요?

박스 모델은 웹 페이지에서 요소가 렌더링되는 방식을 설명하는 CSS의 기본 개념입니다. 이는 콘텐츠, 패딩, 테두리, 마진으로 구성됩니다. 콘텐츠 영역은 요소의 실제 콘텐츠가 표시되는 곳입니다. 패딩은 콘텐츠와 테두리 사이의 공간을 제공합니다. 테두리는 패딩과 콘텐츠를 둘러싸며, 마진은 요소와 페이지의 다른 요소 사이의 공간을 생성합니다.

2. 인라인 요소와 블록 요소의 차이점은 무엇인가요?

인라인 요소는 새로운 줄에서 시작하지 않으며 필요한 만큼의 너비만 차지합니다. 인라인 요소의 예로는 <span>, <a>, <img>가 있습니다. 반면, 블록 요소는 새로운 줄에서 시작하며 사용 가능한 전체 너비를 차지합니다. 블록 요소의 예로는 <div>, <p>, <h1>에서 <h6>까지가 있습니다.

3. JavaScript에서 ==와 ===의 차이점은 무엇인가요?

JavaScript에서 == 연산자는 형 변환을 수행하여 비교하기 전에 피연산자를 공통 타입으로 변환합니다. 반면, === 연산자는 엄격한 동등 연산자로, 형 변환 없이 피연산자를 비교합니다. 이 연산자는 값과 타입 모두를 확인합니다.

4. HTML의 data- 속성의 목적은 무엇인가요?

HTML의 data- 속성은 페이지나 애플리케이션에 비공개로 사용되는 사용자 정의 데이터를 저장하는 데 사용됩니다. 개발자는 JavaScript를 사용하여 HTML 요소에 추가 정보를 첨부하고 조작할 수 있습니다. 이 속성은 JavaScript 프레임워크와 라이브러리와 함께 사용되어 추가 데이터나 구성 설정을 저장하는 데 자주 사용됩니다.

5. JavaScript에서 이벤트 위임이란 무엇인가요?

이벤트 위임은 JavaScript에서 개별 요소에 이벤트 리스너를 연결하는 대신 부모 요소에 하나의 이벤트 리스너를 연결하는 기술입니다. 이는 동일한 이벤트를 처리해야 하는 많은 요소가 있는 경우에 유용하며, 메모리 사용량을 줄이고 성능을 향상시킵니다. 이벤트가 트리거되면 DOM 트리를 거슬러 올라가며 이벤트 리스너는 대상 요소를 확인하여 적절한 동작을 수행합니다.

6. HTML5에서 localStorage와 sessionStorage의 차이점은 무엇인가요?

localStorage와 sessionStorage는 HTML5에서 사용할 수 있는 웹 스토리지 옵션입니다. 이들의 주요 차이점은 저장된 데이터의 수명입니다. localStorage는 만료일이 없는 데이터를 저장하므로 브라우저를 닫고 다시 열어도 유지됩니다. 반면, sessionStorage는 세션의 기간 동안 데이터를 저장하므로 브라우저를 닫으면 데이터가 지워집니다.

7. JavaScript에서 async 속성의 목적은 무엇인가요?

async 속성은 HTML에서 스크립트가 비동기적으로 실행되어야 함을 나타내는 데 사용됩니다. 스크립트가 async로 표시되면 페이지의 렌더링을 차단하지 않습니다. 대신, 페이지의 나머지 부분이 로드되는 동안 백그라운드에서 스크립트가 다운로드되고 실행됩니다. 이는 초기 페이지 렌더링에 필요하지 않지만 추가 기능에 필요한 스크립트에 유용합니다.

8. JavaScript에서 let, const, var의 차이점은 무엇인가요?

let, const, var는 모두 JavaScript에서 변수를 선언하는 데 사용되지만, 스코프와 재할당에 차이가 있습니다. var는 함수 스코프를 가지며 스코프 내에서 재할당과 재선언이 가능합니다. let과 const는 블록 스코프를 가지며 동일한 스코프 내에서 재선언할 수 없습니다. 그러나 let은 재할당이 가능하고, const는 불가능합니다.

9. <img> 태그의 alt 속성의 목적은 무엇인가요?

<img> 태그의 alt 속성은 이미지에 대한 대체 텍스트를 제공하는 데 사용됩니다. 이미지가 로드되지 않거나 사용자가 스크린 리더를 사용하는 경우에 이 텍스트가 표시됩니다. 접근성을 보장하고 사용자 경험을 향상시키기 위해 설명적이고 의미 있는 대체 텍스트를 포함하는 것이 중요합니다.

10. CSS에서 margin과 padding의 차이점은 무엇인가요?

margin과 padding은 모두 요소 주위에 공간을 만드는 데 사용되는 CSS 속성입니다. 그러나 그들은 다른 목적을 가지고 있습니다. margin은 요소의 테두리 외부에 공간을 만드는 데 사용되고, padding은 콘텐츠와 테두리 사이에 공간을 만드는 데 사용됩니다. 다시 말해, margin은 요소의 위치를 다른 요소에 상대적으로 영향을 주고, padding은 요소 내부의 콘텐츠의 위치에 영향을 줍니다.

결론

이는 프론트 엔드 면접에서 자주 묻는 질문들의 일부 예시입니다. 실제 질문은 회사와 면접관에 따라 다를 수 있습니다. 그러나 이러한 일반적인 질문과 그에 대한 답변을 숙지함으로써 프론트 엔드 면접에 더 잘 준비하고 웹 개발에 대한 지식과 기술을 증명할 수 있습니다.