1. HTML5의 주요 특징은 무엇인가요?
답변: HTML5는 웹 표준의 최신 버전으로, 시맨틱 요소, 멀티미디어 지원, 오프라인 기능, 웹 스토리지 등 다양한 기능을 포함하고 있습니다. 시맨틱 태그(<article>, <section>, <header>, <footer> 등)를 통해 문서 구조를 명확하게 표현할 수 있으며, <video>와 <audio> 태그를 통해 플러그인 없이 멀티미디어 콘텐츠를 재생할 수 있습니다. 또한, Local Storage와 같은 웹 스토리지 기능을 통해 클라이언트 측에서 데이터를 영구적으로 저장할 수 있습니다.
연관 질문: 시맨틱 태그를 사용하는 이유와 그 장점에 대해 설명해보세요.
2. CSS Flexbox와 Grid의 차이점은 무엇인가요?
답변: Flexbox는 1차원(1D) 레이아웃 모델로, 주로 단일 행이나 열에서 아이템을 정렬하는 데 사용됩니다. 반면에 CSS Grid는 2차원(2D) 레이아웃 모델로, 행과 열을 동시에 제어할 수 있습니다. Flexbox는 컨테이너의 공간을 효율적으로 나누고 정렬하는 데 유용하며, Grid는 복잡한 레이아웃을 설계할 때 강력한 도구로 사용됩니다.
연관 질문: Flexbox와 Grid를 함께 사용하는 방법에 대해 설명해보세요.
3. JavaScript에서 let, const, var의 차이점은 무엇인가요?
답변: var는 함수 스코프를 가지며, 선언 이전에 사용할 수 있는 호이스팅 특성이 있습니다. let과 const는 블록 스코프를 가지며, 선언 이전에 사용할 수 없습니다. let은 변수의 재할당이 가능하지만, const는 재할당이 불가능하여 상수 또는 변하지 않는 데이터를 선언할 때 사용됩니다. 이로 인해 let과 const는 코드의 예측 가능성과 안정성을 높여줍니다.
연관 질문: JavaScript의 호이스팅(Hoisting) 개념에 대해 설명해보세요.
4. React의 주요 개념은 무엇인가요?
답변: React는 UI를 컴포넌트 기반으로 구축하는 라이브러리로, 주로 단방향 데이터 흐름과 Virtual DOM을 사용하여 성능을 최적화합니다. 컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, 상태(State)와 속성(Props)을 통해 동적으로 렌더링됩니다. React는 선언적 접근 방식을 취하며, 컴포넌트의 상태 변화에 따라 UI가 자동으로 업데이트됩니다.
연관 질문: React에서 상태 관리(State Management)는 어떻게 이루어지나요?
5. 프론트엔드에서 CORS(Cross-Origin Resource Sharing)란 무엇인가요?
답변: CORS는 웹 애플리케이션이 다른 도메인에서 리소스를 요청할 때 발생하는 보안 정책입니다. 기본적으로 브라우저는 동일 출처 정책(Same-Origin Policy)에 따라 다른 출처에서의 리소스 요청을 제한합니다. CORS는 서버에서 특정 도메인에 대한 접근을 허용하는 HTTP 헤더를 설정하여 이 제한을 우회할 수 있도록 합니다. 이를 통해 프론트엔드와 백엔드가 서로 다른 도메인에서 동작할 수 있습니다. 연관 질문: CORS 문제를 해결하는 방법에 대해 설명해보세요.
6. 웹 성능 최적화를 위해 어떤 방법들이 있나요?
답변: 웹 성능 최적화를 위해 이미지 최적화, 코드 압축 및 최소화, 캐싱 전략, 비동기적 자원 로딩, 그리고 지연 로딩(lazy loading) 등이 사용됩니다. 이미지 파일 크기를 줄이고, CSS와 JavaScript 파일을 압축하여 로딩 속도를 개선할 수 있습니다. 또한, 브라우저 캐싱을 활용해 재방문 시 로딩 시간을 단축할 수 있으며, 비동기적 로딩을 통해 렌더링 블로킹을 최소화할 수 있습니다.
연관 질문: Lazy Loading이란 무엇이며, 어떻게 구현할 수 있나요?
7. SPA(Single Page Application)와 MPA(Multi Page Application)의 차이점은 무엇인가요?
답변: SPA는 하나의 HTML 페이지에서 모든 콘텐츠를 동적으로 로딩하는 애플리케이션 구조로, 빠른 사용자 경험을 제공합니다. 페이지 이동 시 전체 페이지를 새로고침하지 않고, 필요한 부분만 업데이트하므로 네이티브 앱과 유사한 경험을 제공합니다. 반면 MPA는 여러 페이지로 구성된 애플리케이션 구조로, 각 페이지마다 별도의 HTML 파일을 로드합니다. SEO 및 초기 로딩 시간에서 장점을 가질 수 있지만, 페이지 전환 시 더 많은 리소스를 요구할 수 있습니다.
연관 질문: SPA에서 발생할 수 있는 SEO 문제를 해결하는 방법에 대해 설명해보세요.
8. 웹 접근성(Web Accessibility)이란 무엇인가요?
답변: 웹 접근성은 장애를 가진 사람들을 포함하여 모든 사용자가 웹 콘텐츠에 접근하고 사용할 수 있도록 보장하는 개념입니다. 이는 시각, 청각, 신체적 장애를 가진 사용자들이 웹 사이트를 접근할 수 있도록 HTML 태그의 시맨틱 사용, ARIA 속성, 키보드 네비게이션, 텍스트 대체 등 다양한 기술을 사용하여 구현됩니다. 웹 접근성을 준수하면 사용자 경험이 향상되고, 더 넓은 사용자층을 아우를 수 있습니다.
연관 질문: 웹 접근성을 향상시키기 위한 ARIA 속성에 대해 설명해보세요.
9. 프론트엔드 빌드 도구의 역할은 무엇인가요?
답변: 프론트엔드 빌드 도구는 코드의 변환, 병합, 압축, 테스트, 배포 등의 작업을 자동화하여 개발 과정을 효율적으로 만들어줍니다. 대표적인 빌드 도구로는 Webpack, Gulp, Parcel 등이 있으며, 모듈 번들링, 코드 스플리팅, 라이브 리로딩 등의 기능을 제공합니다. 이를 통해 개발자는 더 빠르고 효율적으로 프로젝트를 관리하고, 최적화된 결과물을 배포할 수 있습니다.
연관 질문: Webpack에서 코드 스플리팅(Code Splitting)을 구현하는 방법에 대해 설명해보세요.
10. 프론트엔드에서 상태 관리 라이브러리는 왜 필요한가요?
답변: 프론트엔드 애플리케이션에서 상태 관리 라이브러리는 애플리케이션의 복잡한 상태를 일관되게 관리하고, 컴포넌트 간에 데이터를 효율적으로 공유하기 위해 필요합니다. 대표적인 상태 관리 라이브러리로는 Redux, MobX, Context API 등이 있으며, 전역 상태를 중앙에서 관리하여 데이터 흐름을 명확하게 하고, 디버깅을 용이하게 만듭니다. 이를 통해 상태 변화를 예측 가능하게 하고, 복잡한 애플리케이션 구조를 간결하게 유지할 수 있습니다.
연관 질문: Redux의 주요 개념과 동작 방식에 대해 설명해보세요.
