프론트엔드 관련 면접 예상 질문

1. DOCTYPE 를 선언하지 않으면 어떤일이 발생하나요?

 

2. 브라우저 렌더링 요소 중 Reflow, Repaint 의 정의와 관련되는 대표적인 CSS 속성은 무엇인가요.

 

3. <script> 태그의 defer, async 속성의 차이는?

 

4. 쿠키, 로컬스토리지, 세션스토리지의 차이점은?

 

5. 점진적 향상법 (Progressive enhancement)과 우아한 성능 저하법 (graceful degradation)의 차이점?

 

6. FOUC 는 왜 생기는 건가요? 어떻게 피할 수 있는지 ?

 

7. CSS에서 floating clearing 하지않으면 어떤일이 발생하고 왜 이런일이 발생하는지 ?

 

8. CSS의 box-model 에서 블록요소의 영역을 차지하는 CSS속성은?

 

9. 자바스크립트에서 =, ==, === 의 차이점?

 

10. 매개변수이름 foo 의 값이 존재하지 않으면 false, 존재하면 true 를 반환하는 함수 bar 을 ES6 Arrow Function을 이용해 한줄로 작성해 주세요.

 

11. 자바스크립트 이벤트 루프에서 마이크로 태스크는 자바스크립트의 어떤 구문으로 사용해야 할까요?

 

12. 자바스크립트에서 객체 및 배열 자료형은 왜 불변성 형태로 관리(특히 리액트나 뷰에서)되어야 하나요?

 

13. 자바스크립트에서 이벤트 버블링과 캡쳐링에 대한 차이점?

 

14. 순수함수라는 것은 어떤것을 의미하나요?

 

15. CDN(Content Delivery Network) 의 정의와 언제 어떻게 사용해야할 지 ?

 

16. CORS (Cross Origin Resource Sharing) 에 대한 설명을 작성 해 주세요. 그리고 어떤방법으로 위 이슈를 해결할 수 있는지?

 

17. HTTP/1.1, HTTP/2 의 차이점?

 

18. 가장 최근에 흥미있게 보았던 혹은 관심이 있는 웹 프론트엔드 분야의 기술적인 내용이 있는지?

 

const, let, var의 차이는 무엇인가요?

 

일반 function 표현식과 arrow function 표현식의 차이는 무엇인가요? 어떤 방식을 선호하며 이유는 무엇인가요?

 

React hook에는 어떤 종류가 있나요? 각각의 용도는 무엇인가요?

 

비동기 구문의 실행 방식과 순서에 대해서 이야기 해 주세요.

 

Jest와 같은 테스트 프레임워크 사용 경험