프론트 엔드 기술면접 정리 2

⭐️Javascript

 

📌callback과 promise의 차이점에 대해 설명해 주세요

• 둘 다 자바스크립드에서 비동기 처리를 위해서 사용되는 방법입니다
• Callback 어떤 작업을 다른 객체에게 시켜둔 다음 그 작업이 끝나는 것을 기다리지 않고 부를 때 까지 다른 일을 하는 것을 말합니다 함수의 처리 순서를 보장하기 위해서 함수를 중첩하여 사용되는 경우가 발생하는데 이때 콜백헬 발생하며 에러 처리가 힘들다라는 단점이 있습니다
• Promise는 콜백의 단점을 보완하기 위해 등장한 개념으로 비동기 처리 시점을 명확하게 표현할수 있습니다
• Promise는 3가지 상태중 하나를 가지는데 기본적으로 pending 상태이후 비동기 처리에 따라 resolve,reject 함수를 호출하고 처리에 성공하면  fulfilled 상태로 실패하면  rejected 상태로 변경됩니다
• Promise는 비동기 작업의 성공과 실패를 명확하게 처리할 수 있으므로 콜백 지옥 문제를 해결할 수 있습니다.

🧩꼬리질문

async / await과 promise차이

• async / await은 비동기 코드를 더욱 쉽게 작성할수 있도록 추가된 기능입니다
• 항상 Promise를 반환하며 await 키워드를 사용하여  Promise가 처리 될때까지 함수 실행을 일시 중지 할수 있습니다
• Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야합니다
• Promise의 then() 메서드 체인의 복잡해지면 가독성이 떨어지므로, async/await를 사용하여 가독성을 높이는 것이 좋습니다.

 

📌이벤트 버블링과 캡쳐링에 대해 설명해주세요

• 이벤트 버블링이란 한요소에 이벤트가 발생하면 이요소에 할당된 핸들러가 동작하고 이어서 부모요소의 핸들러가 동작하여 최상단의 부모 요소를 만날때 까지 반복되면서 핸들러가 동작하는 현상을 말합니다
• 이벤트 캡처링은 한요소에 이벤트가 발생되면 그요소의 자손 요소의 이벤트도 같이 발생되는 것을 말합니다

🧩꼬리질문

버블링 &캡처링 문제점

• 전파경로가 길어져서 이벤트 핸들러가 여러번 호출될 수있어 전파경로가 복잡해지고 성능 저하가 발생할수 있습니다
• 버블링&캡처링 과정에서 이벤트 핸들러가 예기치 않게 다른 요소에서 호출될수 있습니다
• 같은 이벤트에 대해 여러 요소에서 핸들러를 등록 할수 있어 이벤트 핸들러가 중복으로 실행될수 있습니다
  =>이러한 문제점은 이벤트 전파를 중단하는 방식인 stopPropagation() 메서드를 호출하거나 이벤트 헨들러에서 return false를 반환 하는 방법이 있습니다

 

📌Closure에 대해 설명해주세요

• 함수가 선언될 당시에 주변 환경과 함께 갇히는 것을 말합니다
• 함수가 속한 렉시컬 스코프를 기억하며 함수가  렉시컬 스코프 밖에서 실행될 때도 이스코프에 접근 할수 있게 해주는 기능입니다
• 렉시컬 스코프란 스코프를 기억하여 함수가 선언이 되는 위치에 따라 상위스코프가 결정되는 스코프입니다
• 내부 함수가 외부 함수의 변수에 접근할 수있지만 외부함수는 내부 함수의 정의한 변수를 사용할수 없습니다
• 내부함수가 외부 함수에서 정의한 변수를 참조하고 있을때 외부함수의 실행이 끝나더라도 해당 변수는 메모리에서 사라지지 않습니다
• 클로저를 사용하면 외부 함수의 변수를 안전하게 보호 할수 있습니다
•  클로저를 활용하여 코드의 가독성과 유지보수성을 높일 수 있으며, 실행속도와 보안적인 측면에서도 매우 중요한 역할을 합니다.

🧩꼬리질문

클로저는 어디에 사용되나요

• 정보를 은닉하는데 사용할수 있습니다 객체의 프로퍼티나 외부에서 직접 접근하지 못하도록 보호 할수 있습니다 객체의 상태를 유지하며 객체지향 프로그래밍의 캡슐화를 구현할수 있습니다
• 콜백함수나 비동기 처리에 활용됩니다 비동기를 직접 처리하는 것은 아니지만 클로저를 활용하여 콜백함수의 상태를 유지하거나 데이터를 공유할수있고 외부에서 접근할수 없기 때문에 안전하게 상태를 유지할수 있습니다
• 함수 메모이제이션 할수 있습니다 함수의 반환값을 저장하는 캐시를 만들어서 함수가 동일한 인자로 호출될 때마다 캐시된 결과를 반환될수 있고 이를통해 함수의 실행속도를 높일수 있습니다

 

📌실행컨텍스트란 (Execution Context) 무엇인가요

• 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념입니다
• 실행 컨텍스트는 스택(Stack)으로 관리되며, 실행 컨텍스트 스택(Execution Context Stack)이라고도 합니다
• 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되어 스택에 쌓이고, 함수의 실행이 종료될 때마다 실행 컨텍스트는 스택에서 제거되고 스택에 쌓인 실행 컨텍스트를 순차적으로 처리하면서, 자바스크립트 코드가 실행됩니다
• 실행 컨텍스트는 변수 환경,어휘 환경,this 바인딩 3가지 요소로 구성됩니다
• 변수환경은 실행중인 컨텍스트 내에서 선언되 변수와 함수 선언문등의 정보를 담고 있는 객체입니다
• 어휘환경은  변수 환경과 달리 let,const,class,import 등과 관련된 정보를 갖고 있습니다
• this 바인딩은 함수 호출시 디스가 참조할 객체를 저장하는 객체입니다

 

 

📌자바스크립트가 유동적인 언어인 이유는 무엇인가요

• 인터프린터 언어로 컴파일 언어와 달리 실행 환경에 맞게 코트를 컴파일 하므로 코드를 수정하고 즉시 반영 할 수 있습니다
• 동적으로 타입을 지정합니다 변수를 선언할 때 타입을 명시하지 않고 변수에 할당되는 값에 따라서 타입이 결정되므로 런타임 시에 유용하게 사용됩니다
• 함수형 프로그래밍을 지원합니다 상태 변경을 최소화하고 불변성을 유지하려는 개념으로 높은 수준의 재사용성과 모듈화가 가능합니다
• 객체기반 언어입니다 객체는 동적으로 프로퍼티를 추가하거나 삭제 할수있고 객체의 프로퍼티에 함수를 할당하는 것도 가능합니다 이러한 특징으로 인해 자바스크립트는 유연하고 확장성이 높은 언어로 평가됩니다