프론트 엔드 면접 준비하기!

구글링하여 나오는 프로트엔드 면접 질문들을 정리해 보았습니다!

1.브라우저의 렌더링 과정

1.주소창에 구글을 입력한다
2.구글 서버로 찾아간다
3.DNS가 연결해줄 곳을 찾는다 (DNS - 실제 서버가 어디있는지 알고 있는 서버)
4.서버에서 HTML 파일을 클라이언트로 보낸다
5.HTML 파일 파싱 및 DOM Tree 생성
6.link 태그를 만나면 css 파싱 및 CSSOM 트리 생성
7.DOM , CSSOM 합쳐 Render Tree 생성
8.7번 과정 중 JavaScript를 만난다면 HTML파서는 JS 코드를 실행하기 위해 파싱을 중단 한 후 JS 엔진에게 권한을 넘기고 JS 엔진은 실행되어 Js 코드 또는 파일을 로드해서 파싱하고 실행한다

2.호이스팅 이란?

자바스크립트 함수가 실행되기 전에 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

유효 범위: 함수 블록 {} 안에서 유효
실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.**
실제 메모리에서는 변화가 없다.
var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다
let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다
수정!
let과 const는 호이스팅이 되지만 TDZ(Temporal Dead Zone)에 의해 에러가 발생합니다.

let/const 변수의 경우 var 변수와 다르게 변수의 선언 단계와 초기화 단계 사이에 일시적 사각 지대(TDZ)가 존재하고, TDZ에서 관리 중일 때(let 변수의 선언 또는 const 변수의 선언 및 할당 코드가 나오기 전)사용하려 한다면 ReferenceError를 발생 시킴

//var
console.log(a); // undefined

a = 3;
console.log(a); // 3

var a = 1;
console.log(a); // 1 

//const
const a = 1; 
{ 
  console.log(a);
  //Uncaught ReferenceError: Cannot access 'a' before initialization
  const a = 2; 
}

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

반환된 내부함수가 자신이 선언됬을때의 환경인 스코프를 기억하여 자신이 선언되었을때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수, 자신이 생성될때의 환경을 기억하는 함수

사용하는 이유
현재 상태를 기억하고 변경된 최신 상태를 유지하기 위해
전역 변수의 사용을 억제 하기위해
정보의 캡슐화와 은닉화

4.CSS padding과margin

margin은 Object와 화면과의 여백(외부여백)을 말하며 padding은 Object내의 내부여백을 의미합니다.

5.CSS position

static (기본값) :위치를 지정하지 않을 때 사용한다.
relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다.
sticky : 위치에 따라서 동작방식이 달라짐. 요소가 임계점(scroll 박스 기준) 이전에는 relative와 같이 동작. 그 이후에는 fixed와 같이 동작.

6.GET POST

GET
정보를 가져와서 조회하기 위해서 사용되는 방식
URL에 변수(데이터)를 포함시켜 요청한다.
데이터를 Header(헤더)에 포함하여 전송한다.
URL에 데이터가 노출되어 보안에 취약하다.
캐싱할 수 있다.

POST
데이터를 서버로 제출하여 추가 또는 수정하기 위해서 사용하는 방식
URL에 변수(데이터)를 노출하지 않고 요청한다.
데이터를 Body(바디)에 포함시킨다.
URL에 데이터가 노출되지 않아서 기본 보안은 되어있다.
캐싱할 수 없다.

7.http와 https의차이

결정적 차이는 보안이다.
1. http방식은 네트워크상에서 정보를 누군가가 마음대로 열람, 수정이 가능하다. https는 누가 볼수없도록 막음.
2. http방식이 https방식보다 빠르다.
3. http방식은 민감한정보를 다룰 때 항상 변조, 해킹 가능성을 생각해야한다. https는 설치 및 인증서를 유지하는데 추가적인 비용이 발생. -> 따라서, 민감한 정보가 있는 페이지의 경우 Https 그럴필요가없으면 http로 만들면 된다.

8.OOP에 특징 설명

Object Oriented Programming 객체지향 프로그래밍이라고한다. 특징은 크게 4가지가 있다.
1. 상속 : 클래스개념에서 상위 클래스(부모)로 부터 하위 클래스(자식)이 유산을 물려받는것과 같이, 부모의 메소드나 변수를 사용할 수 있는 것을 말함.
2. 다형성 : 같은 함수가 있다고 칠때 그 함수가 매개변수에 따라 다른 역할을 할 수 도 있다.
3. 캡슐화 : 보통 데이터를 은닉시킨다고 표현하는데, 외부에서 쉽게 데이터를 접근할 수 없게 만들기도하고, 데이터 구조와 데이터를 다루는 방법들을 한데다 묶는것.
4. 추상화 : 공통적인 속성이나 기능을 묶어서 이름을 붙이는 것
( a b c 이런게있다고 치면 이런건 알파벳이라고 묶을 수 있다)

9.AJAX란 무엇인가

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

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

다른언어에는 int,double등 숫자타입의 다양함이 있지만 js는number 하나만 있다.
정수만을 위한 타입이 없고, 모든 수를 실수로 처리한다.

+BigInt

Number의 MIN_VALUE(Number.MIN_VALUE) 값을 출력하면 5e-324 가 출력된다.

실제 정수 계산 가능범위는 (2 ^ 53 - 1) ~ -(2 ^ 53 - 1) 라고 한다.

BigInt 2^53 - 1 보다 더 큰 수를 다룰 수 있게 되지만 Number 타입과 같이 섞어 연산할 수 없고 비교만 가능합니다.

BigInt는 BigInt 끼리 비교, 연산해야 하며 당연히 일반 Number보다 속도 측면에서 느리고 Math 내장 객체의 메서드도 사용할 수 없습니다. 그러나 +, *, -, **, % 연산자는 사용 가능합니다.

11.자바스크립트의 원시 타입은 몇가지인가? 종류는?

boolean, string, number, undefined , null , symbol 이렇게 6가지 종류
undefined는 선언만 되어있고 값은 없는 상태 , null은 자료형이 객체이며 빈값을 의미

+BigInt
BigInt는 임의의 정밀도로 정수를 나타낼 수있는 JavaScript의 새로운 숫자 데이터형입니다.
BigInt를 사용하면 숫자에 대한 안전한 정수 제한을 초과하여 큰 정수를 안전하게 저장하고 조작 할 수 있습니다.
Chrome 67의 새로운 기능으로 최근에 업데이트 되었습니다.

12.js this

1.기본 바인딩(전역객체)
this가 전역 객체(window)를 context 객체로 갖는 것
2.암시적 바인딩
어떤 객체를 통해 함수가 호출된다면 그 객체가 바로 this의 context 객체가 된다.
3.명시적 바인딩
함수(함수 객체)는 call, apply, bind 메소드를 가지고 있는데, 첫번째 인자로 넘겨주는 것이 this context 객체가 된다.
4.new 바인딩
1-새 객체가 만들어짐
2-새로 생성된 객체의 Prototype 체인이 호출 함수의 프로토타입과 연결됨
3-1에서 생성된 객체를 this context 객체로 사용(명시적으로)하여 함수가 실행됨
4-이 함수가 객체를 반환하지 않는 한 1에서 생성된객체가 반환됨
5.Arrow Function
Arrow Function이 선언된 부분 스코프의 this context를 this context로 사용한다.

조금씩 추가하겠습니다!
틀린부분은 댓글에 남겨주세요!