프론트엔드 면접 | 동기와 비동기의 차이 및 비동기 필요성, Virtual DOM의 동작 원리와 장점, JSX란 ...

huizhen·2024년 3월 17일
0

프론트엔드 # 면접

목록 보기
3/3
post-thumbnail

동기와 비동기의 차이에 대해 설명해주시고 비동기 프로그래밍의 필요성에 대해 답변해주세요.

동기는 앞선 연산이 완료될 때까지 기다렸다가 다음 연산을 순차적으로 실행하는 프로그래밍 방식으로, 코드의 설계가 직관적이고, 흐름을 이해하기 쉽다는 장점이 있지만, 특정 작업 시간이 오래 걸리면 오래 걸리는대로 완료될 때까지 대기한 후 다음 연산을 진행할 수 있다는 단점이 있습니다.
반대로 비동기는 앞선 연산의 실행완료 여부와 무관하게 다음 연산을 비순차적으로 실행하는 프로그래밍 방식을 의미합니다.
그러므로 비동기 프로그래밍은 소모시간이 훨씬 적고, 빠릅니다. 앞선 연산이 완료될 때 까지 대기하느라 낭비되는 시간이 없기 때문입니다.
특히, 네트워크 요청 등 시간이 오래 걸리는 작업을 처리할 때 효과적입니다.
하지만 비동기 프로그래밍을 진행하다보면 '콜백지옥'이 발생할 수 있는데, 이는 콜백함수들을 중첩하여 사용하다보면 코드의 가독성이 떨어지고 유지보수가 어려워지는 문제점을 의미합니다.
이런 현상을 막기위해 비동기 코드를 동기적으로 작성할 수 있게 해주는 async / await을 적절하게 사용하여 보다 훨씬 효율적인 프로그래밍을 할 수 있습니다.

Virtual DOM이 동작하는 원리와 장점에 대해 설명해주세요.

Virtual DOM은 메모리에 존재하는 가벼운 복사본으로, 실제 DOM과 동기화되는 방식으로 동작합니다.
그러므로 리액트는 Virtual DOM을 직접 제어하고 이용하여 최소한의 변경 사항만을 적용함으로써 성능을 향상시킨다는 장점이 있습니다.
또한 복잡한 UI 업데이트를 간단하게 처리하여 코드를 더 직관적으로 작성할 수 있다는 장점도 있습니다.
이렇게 Virtual DOM은 대규모의 복잡한 웹 애플리케이션에서 유용하게 활용됩니다.

JSX란 무엇이며 왜 사용하는지에 대해 설명해주세요.

JSX란 JavaScript XML의 약어로, 리액트에서 UI를 정의하는 데 사용됩니다.
JSX를 사용하면 HTML과 유사한 문법으로 UI를 작성할 수 있어 가독성이 높아지는 장점이 있습니다.
또한 JavaScript 코드 안에 HTML 코드를 직접 작성할 수 있어 개발자가 UI를 더 직관적으로 이해하고 작성할 수 있다는 장점도 있습니다.
이러한 이유로 JSX는 리액트 애플리케이션 개발에서 사용되고 있습니다.

0개의 댓글

관련 채용 정보