프론트엔드 기술면접 인터뷰 질문 모음

프론트엔드 기술면접 인터뷰 질문 모음

 

 

Frontend 필수 언어

 

중요도	설명
⭐️⭐️⭐️⭐️⭐️	프론트 엔지니어를 꿈꾼다면 정확히 알고 있어야 하는 것들. 하나라도 모르면 떨어진다고 봐도 무방. 꼭 알고가쟈~
⭐️⭐️⭐️⭐️	90% 이상을 알아야하며 많이 대답한다고 좋은게 아니라 정확하게 대답해야 함. 본인이 프론트엔드 엔지니어라고 말하고 싶다면 필수적으로 알아야 함
⭐️⭐️⭐️	Javascript 프레임워크, 플러그인, 그 외 사용법 등 중요한 질문
⭐️⭐️	가볍고 기본적인 질문
⭐️	알면 가산점이나 모른다고 크게 등락에 영향은 없음. 그리고 그 외적인 것

 

 

⭐️⭐️⭐️⭐️⭐️

1. 브라우저 렌더링 원리

1-1. 홈페이지가 사용자에게 보이는 순서에 대해 설명해주세요

 

-> https://d2.naver.com/helloworld/59361

 

 

2. 호이스팅에 대해 설명해 보세요

 

-> https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

-> https://www.youtube.com/watch?v=fETYLCU2YYc 

 

var 변수 선언, 함수 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않음

keyword: 변수 선언, 변수 할당 // 함수 선언문, 함수 표현식

 

 

3. 클로저는 무엇인가요? 원리와 왜 사용하는지 설명해 주세요

 

-> https://hyunseob.github.io/2016/08/30/javascript-closure/

내 정리 : https://dean30.tistory.com/100

 

4. CSS에서 margin과 padding에 대해 설명해주세요

 

https://www.w3schools.com/css/css_margin.asp

 

4-1 position을 어떻게 사용하는지?

 

내 정리 : https://dean30.tistory.com/102

 

 

5. GET, POST가 어떻게 다른지?

 

 

⭐️⭐️⭐️⭐️

1. this의 용법 아는대로 설명해주세요

 

-> https://poiemaweb.com/js-this

- 내 정리 : https://dean30.tistory.com/106

 

2. 브라우저 저장소에 대해 차이점을 설명해 주세요 (Localstorage, Sessionstorage, cookie)

 

3. Restful API에 대해 아는대로 설명해 주세요 (GET, PUT, POST, PATCH, OPTION, DELETE)

 

4. Javascript는 어떤 언어인가요? -> 싱글 스레드 언어

4-1 하지만 실제 사용시에는 멀티 스레드처럼 사용하는데 어떻게 사용하나요?

4-2 비동기적으로 실행이 되는 것을 동기적으로 코딩하는 방법이 있나요?

 

-> https://realmojo.tistory.com/109

-> https://boxfoxs.tistory.com/294

- 내 정리 : https://dean30.tistory.com/manage/posts/

 

 

5. Event Loop에 대해 알고 있나요?

 

-> https://im-developer.tistory.com/113

 

6. 이벤트 버블링에 대해 말씀해 주세요

6.1 이벤트 버블링은 기본적으로 child -> parent인데 반대로 구현하는 법은?

6.2 이벤트 버블링을 막기위한 방법은?

6.3 이벤트 버블링을 잘 활용하면 어떻게 사용할 수 있을까요?

 

-> https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

 

7. 타입스크립트에 대해 사용해 본적이 있나요? 어떤지 말씀해주세요

 

8. 실행문맥에 대해 설명해주세요. (자주 물어보진 않음. 그러나 알아야 함)

 

-> https://poiemaweb.com/js-execution-context

내 정리 :

 

⭐️⭐️⭐️

1. HTML이 렌더링 중에 javascript가 실행되면 렌더링이 멈추는데 그 이유는 무엇인가요?

 

2. 현재 javascript 프레임워크를 사용하는 것과 그 선택을 한 이유

2-1 프로젝트를 진행할 때 어떤 javascript 프레임워크를 선택할 것인가? 그 이유?

2-2 최근 사용되는 javascript 프레임워크에 대해 차이점과 장단점? 언제 어떻게 사용해야 할까?

 

3. SPA와 서버사이드 렌더링의 차이점은 무엇인가요?

 

4. require과 import의 차이점은 무엇인가요

 

5. SASS, SCSS를 사용해본 적이 있나요? 기존 CSS와 비교할 때 어떤면이 더 좋은가요?

 

6. Javascript 성능 최적화를 위해 어떤 것을 적용해 보았나요?

 

7. Vue & React

7-1 Vue와 React의 차이는 무엇인가요?

7-2 Vue 혹은 React를 사용해봤다면 상태관리는 어떻게 구현했나요?

7-2 라이프 사이클을 가볍게 설명해 주세요

7-3 Vue에서 양방향 데이터가 일어나는 원리에 대해 설명해주세요

 

8. 무작위 데이터에 대해서 테스트는 어떻게 하시나요?

 

9. ES6에서 Arrow 함수를 언제 쓰나요? 왜 쓰나요?

 

-> https://poiemaweb.com/es6-arrow-function

내 정리 : https://dean30.tistory.com/107

 

10. var, let, const 차이점

 

11. CORS를 대처하는 방법과 우회하는 방법

 

12. MVVM 모델에 대해 설명해 주세요

 

 

⭐️⭐️

1. CSS에는 Box-model 이라는 것이 있다. 이때 width의 값을 차지하는 크기는 어떻게 될까요?

 

2. 이진트리에 대해 말씀해 주시고 종류는 어떻게 될까요? 실제 적용해본 경험이 있나요?

2-1 Javascript로 트리를 구현할 수 있나요?

 

3. git을 사용해보신 적이 있나요? 어떤식으로 사용했나요?

 

4. HTTP 0.9/1.0의 차이를 말씀해주세요

 

 

⭐️

1. 협업에 대해 어떻게 생각하시나요

 

2. 스켈레톤 UI에 대해 적용해본 적이 있나요?

 

3. 이후 시간 있을 때, Frontend 향상을 위해 어떤 노력을 할 것인가요?

 

4. 프론트엔드 주제를 가지고 발표를 해야한다면 바로 가능한게 있을까요?

 

 

 

 

 

 

참조: https://realmojo.tistory.com/300