[면접 예상 질문] 프론트엔드(1/3)
1. 폴리필과 바벨
- 바벨은 ES6 이상의 문법을 ES5로 바꿔, 이전 버전의 브라우저 환경에서도 자바스크립트가 이상 없이 동작하도록 하는 역할을 한다.
- 바벨은 컴파일 타임에 코드를 구 브라우전에서 사용가능하게 변환하지만, ES6 이상에서 새롭게 추가된 Promise, WeakMap 등이나, Array.from Object.assign 등의 정적 메서드, Array.prototype.includes 와 같은 인스턴스 메소드를 컴파일 타임의 코드 변환으로는 해결하기 어렵기에, 폴리필이 필요한 것이다.
- 폴리필은 런타임에 필요한 기능을 주입하는 역할을 수행한다. 바벨을 설치하면 바벨에서 공식적으로 지원해주는 폴리필이 따라온다.
2. 웹팩(Webpack)
- 코드는 재사용성을 높이고 유지보수를 편리하게 하기 위해 모듈화된다.
웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러다. 여러 의존 관계에 있는 모듈들을 하나의 js 파일로 번들링하는 역할을 수행한다.- 웹팩은 다음 4가지로 구성된다.
- 엔트리 : 모듈의 시작점을 의미한다.
- 아웃풋 : 엔트리를 시작으로 모든 모듈을 하나로 묶어 번들링을 한 결과물을 내보낼 위치를 선정한다.
- 로더 : 로더는 비 자바스크립트 파일을 웹팩이 이해하게끔 변경하는 역할을 한다.
- 플러그인 : 번들된 결과물을 처리한다.
3. ESLint와 Prettier
- ESLint 는 Ecma Script를, Lint 는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다. 즉,
ESLint는 자바스크립트 문법에서 에러를 표시해주는 도구다. Prettier는 코드를 읽어들여 개발자가 설정한 옵션에 따라 코드를 다시 리포맷하는 코드 포맷터다.ESLint는 코드 포맷터의 역할도 하지만, 주로 코드 에러를 잡아내고 코드 문법을 강제하는 등 코드 품질 개선에 중점을 둔 반면,Prettier는 코드가 정갈해 보이도록 하는 것이 중점이지, 코드의 에러는 잡아내지 못한다.
4. Node.js와 NPM
Node.js는 자바스크립트 엔진 V8을 이용해 브라우저에서 자바스크립트를 해석하듯이, 서버에서도 자바스크립트를 동작할 수 있도록 하는 런타임 환경이다.NPM(Node Package Manager) 은 Node.js 기반의 모듈을 모아둔 집합 저장소다.
5. DOM과 Virtual DOM
- DOM은 Document Object Model로, 문서의 구성 요소인 태그들을 객체로 구조화하여 나타낸 것을 의미한다.
- DOM을 반복적으로 직접 조작하면, 그만큼 브라우저가 렌더링을 진행하게 되고, 이는 곧 자원의 소모를 일으킨다. 따라서 DOM을 추상화시킨 자바스크립트 객체인 Virtual DOM을 구성하여 여기에 변경사항을 적용한다. 이후, 기존 DOM을 Virtual DOM과 비교해, 변경된 사항만 DOM에 적용시킨다. 이러한 처리는 실제 DOM이 아닌 메모리에 있기에 훨씬 빠르다.
6. TypeScript
- 타입스크립트는 자바스크립트를 확장한 언어다.
- 자바스크립트는 인터프리터 언어인 반면, 타입스크립트는 컴파일 언어이며 동시에 타입 기반 언어다. 따라서, 컴파일 단계에서 타입 체크로 인한 타입 오류를 잡아낼 수 있으며, 암묵적 형변환, 호이스팅, 복잡성 등의 문제도 해결한다.
7. 쿠키, 웹 스토리지
쿠키
- 로컬 스토리지와 세션 스토리지가 등장하기 전에 브라우저에 저장소 역할을 했다.
- 만료 기한이 있는 키-값 저장소이다.
- 서버와 로컬 모두에 정보를 저장한다.
웹 스토리지(Web Storage)
- 웹 스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5에 새로 추가된 저장소이다.
- 쿠키는 4KB 제한이 있는 반면, 웹 스토리지는 5MB 제한이 있다.
- 네트워크 요청 시 서버로 전송되는 쿠키와는 다르게, 웹 스토리지 객체는 전송되지 않는다.
- 서버가 HTTP 헤더를 통해 웹 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.
- 웹 스토리지로는 로컬 스토리지와 세션 스토리지가 있다.
로컬 스토리지(Local Storage)
- 데이터를 지우지 않는 이상 영구적으로 남아있다. (브라우저를 종료해도 데이터가 유지된다.)
- 도메인이 다른 경우, 로컬 스토리지에 접근할 수 없다.
세션 스토리지(Session Storage)
- 세션마다 데이터가 개별적으로 저장된다. 여러 탭을 실행하면, 탭마다 개별적인으로 데이터가 저장된다.
- 새로 고침해도 데이터는 사라지지 않지만, 세션을 종료(브라우저 탭 종료)하면 데이터가 자동 제거된다.
- 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.
- 지속적으로 필요한 데이터는 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보는 세션 스토리지에 저장하자.
8. 브라우저의 렌더링 과정 설명.
- www.naver.com 치면 네이버 서버를 찾아간다.
- DNS 서버가 연결해줄 곳을 찾는다.
- 서버의 기본 설정이 대부분 index.html 로 되어있어, 서버에서 이 파일을 클라이언트로 응답한다.
- 브라우저는 텍스트로 이뤄진 index.html 파일을 파싱한다.
- 브라우저 엔진은 한줄씩 읽어가며 DOM 트리를 만든다.
- 중간에 css 요청이 발생하면, 요청과 응답 과정을 거쳐 css 파일을 파싱한다. css 파싱이 끝나면, 중단된 html을 다시 읽어가며 DOM 트리를 완성짓는다.
- 중간에 Script 태그를 만나면, 자바스크립트 코드를 실행하기 위해 파싱을 중단한 뒤, 자바스크립트 엔진에 제어 권한을 넘겨 파일을 로드해 파싱한 뒤 실행한다.
- 완성된 DOM 트리와 CSSOM(CSS Object Model) 트리를 합쳐 렌더링 트리를 만들고 화면에 그린다.
9. 웹 프로토콜, HTTP 통신
- 웹 프로토콜은 웹에서 쓰이는 통신 규약이다.
- HTTP 통신은 요청과 응답으로 이뤄져 있다. 클라이언트가 데이터를 달라고 서버에 요청하면, 서버는 해당 데이터를 클라이언트로 응답한다.
10. HTTP와 HTTPS 차이
- HTTP는 암호화가 추가되지 않았기에 보안에 취약한 반면, HTTPS는 안전하게 데이터를 주고 받을 수 있다.
- HTTPS는 암호화 및 복호화의 과정이 필요하다. 또한 인증서를 발급하고 유지하기 위한 추가 비용이 발생한다.
- 단순 정보 조회시 HTTP를, 개인 정보와 같은 민감한 데이터가 오갈시 HTTPS를 이용한다.
댓글남기기