안녕하세요 슈입니다. 오늘은 프론트엔드 신입 개발자 기술 면접, 인터뷰를 대비하기 위해
자주 나오는 예상질문과 답변을 정리 해놓은것을 공유해드릴게요!!
- HTML의 기본 구조를 설명하세요.
- 답변: HTML 문서는 <!DOCTYPE html> 선언으로 시작하고, <html>, <head>, <body> 태그로 구성됩니다. <head>에는 메타데이터, 스타일시트 링크, 제목 등이 포함되고, <body>에는 실제 콘텐츠가 포함됩니다.
- CSS의 박스 모델에 대해 설명하세요.
- 답변: CSS 박스 모델은 요소를 네 부분으로 나눕니다: 콘텐츠(content), 패딩(padding), 보더(border), 마진(margin)입니다. 콘텐츠는 실제 내용, 패딩은 내용과 보더 사이의 공간, 보더는 요소의 테두리, 마진은 요소와 다른 요소 사이의 간격을 나타냅니다.
- Flexbox와 Grid의 차이점을 설명하세요.
- 답변: Flexbox는 1차원 레이아웃 시스템으로, 요소들을 주축과 교차축 방향으로 배치합니다. Grid는 2차원 레이아웃 시스템으로, 행과 열을 사용하여 복잡한 레이아웃을 만들 수 있습니다.
- JavaScript의 클로저(closure)에 대해 설명하세요.
- 답변: 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합입니다. 클로저는 함수가 외부 함수의 범위 내에 있는 변수에 접근할 수 있게 합니다.
- this 키워드의 의미와 사용 방법에 대해 설명하세요.
- 답변: this는 현재 실행 중인 컨텍스트를 가리킵니다. 함수 내에서는 함수가 호출된 객체를, 전역 컨텍스트에서는 전역 객체를, 이벤트 핸들러 내에서는 이벤트를 발생시킨 요소를 가리킵니다.
- 비동기 프로그래밍과 콜백, 프로미스, async/await의 차이점을 설명하세요.
- 답변: 비동기 프로그래밍은 코드가 블로킹되지 않고 다음 작업을 계속 진행하는 것을 의미합니다. 콜백은 함수에 다른 함수를 인수로 전달하는 것이고, 프로미스는 비동기 작업의 완료를 나타내는 객체입니다. async/await는 프로미스를 사용한 비동기 코드를 더 간결하게 작성할 수 있게 합니다.
- 이벤트 버블링과 이벤트 캡처링의 차이점을 설명하세요.
- 답변: 이벤트 버블링은 이벤트가 가장 깊은 요소에서 시작하여 부모 요소로 전파되는 것입니다. 이벤트 캡처링은 이벤트가 상위 요소에서 시작하여 목표 요소로 전파되는 것입니다.
- React의 상태(state)와 속성(props)의 차이점을 설명하세요.
- 답변: 상태(state)는 컴포넌트 내에서 관리되는 동적인 데이터입니다. 속성(props)은 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터로, 변경 불가능합니다.
- SPA와 MPA의 차이점을 설명하세요.
- 답변: SPA(Single Page Application)는 하나의 HTML 페이지로 구성되며, 페이지 간 이동 시 전체 페이지를 새로 로드하지 않습니다. MPA(Multi Page Application)는 각 페이지가 별도의 HTML 문서로 구성되어, 페이지 간 이동 시 전체 페이지를 새로 로드합니다.
- CSS 전처리기(SASS, LESS)에 대해 설명하세요.
- 답변: CSS 전처리기는 CSS를 더 효율적으로 작성할 수 있게 도와주는 도구입니다. SASS와 LESS는 변수, 중첩, 믹스인 등 다양한 기능을 제공하여 코드의 재사용성과 유지보수성을 높입니다.
- CORS에 대해 설명하고 해결 방법을 설명하세요.
- 답변: CORS(Cross-Origin Resource Sharing)는 다른 도메인에서 리소스를 요청할 때 발생하는 보안 문제입니다. 해결 방법으로는 서버에서 적절한 CORS 헤더를 설정하거나, 프록시 서버를 이용하는 방법이 있습니다.
- 웹 접근성이란 무엇이며 왜 중요한가요?
- 답변: 웹 접근성은 장애가 있는 사람들이 웹 콘텐츠를 접근하고 사용할 수 있도록 하는 것입니다. 이는 모든 사용자에게 공평한 접근을 보장하고, 법적 요구사항을 준수하며, 더 넓은 사용자 기반을 확보하는 데 중요합니다.
- HTTP와 HTTPS의 차이점을 설명하세요.
- 답변: HTTP는 HyperText Transfer Protocol의 약자로, 인터넷에서 데이터를 주고받기 위한 프로토콜입니다. HTTPS는 HTTP에 SSL/TLS 암호화를 추가한 것으로, 데이터 전송의 보안성을 높입니다.
- AJAX란 무엇인가요?
- 답변: AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 전체적으로 새로 고치지 않고도 서버와 데이터를 주고받을 수 있게 해주는 기술입니다. 이를 통해 더 빠르고 동적인 사용자 경험을 제공합니다.
- Document Object Model(DOM)이란 무엇인가요?
- 답변: DOM은 HTML, XML 문서의 프로그래밍 인터페이스로, 문서의 구조화된 표현을 제공하고, 이를 제어할 수 있는 메서드와 속성을 제공합니다. DOM은 트리 구조로 되어 있어 자바스크립트를 통해 요소를 조작할 수 있습니다.
- JavaScript의 이벤트 위임이란 무엇인가요?
- 답변: 이벤트 위임은 부모 요소에 이벤트 리스너를 설정하여 자식 요소의 이벤트를 처리하는 방식입니다. 이를 통해 성능을 최적화하고, 동적으로 추가된 요소에도 이벤트를 적용할 수 있습니다.
- 웹 저장소(Web Storage)에 대해 설명하세요.
- 답변: 웹 저장소는 브라우저에 데이터를 저장하는 방법으로, localStorage와 sessionStorage가 있습니다. localStorage는 만료되지 않고, sessionStorage는 세션이 끝날 때까지 데이터를 유지합니다.
- CSS 애니메이션과 트랜지션의 차이점을 설명하세요.
- 답변: CSS 트랜지션은 요소의 상태 변화에 대한 애니메이션을 정의합니다. 예를 들어, 마우스를 올렸을 때 색상이 변하는 애니메이션을 설정할 수 있습니다. CSS 애니메이션은 보다 복잡한 애니메이션을 정의할 수 있으며, 키프레임을 사용하여 여러 단계로 나눌 수 있습니다.
- JavaScript의 데이터 타입을 설명하세요.
- 답변: JavaScript의 데이터 타입은 기본 타입과 객체 타입으로 나눌 수 있습니다. 기본 타입에는 string, number, boolean, null, undefined, symbol, bigint가 있습니다. 객체 타입에는 object, array, function 등이 포함됩니다.
- 반응형 웹 디자인이란 무엇인가요?
- 답변: 반응형 웹 디자인은 다양한 기기와 화면 크기에 적응하여 웹 페이지가 최적의 사용자 경험을 제공하도록 하는 디자인 기법입니다. 미디어 쿼리, 유연한 그리드 레이아웃, 유연한 이미지 등이 반응형 웹 디자인의 핵심 요소입니다.
이렇게 프론트엔드 기술 면접,인터뷰에 자주 나오는 예상질문과 답변 정리 한것을 공유해드렸는데
도움이 되시길 바랍니다.
'코딩공부' 카테고리의 다른 글
| [React] 깃허브페이지 github page 404에러, url 새로고침 404에러 문제해결 (0) | 2024.06.16 |
|---|---|
| [React] 누르면 맨위로 움직이는 스크롤 버튼 만들기 top 버튼 (0) | 2024.06.13 |
| [python] 파이썬 크롬드라이브 설정,세팅 | 크롤링 크롬드라이버 (0) | 2024.06.11 |
| [python ] 엑셀 파일 csv 한글 깨질 때 , 인코딩하기 (0) | 2024.06.11 |
| [React] css 스타일 주는법 , styled-components 를 이용한 스타일 (0) | 2024.06.10 |
