Unknown property 'css' found eslint(react/no-unknown-property) eslint에서 preset으로 eslint-config-airbnb를 사용하는 경우 'react/no-unknown-property' 룰이 기본적으로 활성화 되어있다. 해당 룰 참조: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md 기본적으로 css props는 jsx props에 존재하지않는 plugin props 같은 존재이기 때문에 @emotion/react 를 사용하여 jsx element에 css props를 전달하는 경우 eslint rule에 걸리게 된다. ..
👋 개요 Webpack v4로 구성되어있던 기존 프로젝트를 Vite로 Migration을 진행하는 과정에서 해당 에러가 발생하였다. TS2786: 'Example'은(는) JSX 구성 요소로 사용할 수 없습니다. TS2786: 'Example' cannot be used as a JSX component 당시 개발 환경은 다음과 같다. ⚒️ 개발환경 vite 4 typescript 5 react 17 react-dom 17 💻 시도 처음에 react package에서 type을 못가져오는 것 같아서 tsconfig의 paths 값을 만져주었다.(vite.config.ts의 resolve.alias 값도 만져주었다.) 특정 부분에서는 해결되었으나 react와의 의존성이 있는 다른 라이브러리에서 같은 에러가..
👋 개요 약 2년 전, 요구사항에 맞춰 Bar Chart 형태로 된 Slider Component를 제작한 적이 있다. 당시 부족했던 실력으로 만들었던 컴포넌트를 발전한 시점으로 리뷰와 동시에 제작 방법을 공유해보려한다. 해당 컴포넌트는 대표적인 데이터 시각화 라이브러리인 D3를 사용했으며 Range Slider의 기능을 직접 구현하기 보다는 Mui의 Slider Component를 사용했다. 💻 구현 차트 그려주기 먼저 UI에 보여줄 데이터를 D3를 이용해 Bar Chart로 시각화를 먼저 해주겠다. canvas element를 가지는 ref를 사용해도 되지만 handle 영역이과 chart영역을 분리해줄 거라 svg 하위에 g 태그를 두고 해당 element를 가지는 ref를 만들어주겠다. 데이터는 ..
👋 개요 사내 광고소재 Video는 모종의 이유로 .webm 형식으로 되어있다. 문제는 iOS에서는 이 형식의 video를 지원하지 않는다는 것인데, MacOS, Android 등등에서 잘 돌아가던 녀석이 아이폰에서만 돌아가지 않았다. 여러 대안이 있지만(여러래봤자 당장 생각나는 건 두가지 뿐이지만) 다른 파트쪽에 손을 벌리지 않고 FE 자체적으로 이 이슈를 해결해보고싶었다. 그래서 Web Assembly를 이용해 ffmpeg를 브라우저에서 실행해 webm 파일을 mp4 파일로 인코딩 후 view에 띄우려고 한다. 🤔 과정 A to Z로 모든 부분을 구현하기엔 살짝 막막했으나 @ffmpeg/ffmpeg 라는 좋은 라이브러리가 이미 개발 되어있었고 이것을 사용했다. 튜토리얼과 문서를 참고해 아래의 코드를 ..
🩹 증상 Failed to load resource: The operation couldn’t be completed. (WebKitBlobResource error 1.) ⭕️ 원인 첫 프레임을 썸네일로 사용하기 위해 src 주소를 `blob:${url}#t=0.001`처럼 주었고 해당 url로부터 데이터를 가져오지 못함 다른 환경에서는 잘 동작하나 iOS 환경에서는 blob URL과 함께 time Anchor를 사용할 경우 동작하지 않음. 결국 브라우저입장에서는 이상한 URL로 요청하던 것 🤔 문제 및 해결 과정 해당 경로에서 Parameter를 제거해 주었으나 재생 전까지 까만 화면으로 표시되며, Custom Player도 비활성화되어있다. Native Controller나 autoplay를 사용하..
