서로의 성장을 위한 피드백입니다.
보완할 점이 있다면 자세하게 작성해주세요 ~.~
deep dive에서 실행컨텍스트 공부하자 ! !
특이사항
피드백
천욱 ~ 2:42 (20분)
면접관 피드백
- 수화
- 클래스, 생성자함수 어떤 걸 더 선호 → 생성자 함수, 더 간결해서 ?? → 클래스 key, value로 선언한다는 게 생성자 함수도 동일하지 않나요?
- js 배열과 다른 언어의 배열의 차이점 → 유사배열 객체, 근본적으로는 객체이라는 답변 굿. 실제로 key가 index인 객체가 맞습니다 👍 (포스팅참고)
- 사용하신 모듈 ESM이 뭔가요? → ES6 부터 js에서 제공하는 표준 모듈시스템입니다. 사용하는 방법은 script type=”module”로 하고, import/export로 사용할 수 있습니다.
- 모듈 개념, 종류 → 모듈 개념 정리 필요할 듯!
- ESM은 브라우저에 동작하나요? 웹팩같은 번들러는 왜 필요할까요?
- 초기 로딩 시간 최적화: 번들링된 결과물은 단일 파일로 로드되기 때문에 초기 로딩 시간이 개선될 수 있습니다. 여러 개의 모듈을 별도의 요청으로 로드하는 대신, 단일 요청으로 모든 코드를 가져올 수 있습니다.
- 네트워크 요청 감소: 번들링은 모듈을 단일 파일로 결합하므로, 필요한 모듈을 다운로드하기 위한 네트워크 요청 수가 줄어듭니다. 이는 대규모 애플리케이션의 경우 특히 유용합니다.
- 코드 최적화: 번들링 과정에서 웹팩은 코드 최적화 기능을 제공합니다. 이는 번들 크기를 줄이고, 불필요한 코드를 제거하거나 압축하여 성능을 향상시킬 수 있습니다.
- 호환성 보장: 번들링을 통해 브라우저 호환성 문제를 해결할 수 있습니다. 일부 오래된 브라우저에서는 ESM 모듈을 지원하지 않거나 부분적으로 지원하는 경우가 있습니다. 웹팩은 이를 고려하여 ESM 모듈을 호환 가능한 형식으로 변환해줍니다.
- 함수 표현식, 선언형 개념, 차이점 → this 뿐만아니라 호이스팅, 스코프 관련해서 차이 말해주면 좋을 듯
chapGPT 답변
ESM 모듈을 번들링한 결과와 번들링하지 않은 원본 ESM 모듈을 브라우저에서 실행하는 경우에는 일반적으로 성능 차이가 크지 않습니다. 이는 번들링 과정에서 코드의 구조가 변경되지 않고, 단순히 모듈 간의 의존성 해결과 파일 결합이 이루어지기 때문입니다.
다만, 웹팩 등의 번들러를 사용하여 ESM 모듈을 번들링하면 몇 가지 이점이 있을 수 있습니다:
번들링의 성능적인 이점은 프로젝트의 규모와 구조에 따라 다를 수 있습니다. 작은 규모의 프로젝트에서는 성능 차이가 미미할 수 있지만, 대규모 애플리케이션에서는 번들링을 통해 성능 향상을 기대할 수 있습니다.
- 명재
- 클래스와 생성자함수의 차이점 → 둘의 차이점에 대해서 공부하면 좋을듯 (extends 키워드와 strict mode, 등의 차이점으로 설명하면 좋을듯)
- super 키워드가 뭔가요? → super 호출과 super 참조의 차이와 super의 개념을 같이 설명하면 좋을듯
- map과 forEach, reduce에 대해 설명해주세요. → 각 메서드에 대한 개념은 정확히 알고 있음
- map, forEach, reduce가 등장한 이유 → 음 정확한 용어가 기억 안나는데 함수형 프로그래밍? 방식을 채택해서 명령형 프로그래밍 방식과 차이점도 같이 말해도 좋을듯
- 브라우저 환경에서도 commonJS 모듈을 사용할 수 있나요? → 나는 node 환경에서만 사용할 수 있다고 알고 있었는데 공부해봐야할듯
- commonJS를 사용하면 되는데 왜 ESM 모듈이 등장했나요? → 나도 같이 공부해야 할듯
- 모듈은 브라우저 환경에서 동작하지 않는다고 했는데 ESM도 브라우저에서 동작하지 않나요? → 음 ESM은 브라우저 환경에서 동작하기 위해서 만들어진 모듈이 아닌가? 나도 이 부분이 많이 부족하네 …
- 클로져(Closure)에 대해 설명해주세요. → 나도 외부 함수와 내부함수를 사용해서 개념을 설명했는데 이렇게 설명하는게 좋은 답변인가? 하는 궁금증이 생김
- 클로저를 사용해본 경험에 대해서 설명해주세요. → useState에 내부적으로 사용한다고 했는데 꼬리 질문으로 useState의 내부 동작도 같이 이해하고 있으면 꼬리 질문을 유도할 수 있다고 생각함
명재 ~2:07 (20분)
면접관 피드백
- 수화
- 예전에 비해 질문듣고 바로 말하지않고, 조금 생각정리하고 답변하려는 거 굿굿
- 실행 컨텍스트 → js 엔진이 동작하는 실체 → 콜스택, 힙 연관
- 콜스택: 호출된 함수가 쌓인다 → 실행컨텍스트 순서 관리?
- lexical enviroment 안에 뭐가 있냐
- 환경 레코드(전역 실행컨텍스트, 함수 실행컨텍스트에 따라 다름), 외부환경 참조값
- 선언전 레코드 환경 ??? → var, let, const 구분 담당?
- 힙: (동적인 메모리가 쌓이는데, 실행컨텍스트에도 변수 기록해두고 참조하는데 무슨 차이인지 궁금하다)
- 실행 컨텍스트 환경 레코드:
- 실행 컨텍스트 환경 레코드는 실행 컨텍스트 내부에 생성되는 메모리 영역입니다.
- 환경 레코드는 변수와 함수 선언을 포함하는 LexicalEnvironment를 나타내는 렉시컬 환경 구성 요소 중 하나입니다.
- 환경 레코드에는 변수, 함수, 매개변수 등과 같은 식별자와 해당 값이 저장됩니다.
- 실행 컨텍스트가 생성될 때마다 새로운 환경 레코드가 생성되며, 함수의 스코프 체인을 형성하고 변수에 접근하는 데 사용됩니다.
- 실행 컨텍스트 환경 레코드는 실행 컨텍스트가 활성화되어 있는 동안에만 존재하고, 해당 컨텍스트가 종료되면 메모리에서 해제됩니다.
- JavaScript 엔진의 힙:
- 힙은 JavaScript 엔진이 동적으로 할당되는 객체와 변수를 저장하는 메모리 영역입니다.
- 힙은 실행 컨텍스트 환경 레코드와는 다른 개념으로, 실행 컨텍스트 외부에 존재하며 동적인 데이터를 저장합니다.
- 힙에는 객체, 배열, 함수 등의 데이터 구조와 해당 데이터에 대한 참조가 저장됩니다.
- 힙은 가비지 컬렉터에 의해 관리되며, 더 이상 사용되지 않는 객체는 자동으로 메모리에서 해제됩니다.
- js 메모리 관리 → 매니지드 언어라는 것, 참조값으로 메모리 할당해제하는 거 잘 말해줬음. 추가적으로 메모리 영역이 뭐가있는지도 말해주면 좋을 듯
js 엔진의 힙에 동적인 메모리가 쌓이는데
실행컨텍스트 환경 레코드에 메모리를 쌓아두는거랑 무슨 차이야?
gpt 답변
실행 컨텍스트 환경 레코드와 JavaScript 엔진의 힙은 서로 다른 용도로 사용되는 메모리 영역입니다. 다음은 두 개념의 주요 차이점을 설명합니다:
따라서 실행 컨텍스트 환경 레코드는 실행 컨텍스트와 관련된 변수와 함수 선언을 저장하는 렉시컬 환경의 구성 요소입니다. 반면에 JavaScript 엔진의 힙은 동적으로 할당되는 데이터를 저장하는 메모리 영역으로, 객체와 변수 등을 관리합니다. 두 영역은 서로 다른 목적과 사용 방법을 가지고 있으며, JavaScript 엔진은 이를 함께 사용하여 코드 실행과 메모리 관리를 제어합니다.
- 천욱
- 실행 컨텍스트랑 콜스택 힙 연관지어서 말씀해주세요
- 맞는 대답인건가..? 힙이랑 연관?? 모르겠음!
- 실행 컨텍스트 생성 과정
- <script>태그를 만났을때 생성된다는걸 언급해주면 좋을것 같다!
- 콜스택, 실행 컨텍스트 스택 → 같은것이구나!
- 클로저란??
- 너무 근본적인것부터 설명하려는게 있어서 돌고돌고돌아아오는 느낌?? 간결하게 설명해달라고 했을때 잘 설명한것 같음!
- blocking, non-blocking
- 나도 몰라서 물어봄!
- 즉시실행함수
- 근본적으로 왜 탄생했는지도 물어보려고 했는데 같이 얘기해줘서 좋았다!
수화 ~3:05 (10분)
면접관 피드백
- 명재
- 실행컨텍스트에 대해서 설명해주세요 → 너무 간결하게 설명함. 굳
- 소스코드가 뭔가요? → 너무 간결하게 설명함. 굳
- 소스코드의 타입이 존재하는 이유가 뭔가요? -> 전역 실행컨텍스와 함수 실행컨텍스의 차이점에 대해서 설명하면 될듯
- 소스코드 평가 - 실행 (평가할 때 소스코드 타입 파악해서 실행컨텍스트 생성할 듯)
- 전역 실행컨텍스와 함수 실행컨텍스의 차이점에 대해서 설명해주세요. → 순서의 차이점, 환경 레코드의 차이점으로 간결하게 답변함 굳(질투나게 질문 답변 잘했누)
- 클래스와 생성자함수의 차이점 → 다양한 차이점에 대해서 잘 설명함 (extends 키워드도 같은 차이점, static 키워드와 같은 부분, 클래스 내부에는 메서드 축약 방식으로 메서드 정의와 같은 부분도 존재함)
- 천욱
- 소스코드 타입…??
- 전역 실.컨과 함수 실.컨 차이점
- 답변 좋았어요! this까지 언급해서 좋았음
- 실행컨텍스트 생성과정에 대해 설명해주세요.
- 맞는 답변인데…. 이걸 좀 어떻게 더 잘 설명하는 방법이 없을까 생각이 듭니당 내가 생각하는 답변이랑 달라서 그런것같기도
- 프로토타입이란?
- 설명이 쪼오끔 아쉬웠다??