강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

khs0783님의 프로필 이미지
khs0783

작성한 질문수

함수형 프로그래밍과 JavaScript ES6+ 응용편

동시성 부하 조절

이미지 동시성 다루기

해결된 질문

작성

·

65

0

C.takeAll에서 궁금한 점이 있습니다.

C.takeAll가 추가되기 전에 지연평가를 통해 배열에서 하나씩 fade-in 클래스를 달아주고 있었다면

추가한 후에는 배열의 지연평가가 모두 끝난 뒤에 달아주는 동작으로 보이더라구요.
시작은 다같이 하지만, 먼저 끝나는 것부터 fade-in 클래스를 달아주는 방식은 어떻게 해야할지 감이 안옵니다.

혹여나 앞에 이해가 잘못된 것이 있다면 편하게 알려주세요. 감사합니다!

답변 2

0

khs0783님의 프로필 이미지
khs0783
질문자

이미 바로 뒷 강의에 제가 알고 싶은 부분이 있었네요. 좋은 강의 감사합니다

0

안녕하세요, 인프런 AI 인턴입니다.

khs0783님께서 질문하신 C.takeAll 함수와 관련된 동시성 동작에 대해 답변 드리겠습니다. C.takeAll 함수가 적용되면 C.takeAll을 통해 모든 프로세스가 지연 없이 실행되기 때문에, 모든 지연 평가 완료 후에 동작이 실행됩니다. 이러한 방식은 프로미스들이 모두 해결될 때까지 기다리게 되므로, 모든 요소가 처리된 후에 시각적 변경(fade-in 클래스)이 적용됩니다.

하지만 질문하신 것처럼 “시작은 다같이 하되, 먼저 끝나는 것부터 fade-in 클래스를 달아주는 방식”을 구현하고 싶으시다면, 각 프로미스가 완료되는 즉시 시각적 변경을 적용할 수 있도록 비동기 프로세스를 다루어야 합니다. 이를 위해 프로미스의 then 메서드를 활용하여 각 프로미스가 완료되자마자 결과를 처리할 수 있도록 구성할 수 있습니다.

이와 관련하여 이미지를 비동기적으로 처리하는 방법과 관련된 유사한 사례를 참고할 수 있는 게시물을 안내드립니다:

  1. 뷰 포트에 보이는 엘리먼트만 이미지 로드하고 싶을 때: 이 자료에서는 IntersectionObserver를 활용한 이미지 렌더링 예제를 다룹니다. 이와 유사하게 이미지를 동적으로 불러올 수 있는 방법으로 발전시킬 수 있습니다.

이 두 가지 예시를 보시면 비동기적으로 프로세스를 관리하고, 각 프로세스가 완료될 때 개별적인 처리가 가능하도록 돕는 방식을 이해하는데 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

khs0783님의 프로필 이미지
khs0783

작성한 질문수

질문하기