Vue - action 배열 처리

이 코드는 특정 key부터 시작해서 steps 배열을 순차적으로 실행하는 코드입니다.

코드 해석

const startIndex = _.findIndex(steps, {key: idx})
for (let i=startIndex; i<steps.length; i++){
  await steps[i].action()
}

1단계: _.findIndex(steps, {key: idx})

• Lodash의 findIndex 함수
• steps 배열에서 key가 idx와 일치하는 첫 번째 요소의 인덱스를 찾음

const idx = '010'
const steps = [
  {key: '010', action: ...},  // 인덱스 0
  {key: '020', action: ...}   // 인덱스 1
]

const startIndex = _.findIndex(steps, {key: '010'})  
// startIndex = 0

2단계: 반복문으로 순차 실행

• startIndex부터 배열 끝까지 순회
• 각 step의 action() 함수를 순차적으로 실행

실행 흐름 예시

const idx = '020'  // 두 번째부터 시작하고 싶음

const steps = [
  {key: '010', action: async () => { await this.progress1() }},  // 인덱스 0
  {key: '020', action: async () => { await this.progress2() }},  // 인덱스 1
  {key: '030', action: async () => { await this.progress3() }}   // 인덱스 2
]

const startIndex = _.findIndex(steps, {key: '020'})  // startIndex = 1

// 반복문 실행
// i=1: await steps[1].action()  → progress2() 실행
// i=2: await steps[2].action()  → progress3() 실행
// progress1()은 건너뜀!

전체 흐름 정리

const idx = '010'

// 1. '010'이 몇 번째 인덱스인지 찾기
const startIndex = _.findIndex(steps, {key: '010'})  // 0

// 2. 0번부터 끝까지 순차 실행
for (let i=0; i<steps.length; i++){
  await steps[i].action()
  // i=0: progress1() 실행 → 완료 대기
  // i=1: progress2() 실행 → 완료 대기
  // ...
}

용도

이 패턴은 보통 진행 상황을 이어서 실행할 때 사용합니다:

• 처음부터: idx = '010' → 모든 단계 실행
• 중간부터: idx = '020' → 두 번째 단계부터 실행
• 특정 단계 스킵하고 나머지만 실행

핵심: idx 값에 해당하는 단계부터 끝까지 모든 action을 순서대로 실행합니다!