프론트엔드 직군 웹개발자 면접질문 모음 답변 달아보기

프론트엔드 실무에 관련된 사항들을 파악하기 위해 velog에 올라와있는 프론트엔드 직군 개발자 면접 질문 목록을 가져와 구글링, 책, 필자가 알고있던 지식을 통해 나름의 답변을 필자의 언어로 달아보면서 앞으로 개발에 필요한 개념들을 한 번 정리해보려 합니다.

출처

질문 및 답변

1.브라우저의 렌더링 과정에 대해서 상세하게 설명해달라

• 브라우저의 역할은 사용자의 요청을 서버에 전달하고 그 결과를 화면에 나타내는 과정인데 렌더링은 화면에 나타내는 과정을 의미한다. 더 상세하게 알아보면

1. DOM 생성
2. CSSOM 생성
3. Render Tree 생성
4. Render Tree 배치
5. Render Tree 그리기 이러한 과정을 통해 브라우저가 서버에 요청한 내용의 노드들을 픽셀화 시키는 것을 브라우저 렌더링 이라고 한다.

2.OOP의 특징에 대하여 설명해달라.

• OOP는 객체지향 프로그래밍의 약자이다. 객체지향 프로그래밍에 사용되는 객체지향 언어는 4가지의 특징을 가지고 있다.

1. 추상화 - 각 객체들의 공통된 특성을 뽑아낸다.
2. 캡슐화 - 데이터를 은닉하고 데이터의 기능을 노출시키지 않는 의미로 사용됨.
3. 상속성 - 객체지향의 정수로 상속성이 없다면 객체지향의 의미가 없어질 정도로 중요한 요소이다. 하나의 클래스가 가진 특징(데이터, 함수)을 그대로 다른클래스에 물려줄때 사용된다.
4. 다형성 - 같은 함수를 받아도 각자 다른 일을 하는 것을 의미한다.

3.현실에 상황을 예로 들어 OOP의 개념으로 설계과정을 설명해달라

ex) 축구를 게임으로 만든다거나, 기타 어떠한 상황이라도 좋다

• 빵집에는 여러가지 시스템이 있다. 빵을 만드는 시스템 고객의 결제를 도와주는 시스템 그리고 다양한 종류의 빵이 제공된다. 이 빵집에 비유해서 객체지향의 요소들을 설명해 보겠다. 먼저 빵의 종류는 굉장히 다양하지만 그 다양한 종류의 빵의 반죽 및 재료들을 각각의 종류별로 준비 할 수는 없다. 그래서 반죽과 재료의 베이스를 갖추고 필요한 재료들만 선택(호출)하여서 각기 다른 빵을 만든다(추상화) 대부분 빵집들은 고객이 직접 빵을 고른다.(public) 하지만 돈이 있는 계산대에는 함부로 접근하게 해서는 안된다.(pivate)(캡슐화) 빵집의 여러가지 빵들은 기본적으로 밀가루를 부풀려만든 것에 기반한다. 그 반죽에 다른 재료를 넣으면 다른빵이 되는것인데 모든 '빵'이라는 식품의 근간은 이 밀가루 반죽의 특징을 상속받았다고 볼 수 있다.(상속성) 단팥빵이 있다고 치자 이 평범한 단팥빵은 평소 단것을 굉장히 좋아하는 사람에게는 평범한 빵일 수 있지만 단것을 싫어하고 밋밋한 빵만 좋아하는 사람에게는 굉장히 달게 느껴질 수도 있다.(다형성)

4.함수형 프로그래밍에 대해 설명해달라

• 프로그래밍 패러다임에는 명령형 프로그래밍과 선언형 프로그래밍이 있다. 함수형 프로그래밍은 후자인 명령형 프로그래밍에 속한다. 이 함수형 프로그래밍은 기본적으로 기존 명령형 프로그래밍은 어떻게 구현하겠다 에 집중돼 있었다면 함수형 프로그래밍은 무엇을 구현하겠다에 초점이 맞추어져 보다 함수를 수학적으로 사용하여 설계가 가능하다.

5.함수형 프로그래밍에 기반하여 순수함수가 무엇인지 설명해달라.

• 순수함수란 함수형 프로그래밍에 필요한 개념으로써 두가지의 조건을 만족해야한다.

1. 동일한 입력에는 항상 같은 값을 반환하여야 한다.
2. 함수의 실행은 프로그램의 실행에 영향을 미치지 않아야 한다.

두 가지의 조건으로 미루어 보았을때 정말 순수한 개념의 함수를 의미한다고 할 수 있다. 이와같은 특성을 이용하여 테스트를 하기 수월하다는 점이 함수형 프로그래밍에 있어 필수적인 요소가 된다고 볼 수 있다.

6.OOP와 함수형 프로그래밍의 가장 큰 차이점은 무엇인가

• 각각의 프로그래밍에서 일급객체의 비교에따라 간접적 비교가 가능하다. 함수형 프로그래밍의 일급 객체는 함수 자체가 일급객체가 됩니다. 객체지향 프로그래밍에서는 객체, 클래스 등이 일급 객체가 됩니다. 객체지향은 객체의 특성에 의거하여 접근대상을 제어하고 속에있는 데이터를 제어하는 등 제어에 목적이 집중되어있는 반면 함수형 프로그래밍은 간결함을 모티브로 나온 프로그래밍 이기에 입력값이 있으면 출력값이 나오고 프로그램에 영향을 주지 않는다는 간단한 개념으로 상태의 변형을 주지 않기 때문에 간결한 프로그래밍에 적합합니다.

7.AJAX란 무엇인가

• AJAX란 자바스크립트의 라이브러리 입니다. 자바스크립트를 이용한 비동기 통신 사용자와 서버간의 xml 데이터를 주고받는 기술입니다. 비동기 방식이란 웹페이지를 리로드 하지 않고도 통신이 가능한 구조를 말하는데, 이 방식의 장점은 리로드의 과정속에서 낭비되는 자원을 보존시킬 수 있습니다.

8.Promise란 무엇이며 코드가 어떻게 구성되어있는가

• Promise란 자바스크립트의 비동기 처리에 사용되는 객체입니다. 자바스크립트의 비동기처리란 특정 코드의 연산이 끝날때까지 코드의 실행을 멈추지않고 다음 코드를 실행하는 것을 의미합니다. 솔직히 잘 모르겠음 읽어봐도 이해가 안감 개쓰레기 객체 왜쓰지 하

9.Promise와 Callback의 차이점은 무엇이며 각각의 장단점에 대해 설명해달라

• Callback을 간단하게 설명하자면 자바스크립트의 비동기 통신의 단점을 보완하기위해 나온 개념입니다. 쉽게 설명하자면 서버가 요청받은 내용을 처리하고 있을때 특정 요청받은 내용의 차례가 올 경우 그 내용을 콜백을 통해 불러서 처리합니다. 프로미스는 잘 모르겠음 아니 뭐 이런게 다 있나

10.Async, Await가 무엇이며, 사용해본 경험이 있는가

• 일단 사용해본적은 없고 Async Await는 자바스크립트 비동기방식 패턴중 가장 최근에 나온 것 입니다. 일반적으로 자바스크립트는 콜백을 통해서 코드의 실행순서를 보장받았습니다. Async Await는 기존 콜백과 프로미스의 기능은 살리고 코드를 보다 더 깨끗하게 작성하는데 도움을 주는 패턴이라고 보시면 될 것 같습니다.

React.js를 다룰것이기 때문에 Vue.js는 하지 않고 다른 포스팅으로 React.js 면접질문을 준비해보겠습니다.

11.AMP의 개념은 무엇이고 기존의 것에 비해 장점은 무엇인가

• 구글에서 시작한 프로젝트로 빠른 모바일 전용 웹 페이지를 의미합니다. 요즘의 웹페이지는 미디어 쿼리를 이용하여 어떤 해상도에도 대응되게끔 사이트를 구성하는데 미디어 쿼리로 구성할 경우 굉장히 많은 상황에 대응하는 것이 목적인 만큼 기능이나 구성을 줄일 수 밖에없다 이 부분을 해결하기위해 나온 것이 AMP이다. 이 AMP역시 다양한 제약사항을 가지고 있는데, 빠른 웹페이지를 지향하는 만큼 속도에 영향이가는 요소들을 모두 제어한다.(css는 무조건 인라인으로 작성해야하며 50kb를 넘지않는다 등) 앞서 말했듯이 최근의 웹 개발 추세는 어떠한 해상도에서도 반응하는 웹페이지를 만드는 것이 목적이었지만 이 AMP는 순수 모바일 환경만을 위한 프로젝트이다. 따라서 모바일에서 만큼은 빠르고 효율적인 웹페이지를 구성하는데에 굉장히 좋다고 생각한다.

12.타입스크립트를 사용해본 경험이 있는가, 타입스크립트에 대한 본인의 생각과 도입시의 장점을 말해달라

• 아직 타입스크립트를 다뤄보진 않았지만 곧 제가 자주보는 웹개발자의 유튜브 강의를 통해 블록체인을 구현해 볼 계획이다. 자바스크립트는 인터프리터 언어이고 타입스크립트는 컴파일 언어이다. 컴파일 단계에서 타입오류를 잡아낼 수 있고 이를 통해 자바스크립트의 모호한 경계를 해소했다고 알고있다.(암묵적 형변환, 호이스팅 문제 등)

13.자바스크립트의 원시 타입(Primitive Data Type)은 몇가지이며, 전부 말해달라

• Boolean String Number Null Undefine

14.자바스크립트의 Number Type은 다른 언어들과 차이점이 무엇인가, 왜 하나만 존재하는가

• 자바스크립트의 넘버타입은 굉장히 유연해서 엔진이 원할때마다 암시적 변환이 가능하다. 다양한 엔진이 존재하는 현 웹 개발환경 상 이러한 자바스크립트 타입의 유연성은 필수적인 요소라고 생각한다.

15.실행 컨텍스트(Execution Context)에 대해 설명해달라

• 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다.

16.자바스크립트의 호이스팅(Hoisting)은 어떻게 이루어져 있는가

• 호이스팅은 변수를 선언하고 초기화 했을때 선언부분이 최상단으로 끌어올려지는 현상을 말합니다.

17.클로저(Closure)란 무엇이며, 왜 이러한 패턴을 사용하는가

• 자바스크립트는 함수 안에서도 함수를 선언 할 수 있다. 전자를 외부함수라 정의하고 후자를 내부함수라 정의해보면 기본적으로 내부함수는 외부함수의 요소에 접근이 가능한데 외부함수에서 그 함수의 수명이 다 하여 외부함수가 종료된 후에도 외부함수의 변수에 내부함수가 접근 할 수 있는 메커니즘을 클로져라고 한다.

18.자바스크립트에서 This는 몇가지로 추론 될수 있는가, 아는대로 말해달라

• 전역범위에서 사용될때 this는 전역객체를 가르킨다. 함수에서 사용될때도 전역객체를 가르킴. 객체에 속한 메서스에서 사용될때 그 메서드의 객체를 가르킨다. 객체에 속한 메서드의 내부함수에서 사용될땐 전역객체를 가르킨다. 생성자에서 사용될때 생성자로 인해 생성된 새로운 객체를 가리킨다.

19.Call, Apply, Bind 함수에 대해 설명해달라

• this가 함수 호출식에 따라 객체를 가르켰다면 call apply bind는 함수가 직접 실행문맥을 결정한다. 그 중에 call, apply는 함수를 호출해 실행한다. call apply를 사용했을때의 장점은 첫번째 인자가 없더라도 에러없이 실행이 가능하다(자동으로 전역객체를 지정하여 실행) bind는 지정한 객체의 함수를 만든다. 정리하면 call apply는 함수를 실행시켜주는 것이고, bind는 새 함수를 만들어주는 것이다.

20.크롬 정도의 브라우저를 제외하곤 ES6 스펙에 대한 지원이 완벽하지 않다. 해결방법은 무엇인가

• babel을 통한 es6 -> es5로 변환하기. 근데 최근 자바스크립트의 발전된 라이브러리 등은 모두 es6를 사용하기 때문에 es6의 사용이 더 시급해 보인다.

21.Babel의 기능을 한 단어로 말해달라

• 트랜스 컴파일러로 es6 - > es5로 간편하게 변환이 가능하다.

22.ES6 에서 추가된 스펙에 대해 아는대로 다 말해달라(let, const, rest parameter, class, arrow function...)

• const를 기본으로 사용하고 변경이 될 수 있는 변수는 let을 사용한다.
• var은 이제 사용하지 않는다.
• startWith(), endWirh(), includes()등의 String 메서드가 추가되었다.
• set, weakset 으로 중복되는 값이 있는지 탐색이 가능하다.

23.var 와 let, const의 가장 큰 차이점은 무엇인가 (function scope와 block scope의 개념에서)

• let은 변수에 재할당이 가능하지만 const는 불가능하다.
• var은 function scope, let과 const는 block scope('{}'로 구분되는)

24.Class 는 무엇이고, Prototype, fucntion의 ES5 스펙만으로 Class를 구현할수 있는가

• class는 빵틀이다. 반죽(객체)를 class에 넣으면 원하는 모양의 빵이 나오는 빵틀이라고 보면 된다.
• 프로토타입으로 클래스를 구현 가능하다. 생성자를 이용하여 클래스처럼 사용 할 수는 있지만 대부분의 경우 같은 호출을 반복한다던가의 불필요한 행동이 반복되어 효율적인 코드가 되지 못합니다. 그래서 프로토타입이라는 빈 객체에 미리 값들을 담아두고 새로 생성한 객체는 그 프로토타입의 값을 가져오는 방식을 갖춰서 클래스의 활용처럼 재사용성을 높일 수 있다.

25.자료구조에 대해 공부한 적이 있는가

• 학부때 c를 이용한 자료구조를 공부한 적이 있다. 하지만 자세히 파고들지는 않았고 알고리즘 류 공부를 따로 시작하면서 java로 여러가지 자료구조의 형태(stack, tree, heap 등)을 구현해보았다.

26.Binary Search Tree 에 대해 알고 있는가, 설명해달라

• 이진탐색과 연결리스트를 결합한 형태로써 이진탐색의 효율적 탐색능력 + 연결리스트의 입출력의 용이함을 결합하여 고안된 자료구조의 방법이다.

27.Graph 에서 다른 노드를 참조하는 구조를 코드로 구현 할수 있는가

• 따로 포스팅을 통해 java로 다양한 자료구조를 구현해 볼 것이다.

28.RESTful API 가 무엇인가, 아는대로 다 말해달라

• rest란 자원을 이름으로 구분하여 자원의 형태를 공유하는 것을 의미한다.
• api란 데이터와 기능을 집약해놓은 사용하기 좋게 해놓은 것.
• restful api는 rest를 통해 확장성과 재사용성 즉 업무 효율을 올리는 규칙등을 적용하여 아키텍쳐를 구현하는 웹서비스를 의미한다.

후기

28개의 질문의 답을 작성하는데에 총 6-7시간 정도가 걸렸던 것 같습니다. 아예 처음 접하는 개념들도 있었지만 이미 알고 있었는데도 그것을 표현하는데 있어서 어려움을 겪어서 기초가 많이 부족하다라는 생각이 들었습니다. 그리고 정말 다양한 것들을 직접 사용해봐야 완벽한 답변을 할 수 있겠구나를 느꼈습니다. ajax나 promise, callback 등은 코딩을 할때 좀 더 개발자를 편하게 해주는 즉 직접 사용해본 사람과 아닌 사람의 개념의 차이가 명확할 것이라는 걸 느꼈고 그것이 곧 이 질문의 목적이라는 것도 느꼈습니다. 앞으로 진행할 프로젝트에는 결과를 목적으로 진행을 하기 보단 결과까지가는 과정을 탄탄히 해야 할 것 같다는 생각도 했습니다. 당장 실습을 통한 결과물에 급급하기 보다는 확실한 개념정리와 함께 기초를 탄탄히 하여 프로젝트 준비와 면접준비를 동시에 해야겠다는 생각이 들게한 좋은 경험이었던 것 같습니다.