22.08.18_TIL

📌 프로젝트 전 마지막 Section4 회고를 하는 날이다... 내가 학습했던 만큼만 한다면 무리없이 협업을 통해 프로젝트를 완성할 수 있다고 생각한다. 그리고 오늘 기술 면접을 준비하면서 내가 항상 부족했던 부분을 조금 더 채워갈 수 있는 하루가 되었으면 좋겠다.!.!

📗 오늘 학습한 내용

JavaScript

• Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는가?
  • 호이스팅: 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말하며 var변수 및 함수를 사용하면 호이스팅이 된다.
  • Temporal Dead Zone: let, const, class 구문의 유효성을 관리한다.
  • 해당 질문에 대한 답을 드리기전에 변수의 생성 단계인 선언, 초기화, 할당 단계가 있음을 알아야 합니다. 호이스팅은 변수의 선언 및 초기화가 동시에 이루어지게 되어 변수의 사용이 선언 및 초기화 보다 앞에 있을 경우에 undefined가 출력되지만 TDZ의 경우 변수의 생성단계 3단계를 각자 실행하기 때문에 undefiend가 아닌 에러를 출력합니다.

브라우저 렌더링

• 브라우저 렌더링 방식이란?
  • 사용자가 브라우저를 통해서 페이지에 접속할 때, 서버에서 필요한 파일을 다운받아 화면에 보여주는 것을 브라우저 렌더링이라고 하며, 동작 방식은 HTML, CSS 파일을 파싱하여 Tree를 형성하고, 두 트리르 결합하여 렌더 트리를 만듭니다. 렌더링 트리에서 각 노드의 위치와 크기를 계산하여 각 노드를 화면상에 실제 픽셀로 변환하여 레이어를 만들고 합성하여 실제 화면에 나타냅니다.
  • 렌더링 트리: 렌더링 목적으로 만들어진 트리로 DOM트리와 CSSOM트리를 결합한 것입니다.
• 리플로우와 리페인트?
  • 리플로우란 어떠한 액션이나 이벤트에 따라 요소의 크기나 위치등 레이아웃 수치를 수정하여 영향을 받는 자식, 부모노드들을 포함하여 레이아웃 과정을 다시 수행하게 되는데 이때, 렌더 트리와 각 요소들의 크기와 위치를다시 계산하는 과정을 리플로우라고 합니다.
  • 리페인트란 리플로우만 수행될 경우 실제 화면에 반영되지 않습니다. 리플로우를 통해 다시 계산된 요소들을 화면에 나타나게 하는 것이라고합니다.
• 반응형 웹은 무엇이고 장단점은 무엇인가?
  • 반응형 웹이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 사이트로 브라우저의 크기에 따라 실시간으로 반응하여 레이아웃이 변하는 웹 사이트를 의미합니다.
  • 반응형 웹의 장점으로 하나의 소스만 수정하면 되기 때문에 효율적인 유지보수가 가능하며 URL 기반으로 화면이 바뀌어 검색엔진 최적화에 유리합니다.
  • 반응형 웹의 단점으로 여러 장치에 적응하게끔 만들어져 모바일 전용으로 하는 사이트에 비해 속도가 느리며 많은 데이터를 소비하게 되는 단점과 웹 브라우저의 호환성 문제가 잇습니다.
• JS 엔진의 콜 스택이란?
  • 실행 중인 서브루틴을 저장하는 자료구조입니다.

번들링과 웹팩

• 번들링은 왜 필요한가?
  • 번들링은 여러 제품이나, 코드, 프로그램을 나누어서 패키지로 제공하는 것 입니다. 패키지로 제공되기 때문에 로딩 속도가 일반적인 배포 방식보다 빠릅니다.

React

• Virtual DOM?
  • 실제 DOM의 사본 같은 개념으로 React에서는 실제 DOM 객체에 조작하는 대신 가상 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용하는 것입니다.
• Virtual DOM이 좋은이유
  • 실제 DOM을 조작하게 될 경우 불필요한 트리까지 재 렌더링을 해야하지만 가상 DOM의 경우 바뀐 부분만 적용하기 때문에 속도가 빠릅니다.
• 클래스 컴포넌트와 함수 컴포넌트의 차이점
  • 클래스 컴포넌트의 경우 코드가 많아지고 복잡해질수록 이해하기 어렵고, 컴포넌트 사이에서 상태 로직을 재사용하기 어려웠습니다. 이러한 것을 보완하기 위해 사용되는 것이 함수 컴포넌트입니다. 하지만, 함수 컴포넌트의 경우 상태 값을 사용하거나 최적화할 수 있는 기능들이 부족했지만 Hook이라는 개념을 도입하여 상태의 조작을 쉽게 하도록 변화되었습니다.
• React Hook의 사용 규칙
  • 리액트 함수의 최상위에서만 호출되어야 하며, 오직 리액트 함수 내에서만 사용되어야합니다. 최상위에서 사용하지 않고 조건문, 반복문 안에서 호출하게 되면 순서대로 저장하기 어려워지고 예기치 못한 버그를 초래하게 될 수 있습니다.

운영체제

• Node.js는 싱글 스레드인가?
  • 비동기 이벤트 처리를 기반으로 하는 node.js는 싱글스레드 방식입니다.
• JS는 싱글 스레드이다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는가?
  •  
• Event Loop에 대해 설명해라
  • 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 것이 이벤트 루프입니다.
• 가비지 컬렉션이란 무엇이며, 가비지 컬렉션이 가진 언어에는 무엇이 있나?
  • 가비지 컬렉션은 프로그램에서 더 이상 사용하지 않는 메모리르 자동으로 정리하는 것입니다. 가비지 컬렉션이 가진 언는 자바, C#, 자바스크립트 등이 있습니다.

자료구조

• Stack과 Queue의 차이점
  • Stack은 한쪽 방향으로만 입출력이 가능하며, Queue는 한쪽 방향에서 입력이 일어나면 반대 방향에서 출력을 합니다. 스택은 후입선출 방식이고, 큐는 선입 선출 방식입니다.
• Tree와 Graph의 차이점
  • 트리는 단방향 그래프로 하나의 데이터 아래 여러 개의 데이터가 존재할 수 있는 비선형 구조이며,  아래로만 뻗어 나가기 때문에 사이클이 없습니다. 하지만, 그래프의 경우 여러개의 점들이 서로 복잡하게 연결되어 있는 구조로 양방향 통신이 가능하여 사이클이 존재합니다.
• 이진 탐색 방법이란?
  • 데이터가 정렬되어 있는 배열에서 특정한 값을 찾아내는 방식의 알고리즘입니다. 배열의 중간에 있는 임의의 값을 선택하여 찾고자 하는 값과 비교하여 작다면 왼쪽의 데이터들을 대상으로 탐색하며, 클 경우에는 오른쪽에 위치한 데이터들을 대상으로 탐색하는 방식을 반복적으로 수행하여 값을 찾을 때 사용되는 알고리즘 기법입니다.

📘 추가로 공부할 내용

Study원과 함께 진행중인 프로젝트 구현(메인 플젝 후 다시시작)

나만의 포트폴리오 사이트 구현  해보기

pre-project 관련 사이트 찾아보기

📝 중요한 내용

• 기술면접