프론트엔드 면접 준비

DOM (Document Objec Model)

 DOM은 HTML이나 XML 과 같은 마크업 기반의 문서들을 프로그램에서 읽어들이기 위해 만들어진 일종의 규칙입니다.

 

브라우저의 렌더링 과정

 브라우저 주소창에 주소를 치면 해당 주소 서버를 찾아간다.

 DNS(실제 서버 주소를 알고있는 서버)서버가 연결해줄 곳을 찾음 

 서버에서 index.html 파일을 클라이언트로 보냄

 브라우저는 텍스트로 이루어진 파일을 파싱

 DOM트리를 만들어나감

 중간에 link태크를 만나 css요청이 방생하면 요청과 응답과정을 거치고 css를 파싱함

 css파싱이 끝나면 중단된 html파일을 다시읽으며 DOM트리완성함

 완성됨 DOM트리와 CSSDOM트리를 합처 Render tree를 만들고 그린다. 

 이 전체 과정중 script 태그를 만나면 코드를 실행하기위해 파싱을 중단하고 제어권한을 자바스크립트로 넘긴다

 자바스크립트 코드를 로드해서 파싱하고 실행

 

 http와 https 통신의 차이

 결정적 차이는 보안입니다.

 1. http방식은 네트워크상에서 정보를 누군가 마음대로 열람, 수정이 가능/

 https는 누가 볼수 없게 막음

 2. http방식이 https방식보다 빠르다.

 3. http방식은 민감한정보를 다룰 때 항상 변조, 해킹 가능성을 생각해야한다. https는 설치 및 인증서를 유지하는데 추가적인 비용이 발생. 민감한 정보가있으면 https 아니면 http 사용

 

 oop에 특징?

 object oriented programming 객체지향 프로그래밍이라고 한다. 

 특징 4가지

 1. 상속 : 클래스개념에서 상위 클래스로부터 하위클래스가 유산을 물려받는 것과 같이, 부모의 메소드나 변수를 사용할 수 있는 것읅 말함.

 2. 다형성 : 같은 함수가 있다고 할때 그 함수가 매개변수에 따라 다른 역할을 할 수 도 있다. ( 오버로딩)

    상속받은 매소드를 재정의하는것 (오버라이딩)

 3. 캡슐화 : 보통 데이터를 은닉시킨다고 표현, 외부에서 쉽게 데이터를 접근할 수 없게 만들기도하고 , 데이터 구조와   데이터를 다루는 방법들을 한데다 묶는것.

 4. 추상화 : 벤츠, 아우디, 소나타, 티코, 밴틀리 등등 여러 종류의 자통자를 공통적인 요소만 꺼내서 특성은

 속성으로 행동은 메서드로 추출하는 것

 

 함수형 프로그래밍 이란

 순수함수와 보조함수의 조합을 통해 로직내에 존재하는 조건문과 반복문을 제거하여,

 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다.

 

 순수함수란?

 순수 함수는 같은 입력이 주어지면 같은 출력을 반환해야하고, side effect(부작용이 없어야한다.

 결국, 함수형 프로그래밍은 순수함수를 통해 sideefffect를 최대한 억제하여 오류를 피하고 프로그램의 안전성을 높이려는 노력의 한 방법이다.

 

 보조함수란?

 javascript에서 함수를 변수로주듯 순수함수에 매개변수로 사용되는 함수를 뜻하는 듯 하다. (개인적이해)

 

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

 객체지향은 동작하는 부분을 캡슐화해서 이해할 수 있게 하고, 함수형 프로그래밍은 동작하는 부분을 최소화해서 코드   이해를 돕는다.

 즉, 객체지향과 함수형의 차이는 상태를 관리하는 점이다.

 객체지향은 상태를 저장하는 필드와 필드를 이용해 기능을 제공하는 메소드를 붙여서 클래스를 만든다.

 즉, 항상 새로운 자료구조를 사용하게 되는 셈입니다.

 vs 

 함수형 프로그래밍은 몇몇 자료구조 (list, set, map)를 이용해 최적화된 동작을 만들어냅니다.

  

 웹 프로토콜이란?

 - 웹 프로토콜은 웹에서 쓰이는 통신규약입니다.

 - 통신규약이란 통신을 할때 규칙을 정하고, 약속하는 것입니다.

 

 https 통신이란 ?

 - 웹 프로토콜 중 하나로 http가 가장 많이 쓰입니다.

 - Hyper Text Trasfer Protocol의 약자로, 인터넷에서 테이터를 주고 받을 수 있는 통신규약으로 보면 됩니다. 

 - 요청과 응답으로 이루어져 있습니다.

 

 http 1.1 과 2.0의 차이는?

 - 가장 큰 차이는 속도입니다.

 - 2.0 같은 경우는 헤더를 압축해서 보내기도하고, 한번의 연결로 동시에 여러 메시지를 주고 받을 수 있습니다. 

 

 비동기 프로그래밍

 

 AJAX란?

 자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식은 보통

 서버로부터 웹페이지가 반환되면 전체를 갱신해야한다. 

 

 AJAX를 사용하면, 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있다.

 

 즉, 갱신이 필요한 부분만 로드하여 갱신하면 되므로 빠르고, 부드러운 화면효과를 기대할 수 있다.

 

 Promise란

 - 자바스크립트에서 비동기 프로그래밍을 위해 콜백을 사용한다.

 - Promise는 전통적인 콜백 패턴이 가진 단점을 일부 보완하며 동기 처리 시점을 명확하게 표현한다.

 - Promise는 비동기 처리 로직을 추상화한 객체와 그것을 조작하는 방식을 말한다.

 - Promise는 객체에서 제공하는 메서드만 사용해야 하므로 인자가 같은 방식으로 통일된다.

 - 복잡한 비동기 처리를 쉽게 패턴화 할 수 있다.

 프로미스는 콜백지옥과 비동기간의 경쟁을 해결할수 있다.(then, all)

 

 Callback 패턴이란?

 - Callback 패턴은 다음 할 일을 계속 Callback함수를 인자로 넘긴다.

 - Callback 사용시 Client-side JS에서는 비교적 로직이 적어 Callback 사용이 도움이 될 때도 있다.

 - Business logic을 가진 Server-side언어로 사용시 코드의 가독성이 줄어들고, 디버그를 어렵게 만든다.

 

 Callback Hell 현상이란?

 Callback 함수가 그 결과 값을 가지고 Callback을 다시 호출하고, 그 결과 값으로 또 다시 

 Callback을 호출하게 되어 예외 처리시 에러 Callback과 try/catch 블록 양쪽에서 모두 이루어지기 때문에

 복잡하고 결국 Callback Hell 현상이 발생한다.

 

 Callback Hell 현상을 완화할 수 있는 방법

 - 인라인 함수에 이름을 붙여라

 - 코드를 간결하게 작성하라( 라인 수를 줄여라)

 - 모듈화 하라

 - Promise 패턴을 도입하라

 

 Async, Await와 Promise 차이는?

 - Promise를 더욱 쉽게 사용할 수 있도록 한 es8문법이다.

 - 함수의 앞부분에 async 키워드를 추가하고, 함수 내부에서 Promise의 앞부분에 await 키워드를 사용한다.

 - async, await를 사용할 경우 코드가 간결해지지만, 에러처리를 잡기 위해 try/catch를 사용해야한다.

 - 동기적인 코드흐름으로 개발이 가능하다.