* 본 포스팅은 https://sunnykim91.tistory.com/121 블로그의 정보와 구글링을 통해 작성된 글입니다.
브라우저의 렌더링 과정
- 브라우저 주소창에 주소(ex. www.naver.com)을 입력한다.
- 해당 주소의 서버를 찾아간다.
- DNS(실제 서버가 어디에있는지 알고 있는 서버)가 연결해줄 곳을 찾는다.
(이 과정에서 주소 앞에 https가 붙어있다면 https 방식으로 통신한다.) - 서버의 기본설정이 대부분 index.html로 되어 있어, 서버에서 이 파일을 클라이언트로 보낸다.
- 브라우저는 텍스트로 이루어진 index.html 파일을 파싱한다.
- index.html을 읽으면서 DOM트리를 만들어나간다.
- 중간에 link태그를 만나 css요청이 발생하면, 요청과 응답과정을 거치고 css를 파싱한다.
- css파싱이 끝나면 중단된 html을 다시 읽고 DOM트리를 완성시킨다.
- 완성된 DOM트리와 CSSOM트리를 합쳐 Render Tree를 만든다.
- HTML 파서는 Script 태그를 만나게 되면 javascript 코드를 실행하기 위해 파싱을 중단한다.
- 제어권한을 자바스크립트 엔진에게 넘기고, 자바스크립트 코드 또는 파일을 로드해서 파싱하고 실행한다.
Http와 Https 통신 방식의 차이?
- 결정적 차이는 보안이다.
- http 방식은 네트워크상에서 정보를 누군가가 마음대로 열람, 수정이 가능하다.
- https 방식은 누가 볼 수 없도록 막는다.
- http방식이 https방식보다 빠르다.
- http방식은 민감한 정보를 다룰 때 항상 변조, 해킹 가능성을 생각해야한다.
- https방식은 설치 및 인증서를 유지하는데 추가적인 비용이 발생한다.
즉, 민감한 정보가 있는 페이지의 경우 https 그럴 필요가 없으면 http로 만들면 된다.
OOP에 특징에 대해 설명해달라
OOP란?
- Object Oriented Programming 즉, 객체지향 프로그래밍이라고 한다.
OOP의 특징은?
- 상속: 클래스개념에서 부모 클래스의 메소드나 변수를 자식 클래스에서 사용할 수 있다.
- 다형성: 같은 함수가 있다고 할 때, 그 함수가 매게변수에 따라 다른 역할을 할 수도 있다.
- 캡슐화: 외부에서 쉽게 데이터를 접근할 수 없게 만들기도하고, 데이터 구조와 데이터를 다루는 방법들을 한 곳에 묶는 것.
- 추상화: 공통적인 속성이나 기능을 묶어서 이름을 붙이는 것.
함수형 프로그래밍(Function Programming)
함수형 프로그래밍이란?
순수함수와 보조함수의 조합을 통해 로직내에 존재하는 조건문과 반복문을 제거하여,
복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다.
함수형 프로그래밍에 개념에서 순수함수란?
순수함수는 같은 입력이 주어지면 같은 출력을 반환해야하고, side effect(부작용)이 없어야한다.
결국, 함수형 프로그래밍은 순수함수를 통해 sideeffect를 최대한 억제하여 오류를 피하고 프로그램의 안전성을 높이려는 노력의 한 방법이다.
OOP와 함수형 프로그래밍의 가장 큰 차이점은 무엇인가?
객체지향은 동작하는 부분을 캡슐화해서 이해할 수 있게 하고, 함수형 프로그래밍은 동작하는 부분을 최소화해서 코드 이해를 돕는다. 마이클 페더스 - '레거시 코드 활용 전략' 저자
즉, 객체지향과 함수형의 차이는 상태를 관리하는 점입니다.
객체 지향은 상태를 저장하는 필드와 필드를 이용해 기능을 제공하는 메소드를 붙여서 클래스를 만든다.
즉, 항상 새로운 자료구조를 사용하게 되는 셈입니다.
vs
함수형 프로그래밍은 몇몇 자료구조(list, set, map)를 이용해 최적화된 동작을 만들어냅니다.
더 자세한 내용을 알고싶으시면 함수형 프로그래밍 기초(1) 왜 함수형 프로그래밍인가에 접속하여 보시길 추천드립니다.
웹 프로토콜이란?
- 웹 프로토콜은 웹에서 쓰이는 통신규약입니다.
- 통신규약이란 통신을 할때 규칙을 정하고, 약속하는 것입니다.
Http 통신이란?
- 웹 프로토콜 중 하나로 HTTP가 가장 많이 쓰입니다.
- Hyper Text Transfer Protocol의 약자로, 인터넷에서 데이터를 주고 받을 수 있는 통신규약으로 보면 됩니다.
- 요청과 응답으로 이루어져 있습니다.
Http 1.1과 2.0의 차이는?
- 가장 큰 차이는 속도입니다.
- 2.0같은 경우는 헤더를 압축해서 보내기도하고, 한번의 연결로 동시에 여러 메시지를 주고 받을 수 있습니다.
비동기 프로그래밍 (Asynchronous)
AJAX란?
자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식은 보통 서버로부터 웹페이지가 반환되면 전체를 갱신해야한다.
👇
AJAX를 사용하면, 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있다.
즉, 갱신이 필요한 부분만 로드하여 갱신하면 되므로 빠르고, 부드러운 화면효과를 기대할 수 있다.
Promise란?
- 자바스크립트에서 비동기 프로그래밍을 위해 콜백을 사용한다.
- Promise는 전통적인 콜백 패턴이 가진 단점을 일부 보완하며 동기 처리 시점을 명확하게 표현한다.
- Promise는 비동기 처리 로직을 추상화한 객체와 그것을 조작하는 방식을 말한다.
- Promise 객체에서 제공하는 메서드만 사용해야 하므로 인자가 같은 방식으로 통일된다.
- 복잡한 비동기 처리를 쉽게 패턴화할 수 있다.
Callback 패턴이란?
- Callback 패턴은 다음 할 일을 계속 Callback함수를 인자로 넘긴다.
- Callback 사용시 Client-side JS에서는 비교적 로직이 적어 Callback 사용이 도움이 될 때도 있다.
- Business logic을 가진 Server-side 언어로 사용시 코드의 가독성이 줄어들고, 디버그를 어렵게 만든다.
Callback Hell 현상이란?
Callback 함수가 그 결과 값을 가지고 Callback을 다시 호출하고, 그 결과 값으로 또 다시 Callback을 호출하게 되어 예외 처리시 에러 Callback과 try/catch 블록 양쪽에서 모두 이루어지기 때문에 복잡하고 결국 Callbak Hell 현상이 발생한다.
이렇게 Callback이 다시 Callback을 호출하게 되면, 코드를 눈으로 따라가기 어렵게 되고, 유지보수도 어려워진다.
Callback Hell 현상을 완화할 수 있는 방법
- 인라인 함수에 이름을 붙여라
- 코드를 간결하게 작성하라(라인 수를 줄여라)
- 모듈화 하라
- Promise 패턴을 도입하라
* 보통 Callback Hell을 해결할 방법으로 Promise를 소개하는 경우가 많은데 엄밀히 말하면 Callback Hell을 해결할 수 없고 일부를 완화하는 것이다.
Async, Await와 Promise의 차이는?
- Promise를 더욱 쉽게 사용할 수 있도록 ES2017(ES8) 문법이다.
- 함수의 앞부분에 async 키워드를 추가하고, 함수 내부에서 Promise의 앞부분에 await 키워드를 사용한다.
- async, await를 사용할 경우 코드가 간결해지지만, 에러처리를 잡기 위해 try/catch를 사용해야한다.
- 동기적인 코드흐름으로 개발이 가능하다.
프론트엔드 개발자 면접 질문 #1이 끝났습니다.
#2에서는 JS와 ES6, React에 관해서 글을 작성할 생각입니다.
프론트엔드 개발자 면접을 보시는 신입 개발자 분들에게 많은 도움이 되었으면 좋겠습니다.
혹여나 틀린 부분이 있다면 댓글로 남겨주세요! 바로바로 정확한 정보를 기재하겠습니다.
저도 공부를 하면서 작성하는 글이라 다음 글이 늦게 올라올 수도 있으니 양해해주세요😅
오늘도 긴 글 읽어주셔서 감사합니다😃
'프론트엔드' 카테고리의 다른 글
| Visual Studio Code Prettier 간편 설정 (0) | 2020.10.15 |
|---|---|
| 프론트엔드 개발자 면접 질문 #3 (36) | 2020.08.20 |
| 프론트엔드 개발자 면접 질문 #2 (0) | 2020.08.20 |
