프론트엔드 기술 면접 질문과 답변

반응형

 

프론트엔드 개발자 이직 준비를 하면서 직접 질문을 받았던 내용을 대해서 정리해 보았습니다.

컴퓨터 공학 관련 질문, 자바스크립트, SPA 프레임워크, 웹 관련 질문과 프로젝트 경험 등 다양하게 질문을 하고, 꼬리에 꼬리를 무는 질문을 주로 많이 합니다.

아래 내용 참고하시고 면접에서 좋은 결과 있으시기를 바라겠습니다.

부족한 부분이나 피드백은 언제나 환영입니다😀

 

프로토 타입

프로토 타입이 무엇인가요?

  • 자바스크립트 가장 상위의 프로토 타입 객체
  • 모든 자바스크립트 객체는 Object.prototype을 상속받는다.

프로토 타입으로 할 수 있는 게 무엇인가요?

  • 프로토 타입에 메서드 프로퍼티 추가
  • 상속으로 기존 클래스의 메서드와 프로퍼티를 사용

Object.prototype은 무엇인가요?

  • 자바스크립트 객체를 생성할 때, prototype을 같이 생성한다
  • 아래 프로토 타입을 통해서 메서드 및 프로퍼티를 상속받을 수 있다.
  • 프로토 타입이 연결되는 것은 프로토 타입 체인

 

클로저란 무엇인가요? 언제 사용하는가요?

  • 클로저는 자신(함수)이 생성될 때, 자신의 스코프에서 알 수 있는 변수를 기억하는 함수입니다.
  • 이전 상황을 나중에 일어날 상황과 이어나갈 때, 사
  • 함수와 함수의 조합에서 자바스크립트 변수, 함수, 스코프 정보를 유지하는 내부 구조의 조합입니다.
  • 함수가 생성될 때, 해당 스코프에 대한 참조를 유지하여, 스코프의 변수에 접근할 수 있는 함수 
  • 정보 은닉, 데이터 보존, 콜백 함수 상황에서 사용 가능
 

자바스크립트 - 클로저란? (closure)

클로저란? 클로저는 영어로는 closure 폐쇄라는 뜻을 가지고 있습니다. 자바스크립트에서 클로저는 이렇게 정의할 수 있습니다. 클로저는 자신(함수)이 생성될 때, 자신의 스코프에서 알 수 있는

powerku.tistory.com

Virtual DOM이란 무엇이며 어떻게 동작하나요?

  • 가상 돔은 실제 DOM 구조를 메모리에 가상으로 구성
  • 실제 DOM과 가상 DOM의 변경 사항이 발생했을 때, 실제로 변경된 부분만 리렌더링을 진행합니다.
  • DOM 조작을 최소화하기 때문에 웹 애플리케이션 성능 향상에 도움을 줌
  • React나 Vue에서 Virtual Dom을 사용

 

function 함수와 Arrow 함수

function 함수

  • 호이스팅이 발생
  • 생성자 함수로 사용 가능
  • this
    • 전역일 때 : window 
    • 메서드 실행 시 : 메서드를 소유한 객체
    • 함수 : 자기 자신

Arrow 함수 () => {}

  • 호이스팅이 일어나지 않는다
  • 프로토 타입이 없음 -> 생성자 함수로 사용 불가
  • this
    • 상위 scope의 this를 가리킨다. 
 

자바스크립트 - function vs Arrow 함수 무엇을 사용하는 것이 좋을까?

자바스크립트에 함수를 만들 수 있는 방법이 일반적으로 function 함수가 있고 ES6 문법 이후로 Arrow 함수가 생겼습니다. function 함수 함수를 만드는 일반적인 방법입니다. function add(a, b) { return a + b;

powerku.tistory.com

 

호이스팅이란?

  • 호이스팅은 끌어올리다는 뜻으로 변수 및 함수를 가장 상단에 끌어올려지게 되는 것을 이야기한다.
  • 자바스크립트 코드를 실행하는 과정에서 호이스팅이 생김
  • 변수와 함수들을 실행 컨텍스트에 key-value 형태로 저장 후 코드가 순차적으로 실행되게 된다.
 

자바스크립트 - 호이스팅이란? (hoisting)

호이스팅이란? hoist는 영어로 끌어올리다는 뜻입니다. 호이스팅은 변수와 함수를 선언할 때, 자신의 스코프 최상단으로 끌어올려서 어디서든 볼 수 있도록 하는것을 호이스팅이라고 합니다. 호

powerku.tistory.com

함수형 프로그래밍 객체 지향형 프로그래밍

함수형 프로래밍이란?

  • 함수형 프로그래밍은 항상 동일하게 동작하는 함수를 만들고 보조 함수를 이용해서 로직을 완성하는 방식으로 프로그래밍을 하는 방법입니다.
 

자바스크립트 - 함수형 프로그래밍이란?

함수형 프로그래밍이란? 함수형 프로그래밍은 항상 동일하게 동작하는 함수를 만들고, 보조 함수를 이용해서 로직을 완성하는 방식으로 프로그래밍을 하는 방법입니다. 예시 function map(array, cond

powerku.tistory.com

객체 지향형 프로그래밍이란?

  • 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 객체들 간의 상호작용으로 프로그램을 구성하는 방법
  • 장점
    • 코드 재사용 가능
    • 유지보수 용이
    • 대형 프로젝트에 적합
    • 추상화, 캡슐화, 상속, 다형성

function과 class 차이

function 함수

  • 프로토 타입 기반으로 상속 가능
  • myFunction()을 통해서 인스턴스 생성 가능

class 함수

  • es6 문법
  • 일반적으로 new를 통해 인스턴스 생성
  • 생성자 사용 가능
  • extends를 통해서 상속 부모 클래스의 변수와 메서드를 상속 가능
  • 정적 메서드 static 사용 가능

타입스크립트 장단점

  • 장점
    • 타입을 강제화하여 오류 수를 줄여준다.
    • 객체지향형 프로그래밍이 가능하다
    • 유지보수에 용이
  • 단점
    • 타자수가 많아진다
    • 공부가 필요함
    • 잘 모르는 사람이 타입스크립트를 사용하게 되면 any 속성을 남발하기 때문에 사용의 의미가 없어짐
    • 타입스크립트를 컴파일하기 위한 시간이 필요하고 추가적인 빌드가 필요함
 

타입스크립트 장점? 언제 사용하면 좋을까?

타입스크립트란? 자바스크립트의 Superset(확대 집합)입니다. 자바스크립트의 장점과 새로운 기능들이 추가되었습니다. 타입스크립트는 파일을 컴파일해서 자바스크립트 코드로 만듭니다. 컴파

powerku.tistory.com

프론트엔드 성능 최적화 하는 방법

  1. 파일 압축과 최소화 : Javascript, css 파일 압축 및 최소화 주석 및 공백 제거
  2. 브라우저에 캐시 되는 리소스 활용
  3. 비동기 사용
  4. 코드 나누기: 필요한 코드만 초기에 로드되도록 사용
  5. DOM 조작 최소화: 가상 DOM이나, 프론트엔드 라이브러리 사용
  6. 서버사이드 렌더링: 서버에서 HTML 코드를 만들어서 로
  7. 자바스크립트 코드 최적화: 반복문 최적화, 비용이 큰 연산 코드 최적화 등
  8. 효율적인 API 요청: 무분별한 반복적인 API 호출 자제

웹접근성이란? 중요한 이유는 무엇인가요?

  • 모든 사람이 웹 콘텐츠 접근하고 이용할 수 있는 능력
  • 시각, 청각, 운동적 장애 또는 고령자, 저사양기기 사용 등을 포함
  • 웹 접근성이 중요한 이유는 공정성, 인권, 사회적 통합, 기술 혁신에 도움을 주며 웹 사이트의 접근 가능성에 향상을 줌

반응형 웹디자인이란?

  • 다양한 디바이스에서 화면 크기를 자동으로 대응하여 최적의 사용자 경험을 제공하는 디자인 접근 방식
  • 주로 CSS 미디어 쿼리를 사용

CORS(Cross-Origin Resource Sharing)란 무엇이며 왜 필요한가요?

  • 웹에서 다른 도메인으로 리소스를 요청하는 것을 허용하는 메커니즘
  • 일반적으로 보안상의 이유로 도메인이 같은 경우에 리소스 접근 가능
  • 하지만 다른 도메인 간의 데이터 공유도 필요하기 때문에 추가적인 설정을 통해 HTTP 메서드나 Requester Header에 인증 정보를 넣어서 전달하여 허용

XSS(Cross-Site Scripting) 공격이란 무엇이며 어떻게 방지할 수 있나요?

  • 악의적인 사용자가 고의적으로 스크립트를 삽입하고 해당 스크립트를 사용자의 브라우저에 실행되도록 하는 공격입니다.
  • 방지할 수 있는 방법은 입력 데이터 필터 검증 /출력 데이터 적절한 인코딩(html 태그 제거 및 escape 처리) 하는 방법이 있습니다. 

쿠키(Cookie)와 세션(Session)의 차이

쿠키

  • 클라이언트 저장
  • 클라이언트에 수정이 가능하여 보안에 취약
  • 만료 날짜와 시간 설정이 가능하여 지속적 또는 일시적으로 사용 가능

세션

  • 서버에 저장
  • 세션 ID를 생성하여 서버나 데이터 베이스에 저장
  • 클라이언트 측에서 수정이 불가 상대적으로 보안적으로 안전

로컬 스토리지(Local Storage) 세션 스토리지(Session Storage) 차이

웹브라우저 클라이언트 측에서 데이터를 저장하기 위한 웹스토리지 기술

로컬스토리지

  • 사용자가 직접 삭제하지 않는 이상 영구적으로 유지
  • 같은 도메인이면 데이터 공유 가능

세션스토리지

  • 탭이나 브라우저 종료 시에 데이터도 함께 삭제
  • 같은 탭 또는 같은 창에서만 데이터 공유 가능

 

 

 

728x90
반응형