리액트 25 [리액트] Devtool로 확인하고 성능개선하기 들어가며 안녕하세요. 핸디입니다. 최근에 모바일 버전에 대응하여 반응형 레이아웃과 컴포넌트로 변경했습니다. 다만 데스크톱에서 원활하게 돌아가던 서비스가 구형단말기에서는 랜더링 중에 멈추는 현상이 발견되었습니다. 그래서 이번에는 간단한 성능테스트하는 방법, 리펙토링 하는 방법, 그리고 최종결과에 대해 살펴보도록 하겠습니다. 결과부터 말씀드리면 성능향상의 기준이 각자 다르지만 유휴시간 기준으로 16배, 스크립팅시간으론 4배 빨라졌어요. 성능테스트하는 방법 일단 데스크탑 기준으로 성능을 측정해 보겠습니다. 우리의 영원한 친구 크롬 개발자 도구와 리액트 개발자 도구로 측정해보겠습니다. 크롬 개발자 도구 일단 보시면 Idle 시간이 10초 중에 0.5초밖에 없습니다. 바쁘게 열일하고 있었군요.. 리액트 개발자 도.. 2023. 2. 8. [자바스크립트] IndexedDB 실전 사용법 (idb) 들어가며 예전에 localstorage 관련 글 마지막에 localstorage 보다는 indexedDB 사용을 권고한다는 글로 끝맺음했었습니다. 시간이 흘러 이번 프로젝트에서 IndexedDB를 이용해 네트워크 리소스를 최적화한 경험이 있어 공유드립니다. 개발 환경은 Next, React를 사용했지만 바닐라 자바스크립트 기반으로도 동작하는 코드이니 살펴보시면 좋겠습니다. 대상 독자 프론트엔드 개발을 하다가 localstorage, sessionstorage를 넘어 indexedDB도 써보려는 개발자 같은 파일을 여러 번 요청하는 게 안타까운 최적화에 특화된 개발자 [Next] localstorage를 사용하는 방법 #1 localStorage 란? 웹 스토리지 객체(web storage object)의.. 2022. 9. 30. [리액트] snackbar에 대해서 (react-toastify, react-hot-toast, notistack) 들어가며 개발을 진행하다가 웹소켓을 통해 들어온 알람을 유저에게 전달해야 하는 경우가 생겼습니다. 이때 주로 사용하는 방법이 snackbar를 통해 오른쪽 하단 또는 중앙 상단에 텍스트 창을 띄우는 것입니다. 이번 글에서는 snackbar에 기본부터, 이를 구현한 라이브러리 3종(notistack, react-hot-toast, react-toastify)의 사용법과 비교해보도록 하겠습니다. 그리고 더 나아가 실제 프로젝트에 어떤 식으로 사용하면 좋을까 개인적인 사용방법에 대해 언급하며 마무리하겠습니다. Snackbar snackbar(이하 스낵바)의 정의는 여러가지입니다만, 구글의 디자인 철학에 의하면 아래와 같습니다. Snackbars provide brief messages about app pro.. 2022. 9. 15. [UX/UI] 유저 행동 데이터를 티끌모아태산으로 (hotjar, google analytics) 들어가며 바야흐로 빅데이터의 시대에 살고 있는 우리들은 유저님들의 행동 하나하나에 의미를 담아 판단하고 또 개발해야합니다. 그런데 쉬우면서도 어려운 것이 바로 리뷰를 받는 것입니다. 배달앱에서는 서비스를 줘 가면서 리뷰전쟁을 하고 있는데, 우리는 서비스 음식을 주는대신 우리의 서비스(프로덕트)가 가치있음을 내세우고 리뷰를 받기를 원합니다. 그러니 더더욱 힘들고 안해줍니다. 오늘 소개해드린 hotjar는 이러한 어려움을 조금 쉽게 해결하고자 하는 툴이며, 간단하지만 강력하고 직관적은 기능을 제공하고 있습니다. 우리에게 익숙하게 알려진 유저 행동 추적 도구는 Google Analytics(이하 GA)입니다. 홈페이지 head에 코드만 넣어두면 알아서 정보를 뽑아다가 깔끔하게 시각화를 해줍니다. 이와 비슷하.. 2022. 7. 12. 이전 1 2 3 4 5 ··· 7 다음
