웹 워커를 사용하는 환경에 놓여 이에 대하여 알아보았습니다. 사용방법에 초점을 맞춰 정리했습니다. 😊 자바스크립트는 싱글 스레드입니다. 데이터 처리 시간이 길게 소요되는 작업이 실행되면 해당 연산이 마무리되기 전까지 다른 이벤트를 실행하면 동작하지 않습니다. 이때 유저 입장에서는 불편함을 느낄 수 있는데 WebWorker를 이용해 백그라운드 스레드로 해당 이슈를 개선할 수 있습니다. 또한 웹 워커에서는 DOM 컨트롤을 직접적으로 할 수 없기 때문에 결과를 전달받아 사용해야 합니다. 다른 예제들에 해당 기능을 지원하는지 확인하는 코드가 있어 확인해봤는데 잘 지원되는 것 같다. 개발 중인 서비스의 지원 브라우저를 확인하고 작업하면 좋을 듯합니다! 사용 환경 1. React 17.0.2 2. vite 2.72..

업무 중에 해결하기 위해 골머리를 앓았던 일을 회고하고자 합니다. 먼저 어떤 이슈였냐면 모바일기기에서 PC URL 접속 시 모바일 URL로 보내주고 있는데, 삼성 브라우저에서 모바일 URL로 리다이렉팅 되었을 때 뷰포트가 깨지는 현상이 있었습니다. 문제 해결과정 1. 삼성 브라우저 조사 삼성 브라우저에서만 발생했기 때문에 별도의 설정이 필요한지 찾아보았습니다. 이 과정에서 찾은 결과는 삼성 브라우저와 크롬 브라우저는 개발자가 설정한 확대 방지 옵션을 무시할 수 있는 기능이 있는데 삼성에서는 기본값으로 설정되어있고 크롬에서는 선택 값으로 설정이 되어 있었습니다. 삼성 브라우저에서도 해당 옵션을 끄면 이슈가 재현되지 않았지만 코드로 브라우저의 해당 기능을 끄거나 할 수 있는 방법을 찾지 못했고 작성 된 코드..

next + firebase 조합으로 채팅창을 작업하던중에 , 새로운 메세지를 입력할 때 마다 가장 아래로 스크롤을 보내는 기능이 필요했다. useRef를 이용해 DOM에 접근해서 scrollIntoView()를 이용해 입력때 마다 아래로 이동하게 하려고 했는데.. 아무리해도 작동을 하지 않았다. 처음 내가 작성했던 코드는 아래와 같다. (스타일,구조 완성된 코드아님 주의) { messageList?.docs.map((e, i) => { const data = e.data() const date = data.createdAt?.seconds ? formatDate(new Date(data?.createdAt.seconds * 1000)) : null return ( {data.userName} {date..

Do not pass children as props. Instead, nest children between the opening and closing tags react/no-children-prop 옛날 코드를 가지고 오던중에 해당 에러를 만났다. 기존 코드는 위와같이 Children props를 태그안에 보내는 형식이였는데 self closing 형태로 되어 있었다. 이 부분이 문제가 되었고 해당 코드를 end tag 형태로 수정하여 에러를 잡았다.