프론트앤드 면접 질문 정리(작성 중)
1. 로컬 스토리지, 세션 스토리지, 쿠키를 각각 설명해보세요
쿠키는 만료 기한이 있는 key, value 형태의 저장소이다.
쿠키의 단점은 크게 3가지 정도가 있으며 각각 매 HTTP 요청마다 api호출로 서버에 부담을 주는 것과 쿠키의 적은 용량 그리고 암호화가 존재하지 않다는 점이다. 이러한 단점을 보완하고자 HTML5에서 웹 스토리지라는 기술이 나오게 되었고
웹 스토리지안에 로컬 스토리지와 세션 스토리지가 있다.
로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성이다, 로컬 스토리지는 유저가 직접 데이터를 지우기 전까지 브라우저에 데이터가 남으며, 세션 스토리지는 유저가 윈도우나 브라우저 탭을 닫을 경우 제거된다.
따라서 지속적으로 필요한 데이터는 로컬 스토리지에, 잠깐 동안 필요한 정보는 세션 스토리지에 저장하는게 좋다.
하지만 비밀번호와 같이 중요한 정보는 저장하면 안된다.
2. 로컬 스토리지와 쿠키의 차이점을 설명해보세요
가장 큰 차이는 모든 HTTP 요청에서 데이터를 주고받을 필요가 없다는 점이다.
또한 최대 4KB밖에 저장하지 못하는 쿠키와 달리 로컬스토리지는 최대 5MB의 정보를 저장할 수 있다.
로컬스토리지를 사용하면 문자열 뿐만아니라 javascript의 primitives(원시 값)와 object(객체)도 저장할 수 있다.
3. 자바스크립트 this란 무엇인가요?
this는 현재 호출자가 누구인지를 물어보는 것과 동일하다.
this는 기본적으로 window이지만, 객체 매서드, bind call aplly, new일 때 this가 바뀐다.
4. 자바스크립트 이벤트 관리 방법?
5. 자바스크립트 비동기 처리에 대한 설명해보세요
6. 바벨이 무엇인가요?
7. NPM이란 무엇인가요?
8. 자바스크립트 프레임워크를 사용해봤는지? 사용해봤다면 어떤걸 사용했는지? 사용한 이유를 말씀해주세요
9. CORS란 무엇이고 해결하기 위한 방법을 아는 대로 모두 설명해주세요
10. 프론트엔드 성능 최적화란? 성능 최적화 경험이 있다면 말씀해주세요
11. Virtual DOM에 대해 말씀해주세요
12. 웹 서비스 배포 시스템 구축 경험이 있으시다면 말씀해주세요
13. SEO란? 무엇인가요?
14. REST API가 무엇인가요?
-> REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 이러한 REST를 기반으로 서비스 API를 구현한 것을 의미합니다.
15. SSR과 SPA의 차이점에 대해 말씀해주세요
16. 브라우저의 랜더링 과정에 대해 말씀해주세요
-> 우선 랜더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에 출력하는 과정입니다.
랜더링 과정은 다음과 같습니다.
DOM & CSSOM트리 구축 -> 렌더 트리 구축 -> 렌더 트리 배치 -> 렌더 트리 그리기(출력)
브라우저가 렌딩할 문서를 읽을때 HTML과 CSS를 나눠서 읽고 각각 연산과 관리가 가능하도록 DOM & CSSOM으로 만든다. (OM은 object Model을 의미한다)
만들어진 DOM & CSSOM을 통해 렌더 트리를 구축하고 브라우저의 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산하여 배치합니다. 이 과정이 끝나면 브라우저는 요소들을 실제 화면에 그리게(출력)됩니다.
17. HTTP와 HTTPS의 차이점에 대해 말씀해주세요
가장 큰 차이점은 보안성이다 HTTP에 Secure이 더해진 HTTPS는 서버에서 브라우저로 전송되는 정보가 암호화되지 않아 언제든 도난당할 수 있고 HTTPS는 이것을 막아준다.
다른 차이점으로는 검색엔진최적화(SEO)의 차이이다 구글에서도 HTTPS 사용을 권고하고 가산점을 주며 일반 사용자들도 결국에는 가장 안전한 웹사이트를 더 많이 방문하고자하기 때문이다.
18. 함수형 프로그래밍에 대해 설명해주세요
19. .forEach()루프와 .map()루프 사이의 차이점에 대해 말씀해주세요
20. 호이스팅에 대해 설명해주세요
-> 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라고합니다.
21. Promise가 무엇인지 설명해주세요
22. Callback 대신에 promise를 사용할때의 장점과 단점에 대해 설명해주세요
23. ES6 클래스와 ES5 함수 생성자의 차이점에 대해 설명해주세요
24. 클로저가 무엇인지 설명해주세요
->
25. GET, POST에 대해 설명해주세요
26. 이벤트 루프에 대해서 설명해주세요
27. 이벤트 버블링에 대해서 설명해주세요
28. React를 사용하셨다면 상태관리는 어떻게 하셨나요?
29. var과 let, const의 차이점에 대해 설명해주세요
->
-
var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프입니다.
-
var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만 let, const는 에러가 발생합니다.
2-1. var의 경우 호이스팅이 되면서 초기값이 없으면 자동으로 undefined를 초기값으로하여 메모리를 할당하기에 에러가 발생하지 않습니다.
-
var는 이미 선언된 이름과 같은 이름으로 변수를 재선언해도 에러가 나지않지만 let, const는 에러가 발생합니다.
-
var, let은 변수 선언 시 초기 값을 주지않아도 되지만 const는 반드시 초기값을 할당해야합니다.
-
var, let은 값을 재할당할 수 있지만, const는 한번 할당한 값을 재할당할 수 없습니다.
(변경 가능한 값인 객체는 재할당 없이도 직접 변경 가능합니다.)
(새로운 값을 재할당하는 것은 불가능하지만 프로퍼티 동적 생성, 삭제, 프로퍼티 값의 변경을 통해 객체를 변경하는 것은 가능합니다. )
30. 버전관리는 어떻게 하시나요?
31. 컴파일러와 인터프리터의 차이가 무엇인가요?
32. 프로세스와 스레드의 차이가 무엇인가요?
33. 메모리가 어떻게 구성되어 있는지 설명해주세요
34. Array와 LinkedList의 차이가 무엇인가요?
35. HashTable에 대해서 설명해주세요
36. 자바스크립트의 원시 타입에 대해 말해주세요
37. Context-API에 대해 설명해주세요
38. React 클래스형과 함수형의 차이에 대해 설명해주세요
39. 라이프사이클 메서드에 대해서 설명해주세요
40. 라이브러리와 프레임워크에 대해 설명해주세요
41. JSX에 대해 설명해주세요
42. state와 props의 차이점에 대해 설명해주세요
43. Redux에 대해 설명해주세요
44. React에서 스타일링하는 방법에 대해 설명해주세요
-
css file import
-
inline style
-
styled-components
-
scss, sass
45. 제어 컴포넌트와 비제어 컴포넌트의 차이를 설명해주세요
46. React hooks에 대해 설명해주세요.
47. 웹소켓에 대해 설명해주세요
48. ESLint에 대해 설명해주세요
49. "==" 과 "==="의 차이점에 대해 설명해주세요
// ==은 동등 비교이고 ===은 일치 비교로
x == y; // 는 x와 y의 값이 같을때,
x === y; // 는 x와 y의 값과 타입이 같을때이다
// 주의점은 NaN이다, NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === Nan; // false50. function 과 arrow function의 차이
->
-
화살표 함수는 인스턴스를 생성할 수 없는 non-constructor입니다.
-
화살표 함수는 중복된 매게변수 이름을 선언할 수 없습니다.
-
화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않습니다.
Author And Source
이 문제에 관하여(프론트앤드 면접 질문 정리(작성 중)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@qlemql/프론트앤드-면접-질문-정리작성-중저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
