프론트 세미나 2‐4 과제
동기 : 직렬적인 태스크 수행 방식
비동기 : 병렬적인 태스크 수행 방식 -> 서버에 API 요청을 보내거나, 이벤트가 발생할 때 주로 사용
- 콜백함수 사용 : 함수가 다른 함수에 인자로 전달되어 실행이 완료된 후에 호출
- 단점 : 중첩되면 코드 깊이가 깊어짐, 가독성 떨어짐, 유지보수 어려워짐.
- Promise 객체 사용
- Promise의 상태
- Pending(대기) : 비동기 작업이 아직 완료되지 않은 상태
- Fulfilled(이행) : 비동기 작업이 성공적으로 완료된 상태
- Rejected(거부) : 비동기 작업이 실패한 상태
resolve는 비동기 작업이 성공했을 때 호출되며, 전달된 값이.then()으로 전달됩니다.reject는 작업이 실패했을 때 호출되며, 전달된 값이.catch()로 전달됩니다.
- 단점 : Promise 내부에서 발생하는 오류는 즉시 드러나지 않고, catch()에서만 처리되기 때문에 디버깅이 어려울 수 있음.
- async/await
- 단점 : 기본적으로
await는 비동기 작업을 순차적으로 처리하므로, 여러 개의 작업을 병렬로 처리하려면 명시적으로Promise.all()을 사용해야 합니다. 그렇지 않으면 각각의await호출이 끝날 때까지 대기하게 되어 성능이 저하될 수 있습니다.
클라이언트 상태 : 클라이언트(브라우저 또는 애플리케이션) 내부에서 관리되는 데이터
- 사용자의 인터페이스와 관련된 상태
- 클라이언트의 메모리에서 관리
서버 상태 : 애플리케이션의 서버에서 관리되는 데이터 상태
-
서버에 있는 DB나 외부 API에서 가져오는 데이터
-
클라이언트와 서버 간의 네트워크 요청을 통해 주고받음.
-
프론트엔드에게 클라이언트 상태가 중요한 이유 : 클라이언트 상태는 UI/UX 상호작용에 자주 사용되고, 실시간 사용자 피드백을 관리.
-
하지만 서버 상태도 중요함 : 서버 상태는 데이터 페칭과 데이터 일관성을 관리하여 애플리케이션의 핵심 데이터를 다룸.
- 데이터 페칭 : API를 통해 서버에서 데이터를 가져오고 이를 화면에 표시
- 데이터 일관성 : 서버에 저장된 상태를 기준으로 여러 사용자가 동일하게 접근해야 함.
- 네트워크 지연: 클라이언트와 서버 간의 통신은 시간이 걸리기 때문에, 비동기적으로 처리해야 애플리케이션이 중단되지 않고 계속 동작할 수 있음. -> 사용자에게 로딩 상태를 표시할 수 있어 UX(User Experience)가 개선됨.
- 불확실한 응답: 네트워크 에러나 서버 응답 실패 등의 상황에 대비해, 비동기적으로 에러 처리를 해야 함.
- 효율성, 데이터 동기화