React
-
[next.js] window 객체가 undefined일 때React 2022. 10. 26. 01:56
동생의 포트폴리오 홈페이지를 next.js를 써서 간단하게 만들어주고 있다. 작품 사진이 있는 /works 페이지에서 작품 이미지들을 드래그 & 드랍할 수 있도록 구현하고 있는데, 모바일을 고려하면 터치도 지원해야할 것 같아서 터치도 지원하도록 구현하고 있다. 그런데 이제 라이브러리 없이! 구현할 때까지만해도 큰 문제가 없었는데 배포하고 보니 모바일 화면에서 터치가 구현이 제대로 안되었다. window.innerWidth를 사용해서 이 이상으로는 이미지가 움직이지 못하도록 제한을 걸어놓았는데, SSR의 특성상 서버에서 HTML을 다 만들어서 주기 때문에 이 시점에는 window 객체가 없어 undefined가 뜨는 것이었다. SSR의 특성까지 생각해보면 자연스러운 현상인데! 검색해보니 다양한 방법들이 나..
-
[eCharts, React] 범례(legends) 클릭에 따라 eCharts 조작하기React 2022. 10. 15. 02:29
eCharts의 legendselectedchange event 를 활용하는 방법 interface iParams { name: string selected: Record type: string } const chartDom = document.getElementById('trend-multi-naver-chart') as HTMLElement const myChart = echarts.init(chartDom) myChart.on('legendselectchanged', (params: iParams) => { //'legendselectchanged' 이벤트가 발생했을 때 실행된다. changeSelectGraph(params) }) function changeSelectGraph(params: iP..
-
font displayReact 2022. 3. 9. 10:18
이건 next파다가 나온 이슈라서 얘를 react에 작성하는게 좀 거시기하지만.. better than nothing, right? 현재 진행하고 있는 next project에서는 정말 여러가지의 폰트를 필요로하는데, 이 모든걸 otf로 넣자니;;;; 이건 오바. 그래서 찾을 수 있는한(그리고 타협할 수 있는 최대치로) web font로의 교체를 진행했는데, 사내 테스트 결과 랜더링 속도가 이슈가 되었다. 따라서 프로젝트를 더 가볍게 깎아내려 이미지 폰트 쪽 손보기 + pwa 적용, 프리캐싱 등등 을 진행 중인데 여기서 웹폰트를 사용했을 때의 문제인 "폰트 안적용된채로 날 것의 내용이 보이다가 폰트 받은 후 적용내용으로 갑자기 바뀌기" 부분을 잘 설명해놓은 글을 찾았다. 텍스트를 랜더링하기 전에 브라우저..
-
Recoil) Recoil의 기본, atom과 selectorReact 2022. 2. 8. 23:13
갑자기 recoil이 핫해졌다. 상태관리툴로 redux만 꾸준하게 써오고 있었는데, 새로운 상태관리툴이라니! 하지만 1. 생각보다 새롭지 않았고 2. 생각보다 어렵지 않았다. 따라서 스터디에서 발표한 자료를 기록해둔다! Recoil이 왜 좋은가? 다른 상태관리 솔루션의 단점 redux에서 비동기 데이터 처리를 위해서는 다른 라이브러리를 추가로 사용해야한다(ex. redux-thunk) 네이티브 솔루션 (context API) 은 데이터의 일부만 구독할 수 없으며, 복잡하고 반복되는 동적인 값에는 쓰기 애매하다. 모든 것이 하나의 context에 들어있기 때문에 한 번 값이 바뀌면 상관없는 것들도 모두 리렌더링된다. (memoize를 매번 쓰기엔..) Recoil은 실제로 컴포넌트에서 사용하는 데이터의 일..