프론트엔드 면접대비 예상질문

 

 

브라우저의 동작 방식을 설명해보세요.

브라우저는 사용자가 요청한 웹 페이지의 HTML, CSS, JavaScript 등의 리소스를 서버로부터 다운로드하고 파싱합니다. 그 다음 렌더링 엔진을 사용하여 문서 객체 모델(DOM)을 구성하고, 스타일 시트(CSS) 정보를 이용하여 렌더 트리(Render Tree)를 생성합니다. 마지막으로 렌더 트리를 기반으로 레이아웃을 수행하고, 화면에 픽셀 단위로 출력합니다.

 

HTML, CSS, JavaScript의 차이점을 설명해보세요.

HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 스타일 시트 언어입니다. JavaScript는 웹 페이지의 동적인 기능을 구현하는 스크립트 언어입니다.

 

CSS의 박스 모델(Box Model)에 대해 설명해보세요.

CSS의 박스 모델은 HTML 요소가 차지하는 공간을 정의하는 모델입니다. 각 요소는 content, padding, border, margin의 4가지 영역으로 나뉘며, 각각의 영역은 크기와 위치를 조절할 수 있습니다.

 

미디어쿼리(Media Queries)에 대해 설명해보세요.

미디어쿼리는 브라우저의 뷰포트 크기와 같은 미디어 특성에 따라 스타일을 다르게 적용할 수 있도록 하는 CSS의 기능입니다. 미디어쿼리를 사용하면 PC와 모바일 기기에서 웹 페이지가 다르게 보이도록 스타일을 적용할 수 있습니다.

 

브라우저 렌더링(Rendering)에 대해 설명해보세요.

브라우저 렌더링은 HTML, CSS, JavaScript 등의 리소스를 브라우저가 이해할 수 있는 구조로 변환하고, 화면에 그리는 작업을 의미합니다. 이 작업에는 파싱, 스타일링, 레이아웃, 페인팅 등의 과정이 포함됩니다.

 

HTTP와 HTTPS의 차이점을 설명해보세요.

HTTP는 Hypertext Transfer Protocol의 약자로, 웹 서버와 클라이언트 간 데이터 전송에 사용되는 프로토콜입니다. 반면 HTTPS는 HTTP의 보안 강화 버전으로, 전송되는 데이터를 암호화하여 안전하게 전송하는 프로토콜입니다. 이를 위해 SSL 또는 TLS 인증서를 사용하여 데이터 암호화를 진행합니다.

 

웹 성능 최적화에 대해 어떻게 생각하시나요?

웹 성능 최적화에는 여러 가지 방법이 있지만, 가장 기본적인 방법은 페이지 로딩 시간을 줄이는 것입니다. 이를 위해 CSS와 JavaScript 파일을 압축하거나 병합하여 다운로드 시간을 줄이고, 이미지 파일을 최적화하여 파일 크기를 줄이는 등의 방법을 사용할 수 있습니다. 또한, 렌더링 최적화를 위해 페이지 구조와 스타일 시트를 최적화하고, 브라우저 캐시를 활용하는 등의 방법을 사용할 수 있습니다.

 

Cross-site scripting (XSS) 공격에 대해 설명해보세요.

Cross-site scripting은 웹 사이트에서 제공되는 입력 폼 등에 악성 스크립트를 삽입하여 해당 사이트의 사용자들에게 피해를 입히는 공격 기법입니다. 이 공격 기법을 예방하기 위해서는 입력값 검증, 출력값 인코딩, 쿠키 사용 등의 방법을 사용할 수 있습니다.

 

브라우저 호환성에 대해 설명해보세요.

브라우저 호환성은 웹 페이지가 여러 브라우저에서 동일하게 보이고 동작할 수 있는 것을 의미합니다. 이를 위해 HTML, CSS, JavaScript 등의 웹 기술을 사용할 때, 브라우저별로 지원되는 기능과 지원하지 않는 기능을 고려하여 작성해야 합니다. 또한, 브라우저별로 테스트를 진행하고, 호환성 문제가 발견되면 해당 브라우저에서만 적용되는 스타일 시트 등의 방법을 사용하여 문제를 해결할 수 있습니다.

 

웹 접근성에 대해 설명해보세요.

웹 접근성은 장애를 가진 사람들도 웹 페이지를 이용할 수 있도록 하는 것을 의미합니다. 이를 위해 웹 페이지에서 사용되는 컨텐츠와 기능이 시각, 청각, 지체, 인지 장애를 가진 사람들도 이용할 수 있도록 제공되어야 합니다. 이를 위해 HTML, CSS, JavaScript 등의 웹 기술을 사용할 때, 웹 접근성 지침을 준수하여 작성해야 합니다. 또한, 스크린 리더와 같은 보조 기술을 사용하여 테스트를 진행하고, 웹 접근성에 문제가 있는 부분을 수정해 나가야 합니다.

 

브라우저의 동작 원리에 대해 설명해보세요.

브라우저는 URL 주소를 입력받으면, DNS를 통해 해당 사이트의 IP 주소를 얻어옵니다. 그 후, 서버와의 TCP/IP 연결을 맺고, 요청된 HTML 파일을 다운로드합니다. 이후에는 HTML 문서를 파싱하여 DOM(Document Object Model)을 생성하고, CSS와 JavaScript 등의 외부 리소스를 다운로드하며, 페이지를 렌더링합니다. 이때, 브라우저는 CSSOM(CSS Object Model)을 생성하여 CSS를 적용하고, JavaScript 코드를 실행하여 페이지를 동적으로 변경할 수 있습니다.

 

Ajax에 대해 설명해보세요.

Ajax는 Asynchronous JavaScript and XML의 약자로, 비동기식 자바스크립트와 XML을 이용하여 웹 페이지를 동적으로 변경하는 기술입니다. 이를 이용하면 서버와 클라이언트 간에 데이터를 주고받을 수 있으며, 페이지 전체를 다시 로딩하지 않고도 일부분을 업데이트할 수 있습니다.

 

웹 보안에 대해 설명해보세요.

웹 보안은 웹에서 발생하는 다양한 보안 위협에 대응하기 위한 기술과 방법을 의미합니다. 대표적으로는 XSS(Cross-site scripting), CSRF(Cross-site request forgery), SQL Injection 등이 있습니다. 이를 예방하기 위해서는 보안 취약점을 분석하고, 적절한 보안 솔루션을 적용해야 합니다. 또한, HTTPS를 이용하여 데이터 암호화를 진행하거나, 적절한 암호화 기법을 적용하는 등의 방법을 사용할 수 있습니다.

 

React와 Vue의 차이점에 대해 설명해보세요.

React와 Vue는 모두 사용자 인터페이스를 개발하기 위한 자바스크립트 라이브러리입니다. React는 Facebook에서 개발한 라이브러리로, 가상 DOM(Virtual DOM)을 이용하여 페이지를 렌더링합니다. 반면 Vue는 Evan You가 개발한 라이브러리로, 가상 DOM 대신에 직접 DOM을 조작하여 페이지를 렌더링합니다.

React는 컴포넌트 중심의 개발 방식을 사용하며, 상태 관리를 위해 Redux, MobX 등의 라이브러리와 함께 사용됩니다. Vue는 템플릿 기반의 개발 방식을 사용하며, 상태 관리를 위해 Vuex라는 라이브러리를 제공합니다.
React는 커뮤니티가 크고 생태계가 발전되어 있으며, 대규모 애플리케이션에서 사용하기에 적합합니다. Vue는 경량화된 라이브러리로, 작은 규모의 애플리케이션을 빠르게 개발할 수 있습니다. 또한 Vue는 React보다 더 직관적이고 간편한 문법을 가지고 있어 초보자들이 사용하기에 더 적합합니다.

 

브라우저 캐시와 쿠키의 차이점에 대해 설명해보세요.

브라우저 캐시는 이미 다운로드된 리소스(이미지, CSS, JavaScript 등)를 브라우저에 저장하여, 동일한 리소스를 다시 다운로드하지 않고 빠르게 로딩할 수 있도록 해줍니다. 반면 쿠키는 서버와 클라이언트 간에 정보를 주고받기 위한 방법으로, 브라우저에 저장되는 작은 텍스트 파일입니다.