<목차>
- Async/Await와 Promise
- 무한스크롤
8. Async/Await와 Promise
- 두가지 다 비동기 작업을 처리하는 중요한 개념
- API 호출, 데이터 로딩등 작업에 유용하게 사용
- 사용 방식과 문법적 특징에서 차이
Promise
- 자바스크립트에서 비동기 연산자의 최종완료나 실패를(비동기 연산의 결과) 나타내는 객체
- Pending(대기중) : 아직 결과가 없는 상태
- Fulfilled(이행됨) : 연산이 성공적으로 완료됨
- Rejected(거부됨) : 연산이 실패함
- .then()을 사용하여 성공 핸들러 연결가능
- .catch()를 사용하여 에러 핸들러 연결가능
- .finally()를 사용하여 성공여부와 상관없이 실행될 로직과 연결가능
async/await
- Promise를 더 쉽게 사용할 수 있도록 도와주는 문법적 설탕(??)
- async함수는 항상 Promise반환
- await 키워드는 Promise가 이행되거나 거부될때까지 함수의 실행을 일시 중지하고 Promise의 결과 값 또는 거부 이유를 반환
- 이를 통해 비동기 코드를 동기 코드처럼 쉽게 읽고 쓸 수 있음
- 코드를 더 직관적이고 이해하기 쉽게 만들어줌
** 문법적 설탕 (syntactic sugar) : 프로그래밍 언어에서 사용되는 표현으로 실제 새로운 기능을 추가하기보다 코드를 더 읽기 쉽고 이해하기 쉽게 만들어주는 문법을 뜻함, 실제 식재료 설탕처럼 문법적 설탕은 코드를 더 쓰기 쉽고 읽기 쉽게 만들어준다는 비유의 표현.
차이점
- 문법과 가독성 : async/await는 코드를 동기적으로 보여준다 -> 가독성 향상 / Promise는 .then(),.catch() 메소드를 사용하여 체인을 형성하는 방식 -> 더 복잡
- 오류처리 : async/await는 전통적인 try/catch 구문 사용가능 / promise는 .catch()메소드를 사용하여 에러를 잡아야한다. 체인에서 각 단계의 오류를 관리해야함
- 중첩과 조건부 실행 : async/await는 조건문, 반복문등을 사용하여 비동기 코드를 더 쉽게 작성할 수 있음 / Promise는 코드가 복잡함
Q. async/await와 Promise의 차이에 대해 설명해주세요.
async/await와 Promise 두 가지 모두 비동기 작업에서 사용되는 기술이지만 두 가지 방식은 차이점이 있습니다. 우선 Promise는 자바스크립트에서 비동기 연산의 결과를 나타내는 객체입니다. Pending, Fulfilled, Rejected 세 가지 상태를 가질 수 있고, .then을 이용하여 성공 핸들러를, .catch를 이용하여 에러 핸들러를 연결할 수 있습니다. async/await는 Promise를 쉽게 사용할 수 있도록 도와주는 "문법적 설탕"입니다. async 키워드는 함수를 비동기 함수로 선언하는 데 사용되고 그 함수는 Promise로 반환됩니다. await 키워드는 Promise의 해결을 기다리는 데 사용되고 async 함수 내에서만 사용할 수 있습니다. 두 가지의 차이점은 async/await 코드는 비동기 코드를 동기적으로 보여주기 때문에 Promise보다 가독성이 높고 조건문, 반복문 등 사용이 가능해 비동기 코드를 더 쉽게 작성할 수 있습니다. 그뿐만 아니라 try/catch 구문을 사용할 수 있어 에러를 더 안정적으로 처리할 수 있습니다.
9. 무한스크롤
- 사용자가 웹페이지나 앱의 스크롤 바를 내릴 때 마다 새로운 콘텐츠를 자동으로 로드하는 기능
- 특히 소셜 미디어 플랫폼, 뉴스 피드, 이미지 갤러리 등에서 많이 사용
- 사용자가 페이지를 넘기지 않고도 계속해서 새로운 콘텐츠를 볼 수 있게 제공
많은 데이터를 가지고 무한 스크롤을 구현할 때 가장 중요하게 고려해야할 점
- 효율적인 데이터 로딩 및 관리 : 서버로부터 한번에 모든 데이터를 로드하는 것이 아닌 작은 단위로 나누어 요청, 이미 로드된 데이터는 클라이언트 측에 캐싱하여 같은 데이터에 대한 중복 요청 방지
- 성능 최적화 : 스크롤 시 DOM에 추가되는 요소의 수 제한, 불필요한 DOM 조작 최소화 (리액트의 경우 가상화된 스크롤 기법 사용가능)
- 사용자 경험 : 데이터를 로드하는 동안 사용자에게 로딩 중임을 알려주는 인디케이터나 에니메이션 제공 필요, 데이터의 끝이아닌 더 있다는것을 알려줘야함, 새로고침 또는 뒤로가기를 했을 때 이전 스크롤 위치로 돌아갈 수 있도록 해야함
- 에러 처리 및 예외 관리 : 데이터 로드에 실패했을 때 재시도 할 수 있는 옵션 제공, 적절한 에러메시지 표시 , 네트워크 연결이 끊기거나 느려지느 상황에도 적절히 대응할 수 있는 방안 마련
Q. 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요?
데이터 10,000개를 가지고 무한 스크롤을 구현할 때 몇 가지 중요하게 고려해야 할 점들이 있습니다. 무한 스크롤은 서버로부터 한 번에 모든 데이터를 로드하지 않고 작은 단위로 나누어 요청하기 때문에 이미 로드된 데이터를 클라이언트 측에 캐싱하여 같은 데이터에 대한 중복 요청을 방지하는 과정이 필요합니다. 그리고 스크롤 시 DOM에 추가되는 요소의 수를 제한하여 불필요한 DOM 조작을 최소화해야 합니다. 뿐만 아니라 무한 스크롤은 페이지가 없고 계속해서 새로운 콘텐츠를 자동으로 로드하기 때문에 끝을 알 수 없습니다. 사용자 경험을 위하여 데이터를 로드하는 동안 사용자에게 로딩 중임을 알려주는 인디케이터나 애니메이션이 필요합니다. 또한 새로고침 또는 뒤로 가기를 했을 때 이전 스크롤 위치로 돌아갈 수 있도록 해야 합니다. 데이터 로드에 실패하거나 네트워크 연결이 불안정한 경우 등 오류, 예외 상황을 위해 재시도 옵션을 제공해야 합니다.
