[짧포] 기술면접준비(Async/Await와 Promise의 차이, 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점)

안녕하세요!
오늘도 짧포 시간입니다

면접에 대표적인 질문 두가지를 가지고왔습니다

그럼 같이 가보시죠

Async/Await와 Promise의 차이에 대해 설명해주세요.

답변

먼저 Async/Await는 ES8에서 도입한 비동기 처리를 위한 문법입니다
함수내에서 await 사용시 awaite 키워드를 통해 비동기 작업이 끝날 때까지 함수의 실행을 일시적으로 멈추고
간결하고 가독성 높은 코드 사용시 async/await 를 사용하면 비동기 코드를 동기적으로 작성할 수 있으므로 코드의 가독성이 높아집니다 그리고 에러처리는 try/catch 블록을 사용해서 에러를 처리합니다
내부적으로 Promise를 반환합니다,

비동기 작업 처리는 .then(), .catch() 를 사용합니다 비동기 작업의 완료 후 성공과 실패 상태를 반환합니다

데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요?

답변

1. 성능: 많은 데이터를 한 번에 렌더링하지 않고 화면에 보이는 일부만 처리하여 성능을 유지합니다
2. 가상화: 화면에 보이는 아이템만 렌더링하는 가상화 기술을 사용하여 성능을 최적화합니다
3. 데이터 로딩: 초기 로딩 시 일부 아이템만 로드하고 스크롤 시 추가 데이터를 비동기적으로 로드합니다
4. 스크롤 이벤트: 스크롤 이벤트를 관리하여 빈번한 호출을 방지하고 데이터 로드를 최적화합니다
5. 네트워크 요청: 효율적인 데이터 요청과 응답 처리로 네트워크 속도를 개선합니다
6. 로딩상태: 로딩 중임을 시각적으로 보여주는 페이지를 보여줍니다
7. 에러 핸들링: 데이터 요청 오류 시 사용자에게 알림을 제공합니다
8. 사용자 경험: 자연스럽고 부드러운 UX를 제공합니다
9. 메모리 관리: 사용하지 않은 데이터 메모리를 해제하여 누수를 방지합니다
10. 브라우저 호환성: 다양한 브라우저에서 테스트 및 호환성을 유지합니다