JS/Refactoring | 클로저, 콜백

 

 

📌 초기 코드

반복문을 통해서 파일에 대한 정보를 formData로 넣고, 다른 함수 실행을 위해 필요한 변수값을 정의하여 함수 실행에 필요한 데이터를 보낼 생각이였으나, chatFilePattern의 변수값이 고정적으로 들어가면서 생긴 부분에 대해서 수정하고, 수정한 코드에 대한 리뷰를 진행했다.

for (const file of files) {
  chatFilePattern = firstNum + "" + countFileNumber++
  formData.append("files", file);
  formData.append("chatFileNumber", chatFilePattern);
    
  // Base64 이미지 변환
  const reader = new FileReader();
  reader.readAsDataURL(file); 
  reader.onloadend = () => {
    var base64data = reader.result;
    stompSendFlag = 2;
    stompSend(base64data, chatFilePattern);
  }
}

 

📌 변경 코드

for (const file of files) { // 1. for 반복문을 사용하여 files 배열의 각 파일에 대해 반복한다.
  // 2. 각 반복에서 새로운 chatFilePattern 값을 생성하고 이 값을 파일과 폼 데이터에 추가한다.
  let chatFilePattern = firstNum + "" + countFileNumber++;

  formData.append("files", file);
  formData.append("chatFileNumber", chatFilePattern);
  console.log("chatFilePattern22222222 :::: ", chatFilePattern);

  // 3. FileReader 객체를 생성하고, 해당 파일을 readAsDataURL() 메서드를 사용하여 비동기적으로 읽는다.
  const reader = new FileReader();
  reader.readAsDataURL(file);
  // 4. reader.onloadend 이벤트 핸들러를 클로저로 감싸서 정의한다.
  reader.onloadend = ((currentChatFilePattern) => {
    return () => { // 5. reader.onloadend 이벤트가 발생하면 클로저 함수가 실행된다.
      var base64data = reader.result;
      stompSendFlag = 2;
      stompSend(base64data, currentChatFilePattern);
      console.log("chatFilePattern333333333 :::: ", currentChatFilePattern);
    };
  })(chatFilePattern);
}
// for end

 

1. for 반복문을 사용하여 files 배열의 각 파일에 대해 반복한다.
2. 각 반복에서 새로운 chatFilePattern 값을 생성하고 이 값을 파일과 폼 데이터에 추가한다.
3. FileReader 객체를 생성하고, 해당 파일을 readAsDataURL() 메서드를 사용하여 비동기적으로 읽는다.
4. reader.onloadend 이벤트 핸들러를 클로저로 감싸서 정의한다.
   • 클로저는 외부 함수의 변수에 접근할 수 있는 함수이다. currentChatFilePattern 을 사용하여 클로저를 구성한다.
   • currentChatFilePattern 은 반복에서의 chatFilePattern 값을 복사하여 클로저에 보존한다.
   • 클로저 함수는 reader.onloadend 이벤트가 발생할 때마다 실행된다.
5. reader.onloadend 이벤트가 발생하면 클로저 함수가 실행된다.
   • reader.result 를 사용하여 파일의 Base64 데이터를 가져온다.
   • currentChatFilePattern 은 클로저에 의해 보존된 값이므로, 해당 값을 stompSend() 함수에 전달한다. 
   • stompSend() 함수를 호출하여 데이터와 currentChatFilePattern 값을 처리한다.
6. 다음 반복으로 넘어가고, 새로운 chatFilePattern 값을 생성하여 다음 파일에 대해 동일한 과정을 반복한다.

 

 

클로저 함수 정리

 

JavaScript | 클로저 함수