⭐️면접스터디 4회차 - Javascript 관련 예상 질문

1. 호이스팅에 대해 설명해주세요. (변수/함수 호이스팅, var/let/const) -42,164,202

 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 

1.변수 호이스팅

- var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.
- 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

- 전역변수 호이스팅과 지역변수 호이스팅시 생성 시점이 다르다. 
- 일반적으로 변수 선언은 전역변수 호이스팅으로 선언문이 어디있든 상관없이 가장 먼저 실행된다. 다시말해 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행된다. 반면, 지역변수 호이스팅은 함수 내부에서 선언한 변수이므로 함ㄴ수가 호출된 직후에 함수 몸체 코드가 한 줄 씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 실행된다.

2.함수 호이스팅

- 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성시점이 다르다.
- 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출하면 함수 호이스팅에 의해 호출이 되지만 . 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출하면 변수 호이스팅이 발생된다.
왜냐햐면 함수 표현식은 변수에 할당되는 값이 함수 리터럴인 문이다. 따라서 함수 표현식은 변수 선언문과 변수 할당문을 한 번에 기술한 축약 표현과 동일하게 동작한다. 따라서 변수 할당문의 값은 할당문이 실행되는 시점. 즉 런타임에 평가되므로 함스 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.

3. 함수 호이스팅과 변수 호이스팅의 차이점

var키워드를 사용한 변수 선언문과 함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행되어 실별자를 생성한다는 점에서 동일한다. 하지만 var 키워드로 선언된 변수는 undefined로 초기화되고, 함수 선언문을 통해 암묵적으로 생성된 식별자는 함수 객체로 초기화된다. 따라서 var키워드를 사용한 변수 선언문 이전에 변수를 참조하면 변수 호이스팅에 의해 undefined로 평가되지만 함수 선언문으로 정의한 함수를 함수 선언문 이전에 호출하면 함수 호이스팅에 의해 호출이 가능하다.

---

2. 클로저란 어떤 것이고 클로저의 원리는 무엇인가요? 고차함수란 무엇인가요?

📍클로저란?

클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 '기억한다'.

📍클로저(Clousure)란 무엇이며, 왜 이러한 패턴을 사용하는가

반환된 내부함수가 자신이 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언되었을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수, 자신이 생성될 때의 환경을 기억하는 함수

📍사용하는 이유

1) 현재 상태를 기억하고 변경된 최신 상태를 유지하기 위해
2) 전역 변수의 사용을 억제하기 위해
3) 정보를 은닉하기 위해

https://hyunseob.github.io/2016/08/30/javascript-closure/

https://realmojo.tistory.com/300

https://sunnykim91.tistory.com/m/121

---

3. 프로토타입은 무엇이고 프로토타입체인은 무엇인가?-285

프로토타입이란 자바스크립트에서 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어있는데, 이 부모 객체를 프로토타입 객체 혹은 프로토타입이라고 부릅니다.

프로토타입 체인은 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것을 말합니다.

참고 : https://iamsjy17.github.io/javascript/2019/06/10/js33_17_prototype.html

 

4. 실행 컨텍스트와 스코프 체인은 무엇인가?

---

5. 이벤트 관리 방법에 대해 설명하세요. 보통 어떤 방식으로 이벤트를 설계하나요? (캡처링,버블링,등록,해제,위임 등)

1) 이벤트 버블링
이벤트 발생 시 하위에서 상단으로 이벤트가일어나는 것 .

2)이벤트 캡쳐링
버블링의 반대로 이벤트가 하위 요소로 전파되는 것이다. 버블링은 전달에 사용하였다면 캡쳐링은 탐색할 때 이용한다.

3)이벤트 위임
하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식이다. 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어한다. 동적인 요소들을 처리하기 수월하고 이벤트 핸들러를 더 적게 등록해주기 때문에 메모리를 절약할 수 있다는 장점이 있다. 하위 요소가 많아질수록 이벤트리스너를 다는 작업이 번거롭기 때문에 이벤트 위임을 사용하는 것이다.

---

6. 동기와 비동기에 관해 설명해주세요. JS에서 비동기는 어떻게 처리하나요? (callback, promise, async/await, 비동기처리의 특성과 에러처리 등)

7. JS 빌드 시스템에 대해 설명하세요. (Babel, Babel-loader, Polyfill, Node.js, ESLint, Prettier, 웹 태스크 매니저)

8. 웹팩이란 ? 모듈 번들러란 ?

 

---

9. npm과 yarn은 어떻게 다른가요?

npm과 yarn은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자입니다.

📍속도

npm과 yarn의 주요 차이점 중 하나는 패키지 설치 프로세스를 처리하는 방법입니다. npm은 패키지를 한 번에 하나씩 순차적으로 설치합니다. 그에 비해 yarn은 여러 패키지를 동시에 가져오고 설치하도록 최적화되어 있어 패키지 설치 속도 측면에서 yarn이 npm보다 빠릅니다.

📍보안

yarn은 보안 측면에서 npm보다 더 안전한 것으로 알려져 있습니다. npm은 자동으로 패키지에 포함된 다른 패키지 코드를 실행합니다. 이로 인해 보안 시스템에 몇 가지 취약성이 발생하며 나중에 심각한 문제가 발생할 수 있습니다. 반면에 yarn은 yarn.lock 또는 package.json파일에 있는 파일만을 설치합니다. 보안은 yarn의 핵심 기능 중 하나이지만 최근 npm의 업데이트에서 npm의 보안 업데이트도 크게 향상되었습니다.

---

10. ES6 문법에 대해 아는대로 설명해주세요 (spread, rest, 디스트럭처링, 템플릿 리터럴 등)

ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다.

 

---

11. 일반 함수와 화살표 함수엔 어떤 차이가 있나요?

*화살표 함수
화살표 함수는 ES6에서 새로 추가되었다. 기존 함수 표현식과 비교하면 간단하게 사용 가능하다.
화살표 함수는 익명 함수로, 이름이 없는 함수, 즉시 실행이 필요할 경우 사용하는 함수이다.

1) this를 바인딩 할 때  

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고,
함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.(Lexical this)
또한, call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

2) 생성자 함수로 사용 가능 여부

일반 함수는 생성자 함수로 사용할 수 있다.
화살표 함수는 생성자 함수로 사용할 수 없다. prototype 프로퍼티를 가지고 있지 않기 때문이다.

3. arguments 사용 가능 여부

일반 함수에서는 한수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용 가능
화살표 함수에서는 arguments 변수가 전달되지 않는다.

참고 : https://velog.io/@yjh8806/%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-%EC%9D%BC%EB%B0%98-%ED%95%A8%EC%88%98%EC%9D%98-%EC%B0%A8%EC%9D%B4

---

12. 자바스크립트 엔진에 대해 아는대로 설명하세요. (콜 스택, 테스크 큐, 이벤트 루프, 싱글스레드, 멀티스레드, 프로세스)

자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 인터프리터이다.
대중적으로 알려진 엔진은 구글의 V8엔진인데, 아무래도 가장 많이 사용되는 크롬에서 사용되고, Node.js에서 사용되는 엔진이기도 하기 때문인 듯 하다.

자바스크립트 엔진은 메모리 힙과 호출 스택으로 이루어져 있다.

• 메모리 힙 : 변수와 객체의 메모리 할당이 발생하는 곳
• 콜 스택 : 코드가 실행될 때마다 호출 스택이 쌓이는 곳

런타임

자바스크립트 엔진에서 제공해주지 않지만 자바스크립트 개발자가 사용하는 setTimeout 과 같은 API들이 있다. 이러한 API들은 브라우저에서 제공하는 Web API이다. 그리고 이런 Web API 의 호출을 제어하기 위한 콜백큐와 이벤트 루프가 있다.

콜스택

자바스크립트는 싱글 쓰레드 언어이기 때문에, 한번에 한가지 작업만 실행하게 된다.
콜 스택이란 프로그램에서 우리가 어디 있는지를 기록하는 자료 구조이다. 함수를 실행하면, 그 함수가 콜 스택의 가장 상단에 위치하게 된다. 그리고 함수의 실행이 종료 되면 그 함수는 스택에서 제거(Pop) 된다.
그리고 호출 스택의 각 항목을 스택 프레임이라고 한다.

스택 오버플로우

function foo() {
  foo();
}
foo();

위와 같은 함수를 호출하게 되면 콜스택 위에 계속 함수가 쌓일 것이다. 그리고 호출 스택의 실제 크기를 초과하게 되면 브라우저는 Maximum call stack size exceeded 라는 에러를 발생시키고 함수를 종료시킨다.

이벤트 루프

호출 스택에 처리 시간이 굉장히 오래 걸리는 함수가 있으면 어떻게 될까? 자바스크립트는 싱글 쓰레드 이기 때문에 함수가 종료될 때까지 다른 작업들이 모두 대기 상태가 될 것이다.
그리고 결국 브라우저는 웹 페이지를 종료할지 여부를 무든 오류메시지를 표시할 것이다.

이런 상황을 제어하기 위해 사용하는 것이 비동기 콜백이다.
즉, 코드 일부를 실행하고 나중에 실행될 콜백 함수를 제공하는 것이다. 비동기 콜백은 즉시 콜스택에 올라가는 것이 아닌, 특수한 시점에 실행이 되므로 스택안에 바로 올라가지 않는다.

그리고 이 콜백 함수들의 스케쥴을 관리하는 것이 이벤트 큐이다.

콜백 큐

자바스크립트 런타임은 콜백 큐를 가지고 있다. 이는 처리할 메시지 목록과 실행할 콜백 함수들의 리스트이다.

setTimeout 를 포함하고 있는 함수가 실행된다고 하면, 함수는 콜스택에 올라갈 것이고, setTimeout 은 콜백 큐에 밀어 넣어진다.
이벤트 루프는 콜스택과 콜백 큐를 감시하면서, 콜스택이 비워지게 되면 콜백 큐에 대기 중인 항목이 있는지 확인하고, 있으면 스택에 올린다.

자바스크립트 삽입 위치

브라우저는 렌더링 도중 자바스크립트를 만나게 되면 이에 대한 해석과 실행이 완료될 때까지 렌더링을 멈춘다. 그렇기 때문에, 렌더링이 정상적으로 끝난 후 실행하기 위해 바디 하단에 스크립트를 두는게 안정적이라는 말을 한다.

1. head에 삽입되는 경우

• 무거운 스크립트가 실행되는 경우 렌더링에 방해가 될 수 있다.
• 제이쿼리와 같은 설정을 위한 스크립트들이 사용된다.
• DOM이 필요할 경우 document.onload 를 사용하여, load 이벤트 발생 시, 실행되도록 할 수 있다.

1. 바디 하단에 삽입되는 경우

• 브라우저의 렌더링이 완료 된 후 실행되기 때문에, DOM을 조작할 수 있다.

하지만! 헤드 태그에서 발생할 수 있는 문제를 해결하기 위해 추가된 속성이 있다.
바로, async와 defer이다.

<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>

위와 같이 async 또는 defer 속성이 추가된 스크립트는 렌더링을 방해하지 않는다.
async 속성은 외부 스크립트에만 사용할 수 있으며, 스크립트를 내려받는 즉시 실행된다.

defer 속성은 비동기적으로 스크립트를 다운로드 하며, 렌더링이 완료된 후 스크립트를 실행한다.

참고 : 

https://velog.io/@ru_bryunak/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88-1

---

13. 가비지 컬렉터란?

가비지 컬렉터는 애플리케이션 할당한 메모리 공간을 주기적으로 검사하여 더이상 사용되지 않는 메모리를 해제하는 기능을 말한다.
더 이상 사용하지 않는 메모리란 간단히 말하면 어떤 식별자도 참조하지 않는 메모리 공간을 의미한다.
자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 가비지 컬렉터를 통해 메모리 누수를 방지한다.

---

14. jwt에 대해 설명하세요.

accessToken만 생각했을 때 개념을 생각해보면, 로그인시 백엔드에서 암호화된 AcessToken을 주고, 프론트에서 api요청마다 AccessToken을 헤더에 첨부하여 사용자가 누구인지 백엔드에 알려주는것이다.

참고 : https://coding-ocean.tistory.com/59

---

15. 배열 메서드(map, filter, reduce, foreach, every...)에 대해 아는대로 설명하세요. 그리고 차이점에 대해 설명하세요.

forEach : forEach 메서드도 배열을 순회하기 위해 사용되지만, 기본적인 for 반복문과는 다른 방식으로 함수를 사용합니다.

---

16. this 바인딩에 대해 설명하세요.

참고 : https://velog.io/@proshy/JS-%EC%83%81%ED%99%A9%EC%97%90-%EB%94%B0%EB%A5%B8-this-%EB%B0%94%EC%9D%B8%EB%94%A9

---

17. set과 map에 대해 설명하세요.

---

18. SOP와 CORS가 무엇인가요 ? 그리고 이를 해결하려면 어떻게 할 수 있을까요 ?

https://velog.io/@jesop/SOP%EC%99%80-CORS

---

19. Javascript에서 성능 최적화는 무엇이고 어떻게 할 수 있나요 ?

https://realmojo.tistory.com/337

---

20. REST API란 ?

rest api로 받은 객체와 배열은 Axios를 이용해 화면상에 출력한다.
query를 기반으로 요청할 수 있기 때문에 가독성이 좋고, 또 json형태로 추가 가공해줄 필요가 없다는 것이 장점.

참고 : https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html

---

21. 브라우저 랜더링 과정