쓰는 방법
- 먼저 한마디로 정리
- 중요한 포인트 2~3개 선정
- 답변을 중요한 포인트와 함께 다시 정리
브라우저 렌더링
브라우저 렌더링 방식에 대해 설명하세요.
브라우저 렌더링이란 HTML , CSS , Java Script 등 개발자가 작성한 문서가 브라우저에 출력되는 과정을 의미합니다.
렌더링 방식은 사용자가 브라우저를 통해 웹사이트에 접속하면, 서버로부터 HTML, CSS 등 웹사이트에 필요한 리소스를 다운로드 받습니다.
브라우저가 페이지를 렌더링하려면 먼저 HTML 코드는 DOm, CSS는 CSSOM 트리를 생성해야합니다.
그 후 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축하고
레이아웃 과정이 끝나면 UI 백엔드에서 Render트리를 화면에 그리기 시작합니다.
이 과정을 paint라고 합니다.
리플로우와 리페인트에 대해 설명하세요.
사용자가 웹페이지에 처음 접속하면, 렌더링 과정을 거쳐서 화면에 모든 요소가 그려집니다.
이후에 브라우저의 화면을 늘리거나 줄이는 등 화면의 요소들이 바뀔 때마다 모든 요소의 위치와 크기를 다시 계산하고 그려서 보여주어야 합니다.
이런 웹 인터렉션을 인해 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행하는 것을 리플로우라고 합니다.
그리고 실제 이 결과를 화면에 그리기 위해 다시 페인팅하는 과정을 반복해 수행하는 것을 리페인트라고 합니다.
리플로우가 일어나면 반드시 리페인트가 일어나지만 레이아웃에 영향을 미치지 않는 변경사항은 리플로우 수행없이 바로 리페인트만 수행하는 경우도 있습니다.
+ 반응형 웹은 무엇이고 장단점에 대해 설명하세요.
반응형 웹은 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹사이트를 의미합니다.
디바이스의 종류에 따라 웹페이즈의 크기가 자동적으로 재조정되기 때문에 하나의 소스코드로 모든 스크린에 최적화된 웹사이트를 구축할 수 있습니다.
반응형 웹의 장점은
첫번째로 하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 효율적인 유지 보수를 할 수 있고
두번째로는 하나의 URL을 기반으로 화면이 바뀌므로 PC용 URL과 모바일 URL이 동일하기 때문에 검색엔진 최적화에 유리합니다.
반응형 웹의 단점은
첫번째로 읽어들어야할 소스가 많아 불피요하게 많은 데이터를 소비하기 때문에 사이트 속도를 저하시키며
두번째로는 웹 브라우저의 스펙 및 사양이 제각기 다르기 때문에 웹 브라우저의 호환성 문제가 있습니다.
+ 자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?
구글의 V8 앤진은 가장 대중적인 자바스크립의 엔진입니다.
V8 엔진은 크롬과 노드 안에서 동작하며 변수나 함수 객체 등을 담아놓는 공간인 메모리힙과
실행할 코드를 저장하는 공간인 콜스텍으로 나뉩니다.
먼저 자료구조 스택에 대해서 알아보자면 쌓는다는 뜻으로 가장 마지막으로 들어온 것이 먼저 나가는 후입선출 구조입니다.
삽입은 push, 삭제할땐 pop을 씁니다.
자바스크립트는 싱글 스레드 언어이기 때문에 한번에 한개의 일만 처리할 수 잇는데
이때 콜스택은 프로그램에서 함수의 호출순서를 기록하는 데이터 구조를 갖고 있습니다.
함수를 실행하면 그 기록이 스택 밑에서부터 차곡차곡 추가되며 함수로부터 반환받을 때는 콜 스택의 맨 위를 가져옵니다.
번들링과 웹팩
번들링은 왜 필요한가요?
번들링은 여러 개로 흩어져 있는 파일들을 묶어서 패키지로 제공하는 행위를 의미하고
현대 웹개발에서의 번들링은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음입니다.
번들링의 장점은 첫번째로 각각 파일로 나뉘어 있을때는 서버에 리소스 요청을 여러번 해야하지만 번들링 하게 되면 묶어서 한번 요청하므로 네트워크 비용이 줄어들게 됩니다.
두번째는 코드 난독화, 용량 압축, 최적화 등을 지원하기 때문에 성능향상과 보안에도 도움이 됩니다.
세번째로는 ES6 문법을 ES5 로 변환해주기 때문에 크롬 같은 대중적 브라우저 뿐만아니라 다른 모든 브라우저에서도 커버가 가능합니다.
이러한 이유로 번들링은 웹개발할 때 많은 도움이 되기 때문에 필요하다고 생각합니다.
자료구조
Stack과 Queue의 차이점은 무엇인가요?
스택(stack)이란 쌓아 올린다는 것을 의미한다.
따라서 스택 자료구조라는 것은 책을 쌓는 것처럼 차곡차곡 쌓아 올린 형태의 자료구조를 말한다.
스택은 시간 순서에 따라 자료가 쌓여서 가장 마지막에 삽입된 자료가 가장 먼저 삭제된다는구조적 특징을 가지게 된다.
이러한 스택의 구조를 후입선출(LIFO, Last-In-First-Out) 구조이라고 한다.
Queue 의 사전적 의미는 줄을 서서 기다리는 것을 의미한다.
먼저 온 사람이 먼저 나가는 선입선출(FIFO, First in first out) 방식의 자료구조를 말한다.
둘의 가장 큰 차이점은 , Stack은 가장 마지막에 추가되 있던 item을 삭제하고, Queue는 가장 처음으로 들어와 있던 item을 삭제한다.
React - 다시 정리
Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?
Virtual DOm은 DOM을 추상화한 가상의 객체 라고 할 수 있습니다.
virtual dom은 실제 DOM 객체에 접근 하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 후를 비교하고 바뀐 부분만 적용합니다.
그렇게 되면 실제 DOM은 최소한의 작업만 수행해도 렌더링 할 수 있게 되고 실제 DOM의 업데이트 비용을 줄이고 브라우저 파워를 덜 쓰므로 더 빠른 렌더링이 가능해집니다.
virtual dom은 간단하고 성능 향상에 도움이 되며 가볍기 때문에 DOM보다 빠른 렌더링, 비용절감 부분에서 쓰기 좋다고 생각합니다.
Class Component와 Function Component의 차이점이 무엇인가요?
- 되게 어려운 질문
- 객체지향 프로그래밍과 함수형 컴포넌트 의 차이
리액트를 사용하여 프론트 개발을 할 때 이 두 가지 방법으로 컴포넌트를 선언할 수가 있다
컴포넌트는 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수도 있다
클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하지만
차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있다는 점이다.
함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다
React Hook의 사용 규칙에 대해 설명하세요.
HOok은 그냥 자바스크립트 함수지만 두가지 규칙을 준수해야합니다.
먼저 리액트 함수의 최상위에서만 Hook을 호출해야 합니다.
반복문, 조건문, 중첩된 함수 내에서 실행하면 예상한대로 동작하지 않을 우려가 있기 때문에 Hook을 실행하면 안됩니다.
두번째로는 오직 React 함수 내에서만 Hook을 호출해야 합니다.
일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다.
hook은 react 함수 컴포넌트 내에서 사용되도록 만들어진 메소드기 때문에 일반 함수내에서는 정상적으로 돌아가지 않기 때문입니다.
남은 질문들 (나중에 다시 정리)
운영체제
Node.js는 싱글 스레드인가요?
JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?
Event Loop에 대해 설명할 수 있나요?
가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?
JavaScript - 심화
Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.
자바스크립트에서 일어나는 현상!
호이스팅은 정의는 뒷부분에서하고 앞부분에서 호출이 나오게 되면서 그런 현상..?
운영체제
Node.js는 싱글 스레드인가요?
JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?
Event Loop에 대해 설명할 수 있나요?
가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?
자료구조
Tree와 Graph의 차이점은 무엇인가요?
이진 탐색 방법에 대해 설명할 수 있나요?
