JavaScript forEach 루프 내에서 async/await 사용 시 순서 제어 불가 문제

배열의 각 요소에 대해 비동기 API 호출을 순차적으로 진행하여 결과값을 출력하려 합니다.

코드:

const data = [1, 2, 3];

async function fetchData(id) {
  return new Promise(resolve => {
    setTimeout(() => resolve(`Data ${id}`), 100);
  });
}

async function process() {
  data.forEach(async (id) => {
    const result = await fetchData(id);
    console.log(result);
  });
  console.log('Done');
}

process();

오류: 출력 결과가 예상과 다르게 나옵니다.

예상 출력: Data 1 -> Data 2 -> Data 3 -> Done

실제 출력: Done -> Data 1 -> Data 2 -> Data 3

시도: forEach 콜백 함수 앞에 async 키워드를 추가하고 내부에서 await를 사용함.

질문: forEach 내부의 await가 작동하지 않고 'Done'이 먼저 출력되는 이유와 이를 순차적으로 실행하게 만드는 방법은 무엇입니까?