자바스크립트 & 리액트 & FE 면접 질문

💡 JS

Promise와 Callback 차이를 설명해주세요

동기식 코드와 비동기식 코드를 같이 사용하면 실행 순서를 보장할 수 없게 되고, 결국 원했던 결과와 다른 동작을 하게 됩니다. 이럴 때 콜백과 프로미스를 사용하면 비동기 처리의 실행 순서를 보장해줄 수 있습니다.

 

콜백 함수는 다른 함수의 인자로 사용되는 함수로, 비동기 처리가 끝난 후 데이터가 넘어오면 callback 함수에게 데이터를 넘겨 이전 작업이 완료됐음을 알리고, 그때 작업을 시작하는 방식으로 순서를 보장합니다. 하지만 순서대로 처리해야 할 작업이 많아질수록 콜백지옥으로 불리는 상황이 일어나게 됩니다. 이러한 콜백지옥은 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다.

또한 비동기 로직의 결과값을 처리하기 위해선 callback 안에서만 처리해야하고 callback 밖에선 비동기 결과값을 알지 못합니다.

 

반면 프로미스는 객체로 구현되기 때문에 좀 더 유연한 비동기처리를 가능하게 해줍니다. 프로미스 객체가 생성되면 콜백으로 resolve와 reject를 인자로 받는데 이 함수를 통해서 비동기 처리의 성공과 실패의 상태와 결과값을 받을 수 있습니다. 때문에 프로미스를 사용하면 비동기 작업의 상태와 결과를 더 명확하게 관리할 수 있습니다.

 

https://hanamon.kr/javascript-%EC%BD%9C%EB%B0%B1-%EC%A7%80%EC%98%A5-%ED%83%88%EC%B6%9C%ED%95%98%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95/

 

+) 콜백과 프로미스에 더 알아보기!!

 

💡React

React를 사용하는 이유에 대해 말씀해주세요

리액트를 선택하는 주요 이유 중 하나는 컴포넌트 기반 아키텍처입니다. 리액트는 UI를 작은 컴포넌트로 분할하여 개발 및 유지 보수를 용이하게 합니다. 

 

또한, 리액트는 가상 DOM(Virtual DOM)을 활용하여 웹 페이지의 성능을 향상시킵니다. 가상 DOM은 실제 DOM 요소를 직접 조작하지 않고 메모리에 가상의 DOM을 생성하여 변경 사항을 비교하고 최소한의 DOM 조작만 수행합니다. 때문에 렌더링에 필요한 자원을 줄일 수 있습니다.

 

또한, 리액트는 커뮤니티와 생태계가 풍부하며, 다양한 오픈 소스 라이브러리, 도구 및 패키지를 지원하고 있습니다. 이는 개발자들이 다른 개발자의 지식과 리소스에 쉽게 액세스하고 더 빠르게 개발을 진행할 수 있도록 도와줍니다.

 

💡 Frontend

Webpack, Babel, Polyfill에 대해 설명해주세요

• Webpack: 여러개의 파일을 하나의 파일로 번들링하는데 사용됩니다.
• Babel: 최신 JS 문법을 구형 브라우저에서도 작동할 수 있도록 이전 JS문법으로 변환하는 역할을 합니다.
• Polyfill: 구형 브라우저에서 기본적으로 지원하지 않는 최신 기능을 제공하는 데 필요한 코드를 지원하는 역할을 합니다.

Babel과 Polyfill의 차이점은 바벨은 ES6 문법을 ES5로 바꿔주는 것이고, Polyfill은 브라우저가 이해할 수 없는 코드를 이해 가능한 코드를 제공하는 것입니다.