오랜만에 쓰는 포스팅

포스팅이 많이 늦었다.
4월 초에 많은 일이 있었다.

가족 중 한분이 먼 여행을 떠나시고, 그 뒷정리 및 처리할 게 있어서 잠시 모든 일정을 내려놨다.
짐을 정리하면서 보니 인생이 참 덧없게 느껴지기도 했다.

사설은 네이버 블로그에서 하고…
산 사람은 인생의 일이 남아 있기 때문에 다시 내 일정으로 복귀했다.

흑우집합소 내에 게시판 기능을 개발하고 있었다.
코드 리팩토링도 해야 하지만, 공지사항이나 패치노트 같은 것을 사이트 내부에서 올리는 것이 아닌,
외부에서 올리는게 좀 그랬다.

그리고 커뮤니티로 승격하기 위해서는 에디터 기능도 필요했기에…
이 부분은 향후 포스팅으로 남길 예정이다.

크롬에서 파일 인풋 클릭이 안되는 문제

React-Quill에서 에디터 내 이미지 파일 첨부 기능을 개발하고 있었다.
사실 그냥 하는건 몹시 쉬운데, 이걸 실제 서비스에 적용하는 부분은 약간 까다로웠다.

이거로 에디터 기능을 구현한 분은 알겠지만,
이미지 핸들러를 만들고 그 안에서 input 태그를 만들어서 적용해줘야 한다.
이 부분은 향후 포스팅에서 자세히 다루기로 하고…

export const QuillImageHandler = (params: QuillImageHandlerProps) => {
  return () => {
    const input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('accept', 'image/*')
    input.setAttribute('multiple', 'multiple')
    input.click()

    //파일 첨부가 일어날 때 이벤트
    input.addEventListener('change', async () => {})
  }
}

위 코드처럼 작성을 해줬다.
근데 신기한게 사파리 브라우저에서는 정말 잘 동작한다.

근데 크롬 브라우저에서는 동작하지 않는다.
저 input 태그에 이벤트가 가지 않는다고 해야 하나?

콘솔로 찍어도 동작하지 않고, 강제로 이벤트를 줘도 반응이 없었다.
이걸로 한 30분? 왜 그런지 GPT한테도 물어보고 하다가 얘도 이상한 이야기를 해서 직접 찾아봤다.

그래서 찾아본 결과…
Stackoverflow에서 답을 찾을 수 있었다.

위 내용을 요약하면…

재부팅하면 된다.

이 자리를 빌어 stackoverflow의 Luke님께 감사를…