협업 시 힘들었던점?
객체지향 vs 함수형?
고차함수?
클로저?
실행 컨텍스트?
첫 화면 로딩을 저해하는 요인?
회사를 선택할 때 중점적으로 보는 조건?

프론트엔드 면접 예상 질문

  1. 객체 지향 프로그래밍과 함수형 프로그래밍이란?
  • 객체 지향 프로그래밍 : 객체 지향이란 실제 세계를 모델링하여 소프트웨어를 개발하는 방법입니다. 객체 지향 프로그래밍에서는 데이터와 절차를 하나의 덩어리로 묶어서 생각하게 됩니다. 객체 지향의 특성으로 몇 가지가 있습니다.

첫 번쨰, 캡슐화가 있습니다.
두 번째, 상속이 있습니다.
세 번째, 다형성이 있습니다.

  • 함수형 프로그래밍 : 함수형 프로그래밍은 말그대로 함수를 기반으로 돌아갑니다. 함수형 프로그래밍은 몇 가지 원칙이 있습니다.
    첫 번쨰, 입출력이 순수해야 합니다.
    두 번쨰, 부작용이 없어야 합니다.
    세 번쨰, 함수와 데이터를 중점으로 생각합니다.

여기서 입출력이 순수해야 한다는 말은, 반드시 하나 이상의 인자를 받고 받은 인자를 처리하여 반드시 결과물을 돌려주어야 한다는 것입니다. 인자를 제외한 다른 변수를 사용하면 안되고 결과물을 내어야 합니다. 이러한 함수를 순수함수라고 부릅니다.

부작용이 없어야 한다는 말은 프로그래머가 바꾸고자 하는 변수 외에는 바뀌어서는 안됩니다. 즉, 원본 데이터는 불변해야 합니다.

정리하자면, 함수형 프로그래밍에서는 프로그래머가 모든 것을 예측하고 통제할 수 있어야 합니다.

함수형 프로그래밍을 하게 되면 쉽게 에러를 추적할 수 있고 코드의 재사용성이 높아집니다.

객체 지향 프로그래밍은 객체라는 경계에 따라 공유 범위를 제한한다. 일부 상태는 객체 외부로부터 숨길 수 있으며 모듈화된 그릇에 상태를 모아 관리하기 때문에 명령적 프로그래밍에 비해 구조적으로 변화한 형태다.

함수형 프로그래밍은 여기서 더 나아가 공유 상태를 함수 볌위로 제한하는 방향을 지향한다. 결국 순수한 함수형 언어에선 상태가 함수 밖으로 드러나지 않으며, 함수는 Input/Output만을 제공하고 상태의 측면에서는 완전한 블랙박스가 된다. 따라서 프로그래밍의 구조화 정도는 객체 지향적 개념보다 함수형 프로그래밍이 더 높아 보인다.

  1. this에 대해 설명하시오.

생성자 함수 내부에서 프로퍼티 또는 메서드를 추가하기 위해 인스턴스를 참조할 수 있어야 합니다. 그런데, 생성자 함수를 정의하는 시점에는 인스턴스가 생성되기 이전이므로 생성자 함수가 생성할 인스턴스를 가리킬 식별자를 알 수 없습니다. 이를 위해 this라는 특별한 식별자가 제공됩니다.

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. this를 통해 자신이 속한 객체나 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다.

함수를 호출하면 this가 암묵적으로 함수 내부로 전달되는데, this가 가리키는 값은 함수 호출 방식에 의해 동적으로 결정됩니다.

  • 일반 함수로서 호출할 때 : this는 window
  • 메서드로서 호출할 때 : this는 메서드를 호출한 객체를 가리킨다.
  • 생성자함수로서 호출할 때 : this는 인스턴스를 가리킨다.
  1. 실행 컨텐스트에 대해 설명하시오.

실행 컨텍스트를 알면 자바스크립트가 어떻게 코드를 읽고 실행하는 지에 대해 이해할 수 있습니다.

전역 코드에 foo함수와 bar함수가 있고 foo 함수 내부에 bar 함수가 선언되고, 호출하는 식이 있다고 생각해봅시다.

자바스크립트는 소스코드 평가 단계와 소스코드 실행 단계를 나누어 실행합니다. 소스코드 평가 단계에서는 실행 단계에서 사용할 선언문들을 먼저 실행합니다. 이때 전역 실행 컨텍스트가 생성되고 실행 컨텍스트에 푸쉬됩니다. 평가 단계에서 선언한 선언문들은 전역 실행 컨텍스트에 등록이 됩니다.

평가 단계가 끝나고 실행 단계로 돌입하면 선언문의 값들이 할당되고 호출문이 있다면 실행됩니다.

foo함수가 호출됐다면, foo 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸쉬됩니다. foo 함수 내부의 변수들이 함수 실행 컨텍스트에 등록이 됩니다. 이후에 foo 내부에서 bar가 호출됐다면 foo 함수 실행 컨텍스트 위로 bar 함수 실행 컨텍스트가 쌓입니다.

bar함수의 호출문이 종료되면 bar함수 실행 컨텍스트가 스택에서 팝되고 foo함수도 차례대로 팝되어 제거됩니다. 이렇게 모든 코드가 종료된다면 전역 실행 컨텍스트도 팝되어 제거됩니다.

  1. 클로저에 대해 설명하시오.

클로저는 상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용됩니다. MDN에서 정의하고 있는 클로저란, 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다.

정의에 따르면 모든 함수는 사실 클로저이지만, 일반적으로 모든 함수를 클로저라고 하지 않습니다. 중첩 함수가 외부 함수보다 더 오래 살아남고 자유 변수를 참조하고 있을 경우 클로저라고 합니다.

  1. Ajax란?

Ajax란 브라우저가 서버에 비동기적으로 데이터를 요청하고 서버에서 받아온 데이터를 동적으로 갱신하는 프로그래밍 방식을 ajax라고 합니다. ajax는 브라우저에서 제공하는 web API인 XMLHTTPRequest 객체를 기반으로 동작합니다.

XMLHTTPRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공합니다.

ajax는 클라이언트 사이드 랜더링이다. 클라이언트 사이드 랜더링은 서버에서 데이터를 json 형식으로 가져와 클라이언트 쪽에서 랜더링하는 방식이고 서버 사이드 랜더링은 서버에서 랜더링을 해서 그 정보를 클라이언트에 넘겨주는 방식이다. 서버 사이드 랜더링은 화면을 랜더링 할때마다 화면이 깜빡거리는 단점이 있다. 하지만 seo 측면에서는 클라이언트 사이드 랜더링보다 더 뛰어나고 초기에 화면이 먼저 그려지고 기능은 천천히 구현되어 사용자의 이탈율이 적다. 반면, 클라이언트 사이드 랜더링은 기능과 화면이 같이 그려져 사용자의 이탈율이 클 수 있다.

따라서 최초의 화면은 서버 사이드 랜더링 방식으로 한 후에 나머지는 클라이언트 사이드 랜더링 방식을 사용하는 것이 좋다.

  1. REST API란?

REST API는 클라이언트와 서버가 쿼리를 통해 데이터를 주고 받는 형식이다.
REST API는 자원, 행위, 표현 세 가지로 구성되어 있다. HTTP URI를 통해 자원을 명시하고, HTTP 요청 메서드를 통해 해당 자원의 CRUD Operation을 적용한다.

  1. 자바스크립트 2015(ES6)에 대해서 설명하시오.

  • let, const 키워드가 도입되었습니다.
    var 키워드는 함수 레벨 스코프를 따랐지만 let과 const의 등장으로 블록 레벨 스코프를 사용할 수 있게 되었다.

  • 디스트럭처링 할당
    배열이나 객체의 속성을 분해해서 그 값을 개별 변수에 담을 수 있습니다. 인수로 배열 또는 객체를 받아온다면 todo.id, todo.content 처럼 todo를 반복적으로 사용해야 하는데 속성을 분해해서 저장해 반복을 줄일 수 있습니다.

  • 스프레드 문법
    concat과 같은 기능으로 배열을 풀어서 사용할 수 있습니다. concat은 원본 배열을 훼손하지만 스프레드 문법은 원본을 훼손하지 않습니다.

  • Rest 파라미터
    가변 인자를 배열로 나타낼 수 있습니다. ES6 이전에는 arguments 객체가 가변 인자들을 관리했습니다. arguments 객체와의 차이점은 arguments 객체는 유사 배열로 배열 메서드를 사용할 수 없지만 Rest 파라미터는 배열로, 배열 메서드를 사용할 수 있습니다.

  • 화살표 함수
    화살표 함수는 기존의 함수와 비교해 표기법도, 내부적으로도 가벼워졌습니다. 화살표 함수는 생성자 함수를 생성할 수 없어 constructor가 존재하지 않고 내부적으로 this와 arguments 바인딩도 하지 않습니다.

  1. 타입스크립트의 장단점?

타입스크립트의 장점 :

  • 내가 만든 실수를 VS CODE 상에서 미리 알 수 있게 해줍니다.
  • 혹시나 생길 수 있는 타입 버그들을 사전에 방지해준다.
  • 내가 만든 함수, 쿼리문들을 기억하게 해준다.

타입스크립트의 단점 :

  • 테스트 프레임워크 사용이 용이하지 않다.
  • 디버깅이 용이하지 않다.

  1. 고차함수와 함수형 프로그래밍의 연관성은 무엇인가요?

  2. SPA를 사용하는 이유는 무엇인가요?

  3. SSR과 CSR에 대해서 설명하시오.

  4. img태그를 사용해서 이미지를 삽입하는 방식과 background로 이미지를 삽입하는 방식의 차이점에 대해 설명하시오.

  5. 정적 타입과 동적 타입에 대해서 설명하시오.