프론트엔드 개발자 기술면접 질문 정리

프론트엔드 개발자 기술면접시 나올 수 있는 몇 가지 질문에 대해 정리해 봄

 

 

http 와 https 의 차이

 

http 는 하이퍼 텍스트 전송 프로토콜의(Hypertext Transfer Protocol)의 약자로써, 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜이다. https 는 기존 http에 보안(security)이 추가된 것으로, 서버에서 브라우저로 전송되는 정보가 암호화되지 않는 http의 약점을 보완한 프로토콜이다.

HTTPS 프로토콜은 SSL(보안 소켓 계층)을 사용함으로써 이 문제를 해결했는데, SSL은 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고, 서버 브라우저가 민감한 정보를 주고받을 때 이것이 도난당하는 것을 막아주는 인증서 소프트웨어이다. 

보안상의 이점이 있으나, 이로 인해 https는 http에 비해 속도가 느리다는 단점도 가지고 있다.

 

자바스크립트의 원시타입과 객체타입의 차이

 

자바스크립트의 원시타입이란 주소를 참조하는 형태의 객체(데이터)가 아닌 값을 표현하는 데이터 타입이다. 다음과 같은 것들이 자바스크립트 원시타입이다. 

 

- boolean

- number

- string

- null

- undefined

 

원시타입에는 메소드가 정의되어 있지 않다. 주소를 참조하는 것이 아닌 값을 저장하는 타입이므로 원시타입 데이터는 불변성(immutable)을 특징으로 가진다. 원시타입은 값을 저장하므로 비교 연산 시에 값이 비교 대상이지만, 참조타입은 주소를 참조하므로 비교 연산 시에 주소값을 비교 대상으로 한다.

 

최신 자바스크립트의 호환성 문제를 해결하는 방법

 

대개 ES6 버전 이상의 자바스크립트부터 브라우저에서 호환되지 않는 경우가 발생하기 시작하는데, 이를 바벨(babel)이라는 트랜스파일러를 사용해 ES6 이하 버전의 문법으로 변환하는 과정을 거치면 거의 모든 브라우저에서 프로그램을 동작시킬 수 있다.

 

트랜스파일러란? 브라우저에서 호환되지 않는 ES6 이상 문법을 ES5로 컴파일(변환)하는 과정을 트랜스파일링(transpiling)이라 부르고, 이러한 역할을 하는 소프트웨어를 트랜스파일러라 한다. 가장 유명한 트랜스파일링 도구가 바벨이다.

 

var, let, const 의 차이

 

ES6 이전에는 var만이 변수를 선언하는 유일한 방법이었다. let과 const는 var를 대체함과 동시에 각각 더 나은 기능을 제공한다.

 

const는 상수를 제공하는 키워드이다. 변수는 값을 변경할 수 있지만, 상수는 값을 변경할 수 없다. const를 사용한 상수 선언 시에는 초기화를 동반해야 하며, 이후 변경은 불가하다.

 

let은 구문적 변수 영역 규칙을 도입한 키워드이다. var의 경우 코드 블록 안에서 변수가 선언된다고 해도 변수의 영역이 그 블록 안으로만 한정되지 않아 다른 언어에 익숙한 사용자에게 혼란을 야기한다. 

 

let과 var를 비교한 예제

var topic = "자바스크립트"
if(topic != ""){
  var topic = "잡아스크립트"
  console.log("블록", topic); // 블록 잡아스크립트
}
console.log("전역", topic); // 전역 잡아스크립트

var topic = "자바스크립트"
if(topic != ""){
  let topic = "잡아스크립트"
  console.log("블록", topic); // 블록 잡아스크립트
}
console.log("전역", topic); // 전역 자바스크립트

 

자바스크립트 화살표 함수

 

화살표 함수 표현은 기존 function 표현에 비해 구문이 짧고 스스로의 this를 바인딩하지 않는다.  화살표 함수가 나오기 전까지는, 모든 새로운 함수는 함수가 어떻게 호출되는지에따라 this 값을 정의했다. 그러나 화살표 함수는 this를 가지지 않는다. 따라서 화살표 함수가 호출되면 자신의 바깥 범위에서 this를 찾는다.

 

this 키워드가 가질 수 있는 의미들

 

자바스크립트에서 this는 기본적으로 window 객체를 의미하지만, 언제나 그런 것은 아니다. 

var obj = {
  func:function(){console.log(this)},
  val: 0,
}
obj.func() // 여기에서는 this가 obj
var f = obj.func
f() // 여기에서는 this가 window

호출하는 함수가 객체의 메소드일 때, this는 객체를 가리키게 된다. 그러나 그냥 함수일 때는 여전히 window를 의미한다.

이 외에도 제이쿼리 라이브러리를 사용해 선택한 DOM 엘리먼트 또한 제이쿼리 메소드 내부에서는 this가 될 수 있다.

 

null과 undefined 의 차이

 

이 두 타입은 모두 기본적으로는 '값이 없음'을 의미한다. 그 중 undefined는 값이 할당되지 않은 변수를 의미한다. 즉 var나 let 등의 키워드를 통해 신규 생성된 변수의 기본값은 undefined라는 의미이다.

null은 명시적으로 값이 비어있음을 나타내는데 사용한다. 아무것도 참조하고 있지 않은 변수라는 의도를 직접적으로 반영하고자 할 때 null을 사용한다.

 

AJAX 란

 

자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다.
서버로부터 웹페이지가 반환되면 전체를 갱신해야하는데 , 이때 AJAX를 사용하면 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있다. 갱신이 필요한 부분만 로드하여 갱신하면 되므로 빠르고 부드러운 화면효과를 기대할 수 있다.

 

프로미스, async, await 에 대한 설명

 

프로미스는 비동기적인 동작을 다루기 위한 패턴이다. 비동기 요청을 보내면 성공 또는 실패가 다양한 형태로 발생한다. 프로미스를 사용하면 이러한 성공이나 실패를 편리한 방식으로 환원할 수 있다. 프로미스는 비동기 동작에 대한 성공과 실패를 코드로 분기하고, 결과에 따른 후속처리를 진행한다.

 

async, await는 프로미스를 더욱 쉽게 사용할 수 있도록 고안한 프로미스 기반 신규 문법이다. 
함수의 앞부분에 async 키워드를 추가하고, 함수 내부에서 Promise의 앞부분에 await 키워드를 사용한다. async 함수는 비동기적인 동작을 처리하는 함수이고, await는 비동기적인 결과에 대해 후속처리를 기다리도록 하는 키워드이다. 

 

프레임워크와 라이브러리의 차이

 

프레임워크는 애플리케이션 개발을 위한 뼈대이다. 여기에 사용자 정의 기능을 추가하여 완성된 애플리케이션을 만든다.

라이브러리는 애플리케이션의 기능을 빠르게 구현할 수 있도록 제공되는 만들어진 기능이다. 따라서 프레임워크를 사용하는 것보다 라이브러리를 사용하는 편이 개발 자유도가 높다. 그러나 프레임워크를 사용하면 개발 속도가 빨라진다.

 

리액트의 상태 관리란? 도구 사용 경험도 언급.

 

리액트는 컴포넌트의 상태관리를 통해 웹문서를 동적으로 렌더링할 수 있도록 기능을 제공하는 라이브러리이다. 개별 컴포넌트의 상태가 변경되면 컴포넌트는 상태값을 반영하여 컴포넌트의 콘텐츠를 re-rendering 한다. 기본적으로 컴포넌트는 개별적으로 상태 관리를 한다. 그러나 리액트 상태 관리 도구(라이브러리)를 사용하면 다수의 컴포넌트가 공통된 상탯값을 기반으로 동작할 수 있게 된다. 대표적으로 redux라는 도구가 있고, mobx도 좋은 대안이다.

 

클래스형 컴포넌트와 함수형 컴포넌트의 차이

 

클래스형은 생명주기 메소드를 기반으로 상태 관리를 진행하나, 함수형 컴포넌트는 이를 위해 Hook이라는 React 기술을 별도로 사용한다. 

함수형이 좀 더 간결하고 짧은 코드를 작성할 수 있도록 고안되어 있으나, 상태관리 및 생명주기를 고려한다면 클래스형이 나은 선택이다. 

 

생명주기 메소드란? 클래스형 컴포넌트의 생성과 변경 등에 대한 주기별 동작을 정의할 수 있는 메소드