multer 사용시에 [Violation] handler took 발생 현상 원인 및 조치 자바스크립트 1.

안녕하세요 여러분.

크리에이트메이커 입니다.

 

오늘은 html 자바스크립트를 이용하면서,

서버에 이미지 업로드에 필요한 모듈인 multer에 대해 이야기 해보겠습니다.

 

먼저 multer은 흔히 이미지를 서버에 업로드 할때,

많이 사용되는 nodejs의 모듈중 하나 입니다.

 

보통, 어떠한 가입시에 서류(파일) 첨부가 필요할 경우,

파일들을 첨부하고 가입 완료를 누를때,

var storage2 = multer.diskStorage({

  //경로 설정
  destination: function (req, file, cb) {

    fs.readdir("./public/companyimages/" + req.body.companynum + "/" + req.body.submanagerid, (error) => {
      if (error) {
        fs.mkdirSync("./public/companyimages/" + req.body.companynum + "/" + req.body.submanagerid);
        cb(null, "./public/companyimages/" + req.body.companynum + "/" + req.body.submanagerid);
      } else {
        cb(null, "./public/companyimages/" + req.body.companynum + "/" + req.body.submanagerid);
      }
    });


  },

  //실제 저장되는 파일명 설정
  filename: function (req, file, cb) {
    let visafilevalue = (req.body.visafilevalue).split(',');
    let profilevalue = (req.body.profilevalue).split(',');

    if (file.fieldname == 'visafilesrc') {
      for (let i = 0; i < visafilevalue.length - 1; i++) {
        if (visafilevalue[i] != '') {
          let findoriginalname = (visafilevalue[i]).split("\\")
          let originalname = findoriginalname[findoriginalname.length - 1];
          if (originalname == file.originalname) {
            cb(null, 'visafile' + (i + 1) + '.pdf');
          }
        }
      }
    }

    if (file.fieldname == 'profilesrc') {
      for (let i = 0; i < profilevalue.length - 1; i++) {
        if (profilevalue[i] != '') {

          let findoriginalname = (profilevalue[i]).split("\\")
          let originalname = findoriginalname[findoriginalname.length - 1];

          if (originalname == file.originalname) {
            cb(null, 'profile' + (i + 1) + '.pdf');
          }
        }
      }
    }




  }
});

화면 이동이 필요한 상황이 있죠.

 

마지막에,

location.href = 어쩌구

 

이런식으로 끝낼때,

 

async function으로 파일, 이미지를 서버에 저장해야

할 때가 있을겁니다.

 

이때, 해당 파일 저장시간 동안 페이지에 머물러야

파일이 완벽히 저장이 되고

그 전에 페이지가 이동이 되면 중간에 파일이 짤리게 됩니다.

 

그러한 작업의 증거 로그가

[Violation] 'click' handler took 1157ms 이런식으로

console에 나오는 표시 입니다.

 

저게,어떤것을 의미하냐면,

 

저 'click' 이벤트에서 1157ms가 멈췄다 .

혹은 작업을 하는데 필요하다. 뭐 이런 의미 입니다.

 

만약 ansync function에서,

서버에 무언가 용량이 큰 파일을 전송할때,

마지막에 

location.href 가 동작을 안하다거나,

 

페이지 이동이 됐는데 나중에 보니까 

파일이 짤려 저장 됬거나 했다면,

 

저 경고의 [Violation] 'click' handler took 1157ms 시간을

충동하지 못하거나,

그 다음 동작이 해당 동작에 의해 씹힌 경우 입니다.

 

이럴때 필요한것이 로딩입니다.

가끔 어떤한 페이지 보시면,

가입완료나 이런 버튼 눌렀을때,

로딩 모양이 나오거나

뜸들이는 경우는 대부분 저렇게 파일이

저장되는 시간을 확보하기 위함이라고 보시면 됩니다.

 

그에 대한 자연스럽게 저장도 잘 되고,

페이지 이동도 잘되는 방법은 

2편에서,

로딩 구현하기로 포스팅 하겠습니다 !