JavaScript

클로저에 대해서 설명해주세요.

클로저는 함수와 함수가 선언된 어휘적 환경의 조합

어휘적 환경(Lexical Environment)이란?

함수가 선언된 주변 환경을 의미. 주로 외부 함수(outer function)의 변수가 내부 함수(inner function)의 어휘적 환경에 포함됩니다. 그래서 내부 함수가 리턴되어도 나중에 클로저의 어휘적 환경에 접근하여 외부 함수의 변수에 접근할 수 있다.

클로저는 언제 사용 하는가?

클로저는 사실 자바스크립트의 어떤 함수든 가지고 있다. 어떤 함수든 전역 변수에 접근할 수 있기 때문입니다. 그래서 언제나 쓰이고 있다.

자바스크립트에서 private 메서드를 구현하기 위해서도 클로저를 활용할 수 있다. 클로저 내에 있는 변수는 외부에서 접근할 수 없기 때문에, 클로져 내에 있는 변수를 활용 할 수 있는 private 메서드만 따로 노출시켜서 인터페이스처럼 사용할 수 있다.

---

Promise.all()의 기능과 필요한 이유에 대해서 설명해주세요.

• 여러개의 Promise를 처리할 때 사용한다.
• 모든 프로미스가 동시적으로 이행되며 완료 시 결과값을 담은 배열을 반환한다.
• 일반적으로 복수의 URL에 동시에 요청을 보내고, 모든 요청의 응답이 완료되길 기다려야할 때 사용한다. (여러개의 프로미스가 모두 resolve되면 다음 로직을 실행해야 하는 경우)
• 하나의 프로미스라도 중간에 처리가 실패하면 그 실패를 즉시 반환한다.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

---

순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.

• 사이드 이펙트가 없는 함수다. 사이드 이펙트는 dom조작, api호출 등 외부의 상태를 변경하거나 함수로 들어온 인자의 상태를 직접 변경하는 것이다.
• 순수함수에 동일한 인자를 주었을 때, 항상 같은 값을 리턴하게 된다.

// 순수함수가 아닌 예
let num1 = 10;
let num2 = 20;

// num1, num2가 바뀌면 출력값이 바뀐다.
function impureSum1() {
  return num1 + num2;
}

// num1이 바뀌면 출력값이 바뀐다.
function impureSum2(newNum) {
  return num1 + newNum;
}

// 순수함수인 예
function pureSum(num1, num2) {
  return num1 + num2;
}


// 객체, 배열 => 새롭게 만들어서 반환
const obj = { one: 1 };
function changeObj1(targetObj) {
  targetObj.one = 100;

  return targetObj;
}
changeObj1(obj); // 기존 객체에도 영향이 간다.

function changeObj2(targetObj) {
  return {...targetObj, one : 100};
}

changeObj2(obj); // 기존 객체에 영향이 가지 않는다.

---

React

React의 state와 props에 대해서 설명해주세요.

• props란 properties를 나타내는 것으로 리액트에서는 부모컴포넌트에서 자식 컴포넌트의 속성을 지정한 것을 말한다.
• 지정한 속성들은 컴포넌트 매개변수로 받게 된다. 이 때 props는 객체라서 props내부에 접근하여 각 속성을 사용할 수 있게 된다.
• 자식 컴포넌트에선 props를 수정할 수 없다.

• state는 동적인 데이터를 다루기 위해 컴포넌트 내부에서 관리하는 값이다. state를 변경 할 때는 직접 변경하지 않고, setState함수를 호출하여 state를 변경해야 한다.
• state를 사용하는 이유는 데이터 상태가 변경될 때 자동으로 재랜더링 되는 것을 바라기 때문이다. 이런 기능을 통해 spa개발이 용이해진다.

아래에서 title, amount, date가 props가 된다.

<UserComponent
  title={function 타이틀반환함수 {}}
  amount={변수}
  값={3}
></UserComponent>

function UserComponent(props) { // 지정한 속성을 props를 통해 받게 된다.
  return (
    <div>
      <div>{props.title}</div> // function 타이틀반환함수 {}
      <div>{props.amount}</div> // 변수
      <div>{props.값}</div> // 3
    </div>
  );
}

함수형 컴포넌트에서 state는 다음과 같이 관리한다.

const [관리대상변수, 업데이트함수] = useState(관리대상의초기값);

console.log(관리대상변수); // 관리대상의초기값
업데이트함수("값변경");
console.log(관리대상변수); // "값변경";

---

React 컴포넌트의 key 속성에 대해서 설명해주세요.

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 Array 내부의 엘리먼트에 지정해야 합니다.
key가 없는 상태에서 리액트는 배열을 렌더링할 때 마지막에 요소를 추가한 후 전체를 다시 배열과 매칭시키면서 렌더링한다. 이는 성능적으로 매우 비효율적이다. 또한 상태 관리 측면에서도 버그가 발생할 확률이 높아진다.

key가 제대로 부여된 데이터는 어떤 정보가 추가되더라도 전체를 랜더링 하지 않고, 추가된 부분에 대해서만 랜더링 하게 되어 효율적이다. key는 어떤 컴포넌트든 key라는 이름으로 프로퍼티로 추가할 수 있다.

// 배열에 key로 사용할만한 요소가 있을 경우.
  const ExpenseItemList = props.items.map((expense) => (
    <ExpenseItem
      key={expense.id} // key
      title={expense.title}
      amount={expense.amount}
      date={expense.date}
    />
  ));

// key로 사용할만한 요소가 없을 경우 (버그를 발생시킬 수 있어 좋지 않다.)
  const ExpenseItemList = props.items.map((expense, idx) => (
    <ExpenseItem
      key={idx} // key
      title={expense.title}
      amount={expense.amount}
      date={expense.date}
    />
  ));

키를 인덱스로 잡으면 안좋은 이유에 대한 설명

(간단하게 설명하면 index로 잡을 경우 unshift등으로 index = 0에 데이터가 추가될 경우 기존 key가 0이었던 데이터가 새로 추가된 데이터에 매핑되는 문제 등이 발생한다.)

useEffect의 dependency array에 대해서 설명해주세요.

• useEffect는 컴포넌트의 side effect를 처리하기 위한 함수

• useEffect는 기본적으로 매 렌더링 마다 실행된다.
• dependency array에 primitive types를 넣으면 값이 변경될 때 마다 실행된다.
• dependency array에 object를 넣으면 object의 reference가 변경될 때 마다 실행된다.

---

HTTP/네트워크

CSR과 SSR의 차이점에 대해서 설명해주세요.

CSR

• 클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분(랜더링에 필요한 리소스)만 응답 받아 렌더링 하는 방식
• 페이지 전환 시 더 나은 사용자 경험을 보인다.
• 초기로딩 속도가 느리다, seo(Search Engine Optimization)에 불리하다.

SSR

• 서버사이드 렌더링의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식
• 초기 로딩속도가 빠르다. seo(Search Engine Optimization)에 유리하다.
• 페이지 전환 시 깜박거림이 발생할 수 있다.

GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.

GET은 클라이언트에서 서버로 어떠한 리소스로 부터 정보를 요청하기 위해 사용되는 메서드이다. (조회기능)

• GET은 멱등이다.
• GET 요청은 캐시가 가능하다. 
  : GET을 통해 서버에 리소스를 요청할 때 웹 캐시가 요청을 가로채 서버로부터 리소스를 다시 다운로드하는 대신 리소스의 복사본을 반환한다. HTTP 헤더에서 cache-control 헤더를 통해 캐시 옵션을 지정할 수 있다.
• GET 요청은 브라우저 히스토리에 남는다.
• GET 요청은 북마크 될 수 있다.
• GET 요청은 길이 제한이 있다.
  : GET 요청의 길이 제한은 표준이 따로 있는건 아니고 브라우저마다 제한이 다르다고 한다. 
• GET 요청은 중요한 정보를 다루면 안된다. ( 보안 )
  : GET 요청은 파라미터에 다 노출되어 버리기 때문에 최소한의 보안 의식이라 생각하자.
• GET은 데이터를 요청할때만 사용 된다

POST는 클라이언트에서 서버로 리소스를 생성하기 위해 데이터를 보낼 때 사용 되는 메서드다. (작성기능)

• POST는 멱등이 아니다
• POST 요청은 캐시되지 않는다.
• POST 요청은 브라우저 히스토리에 남지 않는다.
• POST 요청은 북마크 되지 않는다.
• POST 요청은 데이터 길이에 제한이 없다.

---

백엔드 기초

HTTP 메세지 구조에 대해 설명해주세요.

1. start line
   start line에는 요청이나 응답의 상태를 나타낸다.
   항상 첫 번째 줄에 위치한다.
   응답에서는 status line이라고 부른다.
2. HTTP headers
   요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합이다.
3. empty line
   헤더와 본문을 구분하는 빈 줄이 있다. 그 줄을 말한다.
4. body
   요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함한다.
   요청과 응답의 유형에 따라 선택적으로 사용한다.

start line과 HTTP headers를 묶어 요청이나 응답의 헤드(head)라고 이야기한다. payload는 body라고 이야기한다.

https://developer.mozilla.org/ko/docs/Web/HTTP/Messages 참조

---

Same-Origin Policy와 CORS에 대해서 설명해주세요.

SOP는 웹 환경의 보안 정책으로 동일한 출처에서만 리소스를 공유할 수 있는 정책이며 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 명칭 그대로 서로 다른 출처의 리소스를 공유할 수 있게 브라우저에게 알려주는 체제다. HTTP에 CORS헤더를 올바르게 설정하면 원하는 출처의 접근만 허용할 수 있다.

https://velog.io/@zer0jun/Web-Server-%EA%B8%B0%EC%B4%88 참조

재귀

Q. 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.

먼저 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 혹은 작성한 코드에 중첩 반복문이 많거나 중첩 횟수를 예측하기 어려운 경우 활용하기 좋습니다. 실제 예시로는 트리구조를 복사하는 경우가 있습니다. 가령 자바스크립트의 값이나 객체를 json문자열로 바꾸어주는 json.stringify()의 경우 객체 속에 객체가 있는 등 중첩되어 있는 경우도 모두 문자열로 변환시켜주어야 하는데, 이때 들어오는 객체의 중첩횟수는 예측하기 어렵습니다. 이럴 때 재귀를 활용하면 좋습니다.

UI / UX

Q. UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요.

User interface는 사람이 컴퓨터와 상호 작용하는 시스템을 의미합니다. 화면상의 그래픽 요소 외에도 키보드 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있습니다.

User Experience는 사용자가 어떤 시스템이나 제품 혹은 서비스를 직 간접적으로 이용하면서 느끼고 생각하는 총체적 경험입니다. 제품이나 서비스 그 자체에 대한 경험은 물론 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 UX라고 할 수 있습니다. UI도 UX에 포함되는 개념입니다.

좋은 UI를 갖춘 서비스일 수록 좋은 UX를 가질 확률이 높습니다.

Custom Compnent

Q. Styled Compnents를 사용해보면서 느낀 장점을 이야기해주세요

우선 프로그래밍을 하면서 가장 중대한 문제인 '이름 짓기'에 대한 고민을 해결할 수 있다는 것이 장점으로 느껴졌습니다. 또한 스타일이 컴포넌트에 종속되다 보니 스타일 속성이 겹쳐서 예상치 못한 결과가 나오는 것을 방지할 수 있다는 점이 좋았습니다.

Q. useRef가 필요한 상황을 예시를 들어 설명해주세요

리액트에선 가상돔을 활용하기 때문에 본래 특정 DOM에 직접 접근하는 것은 지양해야 합니다. 하지만 스크롤바의 위치를 가져오거나 설정하거나, 또는 포커스를 설정하는 등 특정 DOM을 선택해야 하거나 Video.js, HTML5 Video, chart.js같은 그래프 관련 외부 라이브러리를 사용할 때, 특정 DOM에다 적용하기 때문에 불가피 하게 DOM을 직접 선택해야 하는 상황이 발생할 수 있습니다.

이 때 useRef가 필요합니다.

Redux

Q. 상태관리 라이브러리의 필요성에 대해서 설명해주세요

컴포넌트 중심의 프로젝트를 진행할 때, 프로젝트 규모가 커지면 커질 수록 컴포넌트들의 중첩도는 높아지고, 동시에 데이터 흐름도 복잡해 져서 상태관리가 어렵게 될 것입니다. 이럴 경우 전역상태를 관리할 수 있는 라이브러리를 사용하면 데이터 흐름도가 단순해질 수 있습니다.

Q. Redux의 주요 개념들과 연결 관계를 설명해주세요

리덕스는 Action, Dispatch, Reducer, Store로 구성되어 있습니다.

Action은 어떤 액션을 취할 것인지 정의해 놓은 객체로 사용자가 UI조작을 통해 이벤트가 발생할 경우 Action객체는 Dispatch함수의 인자로 전달됩니다. Dispatch는 받은 Action객체를 다시 Reducer함수로 전달해줍니다. Reducer는 Action객체의 값을 확인하여 그 값에 따라 전역 상태 저장소인 Store의 상태를 변경합니다. 이렇게 Store의 상태가 변경되면 어플리케이션은 화면을 다시 렌더링 합니다.

결국, Redux에서는 Action - Dispatch - Reducer - Store 순서로 데이터가 단방향으로 흐르게 됩니다.

웹 표준 & 웹 접근성

Q. Semantic HTML의 필요성을 예시를 들어 설명해주세요.

먼저 협업에 유리합니다. div와 span으로만 html코드를 작성한다면 요소의 이름을 보고서는 어떤 기능을 하는지 전혀 파악할 수 없기 때문에 주석을 작성해서 설명하거나 id와 class를 사용해서 일일히 표기해야 할 것입니다. Semantic한 요소를 사용한다면 이런 부가적인 일을 줄일 수 있습니다. 또한 검색 엔진은 HTML코드를 보고 문서의 구조를 파악하기 때문에 SEO관점에서도 유리합니다. 마지막으로 웹 접근성을 향상시킬 수 있습니다. 시각장애인의 경우 웹 페이지에 접근할 때 스크린리더를 이용하게 되는데, 이 때 html이 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있게 됩니다.

네트워크 심화

Q. IP 프로토콜의 한계에 대해서 설명해주세요.

IP프로토콜의 한계로는 크게 비연결성과 비신뢰성이 있습니다. 비연결성은 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷이 전송되는 것이고, 비신뢰성은 중간에 패킷이 사라질 수 있고 패킷의 순서를 보장할 수 없는 것입니다.

Q. HTTP 프로토콜의 특징에 대해 설명해주세요.

HTTP프로토콜은 클라이언트가 요청하면 서버는 응답하는 클라이언트 서버 구조고, 무상태 프로토콜이며 비연결성을 지니고 있습니다.

이런 특징으로 응답 서버를 쉽게 바꿀 수 있기 때문에 무한한 서버 증설이 가능합니다. 또한 HTTP는 기존에 개별 자원을 받아오기 위해 잦은 연결과 종료로 인한 비효율이 있었는데, 이를 극복하기 위해 각각의 자원들을 요청하고 모든 자원에 대한 응답이 돌아온 후 연결을 종료하는 HTTP지속 연결을 통해 이 문제를 해결했습니다.

Q. 캐시 검증 헤더의 종류와 사용법에 대해서 설명해주세요.

캐시 검증 헤더로는 Last-Modified와 ETag가 있습니다. Last-Modified는 데이터가 마지막으로 수정된 시간 정보를 헤더에 포함합니다. 이로 인해 응답 결과를 캐시에 저장할 때 데이터 최종 수정일도 저장됩니다. 만약 캐시 유효 시간이 초과해도, 서버의 데이터가 갱신되지 않을 경우 body는 제외하고 304 메세지와 함께 헤더 메타데이터만 응답하고, 클라이언트는 헤더 정보로 캐시의 메타데이터를 갱신합니다. 이렇게 클라이언트는 캐시의 데이터를 재활용하게 되고 결과적으로 네트워크 다운로드가 발생하지만 용량이 적은 헤더 정보만 다운로드 하게 되어 쓸데 없는 부하가 발생하지 않게 됩니다.

ETag는 캐시용 데이터에 고유한 버전 이름을 달아둡니다. 데이터가 변경되면 이 이름을 바꾸어서 변경하게 됩니다. 단순하게 ETag만 보내서 이름이 같으면 유지하고, 다르면 다시 받게 됩니다. ETag는 캐시 제어 로직을 서버에서 완전히 관리하게 되며 클라이언트는 단순히 이 값을 서버에 제공만 하게 됩니다.

인증 / 보안

Q. Hasing에 대해서 설명해주세요.

hashing은 어떠한 문자열에 '임의의 연산'을 적용하여 다른 문자열로 변환하는 것입니다. hasing을 할 때 몇가지 규칙이 있는데, 먼저 모든 값에 대해 해시 값을 계산하는데 오래 걸리지 않아야 합니다. 또한 모든 값은 고유한 해시 값을 가져야합니다. 마지막으로 아주 작은 단위의 변경이라도 완전히 다른 해시 값을 가져야 합니다.

Q. Cookie의 MaxAge, Expires옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.

MaxAge혹은 Expires옵션은 쿠키가 유효한 기간을 정하는 옵션입니다. 만약 브라우저에 쿠키가 영원히 남아있다면 그 만큼 탈취가 쉬워지게 됩니다. 따라서 쿠키에 대한 유효기간을 설정하는 것이 보안 측면에서 중요합니다. 이런 옵션을 설정하지 않으면 세션 쿠키가 되며 브라우저가 실행 중일 때 사용할 수 있는 임시쿠키가 됩니다. 이 쿠키는 브라우저를 종료하면 삭제됩니다. 반대로 옵션을 설정하면 브라우저의 종료 여부와 상관없이 지정된 유효시간 만큼 사용가능한 영속성 쿠키가 됩니다.

section 4 기술면접 정리

JavaScript

Q. Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.

기본적으로 자바스크립트의 모든 변수는 호이스팅 됩니다. 그래서 var같은 경우는 선언 전에 사용해도 undefined로 알아서 할당되는 것을 확인할 수 있습니다. 그러나 let과 const는 이렇게 하면 참조에러가 발생합니다. 이는 TDZ에 의해 발생하는 것으로 TDZ는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말합니다. var의 경우는 전역 스코프를 따르고, 선언과 초기화 단계를 동시에 진행합니다. 그래서 var를 선언하기 전에 호출해도 undefined가 됩니다. let의 경우는 선언과 초기화가 분리되어 진행됩니다. 그래서 선언 전에 호출하면 메모리가 할당되지 않아서 참조에러가 발생하게 되는 것입니다.

브라우저 렌더링

Q. 브라우저 렌더링 방식에 대해 설명하세요.

브라우저는 서버로부터 HTML,CSS,js와 같은 필요한 리소스를 다운받습니다. 브라우저의 렌더링 엔진은 전달받은 html문서를 파싱 후 dom트리를 만듭니다. 이어서 css같은 스타일 요소를 파싱해 cssom트리를 만듭니다. 그리고 이 둘을 결합해 render트리를 구축한 후 레이아웃 과정을 통해 배치 위치를 정한 후 ui백엔드에서 render트리를 화면에 그리게 됩니다.

Q. 리플로우와 리페인트에 대해 설명하세요.

브라우저의 화면을 늘리거나 크기를 조절하는 경우 혹은 다른 사이트로 이동하는 경우 등 화면의 요소가 달라질 때 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트라고 한다.

Q. 반응형 웹은 무엇이고 장단점에 대해 설명하세요.

반응형 웹은 웹에 접근한 기기의 특성에 따라 유연하게 ui가 변화하는 웹을 말합니다. 장점으로는 하나의 버전으로 다양한 기기를 커버할 수 있기 때문에 여러 버전으로 개발하지 않아도 된다는 점에서 비용과 시간, 인력을 줄일 수 있고, 유지보수가 간편합니다. 하지만 반응형을 위한 코드들이 있으므로 로드 속도가 느리다는 단점이 있습니다.

Q. 자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?

콜스택이란 프로그램에서 우리가 어디에 있는지를 기본적으로 기록하는 데이터 구조입니다. 기본적인 동작 방식은 함수를 실행하면 해당 함수의 기록을 스택 맨 위에 추가합니다. 함수가 결과 값을 반환하면 쌓여있던 함수는 제거됩니다. 재귀 함수를 실행하게 되는 경우 스택이 많이 쌓일 가능성이 높은데 스택이 계속 쌓이다가 스택의 사이즈가 초과했을 때 발생하는 오류를 스택 오버플로우라고 합니다.

번들링과 웹팩

Q. 번들링은 왜 필요한가요?

번들링은 코드를 압축하여 속도 개선에 용이하다는 점, 변수 충돌을 예방한다는 점, 배포 코드의 악의적 조작을 예방할 수 있다는 점에서 유용합니다.

React

Q. Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?

가상돔은 실제 dom의 사본 같은 개념으로 리액트에서는 실제 dom객체에 접근하여 조작하는 대신 이 가상의 돔 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용합니다. 브라우저 상에서 ui상태가 자주 변경될 경우 리플로우와 리페인트가 자주 일어나게 되고 이는 속도에 영향을 끼칩니다. 가상돔을 사용하면 diff알고리즘을 통해 바뀐 부분만 렌더링 해주기 때문에 속도 향상에 도움이 됩니다.

Q. Class Component와 Function Component의 차이점이 무엇인가요?

클래스 컴포넌트는 state, lifCycle관련 기능을 사용할 수 있고, 임의 메서드를 정의할 수 있습니다. 함수형은 state, lifeCycle관련 기능을 hook을 통해 해결하고, 메모리 자원을 클래스 컴포넌트보다 덜 사용합니다. 또한 컴포넌트 선언이 더 편해서 현재는 함수형 컴포넌트를 더 많이 사용합니다.

Q. React Hook의 사용 규칙에 대해 설명하세요.

오직 리액트 함수 컴포넌트 내에서만 사용되어야 하며 일반적인 js 함수에서는 호출하면 안되고, 리액트 함수 컴포넌트의 최상위에서 호출해야합니다. 반복문 조건문 중첩된 함수 내에선 hook을 호출하면 안됩니다.

운영체제

Q. Node.js는 싱글 스레드인가요?

Q. JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?

자바스크립트 자체는 싱글스레드지만 쿼리 혹은 로컬 file을 읽거나 쓰는 작업을 할 때, 자바스크립트가 이 작업들을 처리하는 것이 아니라 네트워크나 기타 io로 작업을 보냅니다. 그 후 작업들을 대기하고, 처리 시점을 다루는 일을 자바스크립트가 싱글 스레드 방식으로 처리합니다. 그래서 마치 여러 작업이 동시에 일어나는 것 처럼 보여지게 됩니다.

Q. Event Loop에 대해 설명할 수 있나요?

이벤트 루프는 브라우저나 node.js에서 지원하는 것으로 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원합니다. 이벤트 루프의 역할은 이벤트 발생 시 호출되는 콜백 함수들을 태스크 큐에 전달하고, 콜스택이 모두 비었고, 가장 먼저 들어간 작업이 완료되었을 경우 콜백함수를 콜스택으로 넘겨줍니다.

Q. 가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?

가비지 컬렉션은 메모리 관리 기법 중 하나로 동적으로 할당했던 메모리 영역 중에서 필요없게 된 영역을 해제하는 기능입니다. C#, Java, pytion, javascript등 c언어처럼 사용자가 직접 메모리 영역을 해제시켜주지 않아도 되는 많은 언어가 가비지 컬렉션을 가지고 있습니다.

자료구조

Q. Stack과 Queue의 차이점은 무엇인가요?

스택은 후입선출, 큐는 선입선출한다는 차이점이 있습니다.

Q. Tree와 Graph의 차이점은 무엇인가요?

기본적으로 그래프는 노드와 그 노드를 연결하는 간선으로 구성된 자료구조 입니다. 트리는 그래프의 한 종류로 방향성이 있고, 계층적인 비순환 그래프를 말합니다.

Q. 이진 탐색 방법에 대해 설명할 수 있나요?

이진 탐색 방법으론 DFS, BFS 방식으로 전위 중위 후위순회하는 방법이 있습니다.
전위는 부모 노드가 제일 먼저 방문되는 순회 방식으로 주로 부모 노드가 먼저 생성되어야 하는 트리를 복사할 때 사용합니다. 중위 순회는 왼쪽-부모-오른쪽 순으로 순회하고, 이진 트리의 오름차순으로 값을 가져올 때 쓰입니다. 후위 순회는 왼쪽-오른쪽-부모 순으로 순회하고, 자식 노드부터 순회하는 특성에 따라 트리를 삭제할 때 쓰입니다.