본문 바로가기

기술면접

기술면접_스타트업_프론트엔드

 

10/11 기술 면접 정리

<자바스크립트>

1.1 call by value와 call by reference에 대해서 설명해주세요.

1.2 string은 call by value에 의해 참조되는가? array는 call by reference에 의해 참조되는가?

아래 링크에 따로 javascript call by value와 call by reference에 대하여 정리해 놓았습니다.

https://spoit.tistory.com/30 

 

2. 화살표 함수의 this에 대해서 설명해주세요

나의 대답: 화살표 함수는 상위 레벨의 this를 가리킨다. 자바스크립트의 this는 기본적으로 window이다.

=> (내가 생각해도 논리적으로 말하지 않았다.)

다시 알아본 답: 자바스크립트에서 this는 몇 가지 예외를 제외하고 동적으로 바인딩 된다. 즉 실행 문맥에 의해서 this의 값이 정해진다. 몇 가지 예외 중 하나가 말씀해주신 화살표 함수로서 정적으로 바인딩 되는 것이다. 즉 함수안의 함수에 화살표 함수가 사용될 경우 this는 상위함수를 가르키게 된다.

예외 1) 객체 내의 메서드의 경우 this의 값은 정적 바인딩 된다.

예외 2) 화살표 함수에서 this의 값은 정적 바인딩 된다. 즉 함수인의 함수의 경우 window를 가리키는 것이 아니라 외부 함수를 가리키게 된다. 그렇기 때문에 화살표 함수를 객체 내의 메서드에서 사용하면 문제가 된다.

 

3. cors 이슈에 대해서 설명해 주세요.

나의 대답: (cors의 역사부터 말하면서 꼬이기 시작) 동일 정책 출처 대응하기 위해 cors 프로토콜이 생성되었는데 포트와, 도메인이 다를 경우 서버에서 클라이언트의 요청을 거부하는 것이다.

다시 알아본 답: 보내는 측의 포트, 호스트, 프로토콜이 요청 서버와 다를 때 접근이 거부되는 이슈이다. 동일 출처 정책을 대응하기 위해 cors프로토콜을 만들어 놓았고 이와 관련된 문제를 cors이슈라고 한다. 서버의 응답 헤더로 Access-Control-Allow-Origin 등을 설정해주어 상황별로 요청을 받아들일 수 있다.

 

<기타>

4. 웹 팩, 바벨, eslint에 대해서 설명해주세요. (보완예정)

 => 웹 팩은 js, css, 파일들을 번들링 해주어 하나의 파일로 만들어준다. 하나의 파일로 만들어주기 때문에 http 프로토콜 사이에서 서버와 클라이언트 간의 통신 속도를 더 빠르게 할 수 있다.

면접관 => 속도 이슈에 대해서 더 자세히 설명해주세요.

 => 추상적으로 이해하고 있어서 잘 모르겠다.

바벨

바벨은 언어 변환기이다. 자바스크립트의 경우 최신언어를 지원하지 않는 브라우저들이 있을 수 있는데 바벨을 사용하면 최신문법이나 메서드들을 구버전으로 변환하여준다.

ESLINT

팀원들간 협업을 위해 에어비엔비 스타일과 같이 코드스타일을 강제하는 것이다.