react 40 [리액트] 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. [Docker] Next 프로젝트 도커 배포 삽질기 들어가며 기존에서는 Amplify 또는 vercel로만 배포, 빌드해서 도메인과 관련된 이슈만 해결하면 별다른 이상 없이 배포를 할 수가 있었습니다. (이게 바로 툴이지!!) 근데 이번에 도커이미지를 직접 생성하여 배포를 해야 하는 상황이라 해당 업무를 진행하면서 삽질했던 간단 경험을 적어보겠습니다. Next Docker 배포 next 프로젝트를 배포하는 가장 쉬운 방법은 vercel를 이용하는 겁니다. 거의 제로 config에 걸맞는 조합을 자랑하고 (실은 같은 회사인) 공식 문서상에서도 vercel을 이용하라고 조언해줍니다. Deployment | Next.js Learn how to deploy your Next.js app to production, either managed or self-hos.. 2022. 8. 28. [UX/UI] 유저 행동 데이터를 티끌모아태산으로 (hotjar, google analytics) 들어가며 바야흐로 빅데이터의 시대에 살고 있는 우리들은 유저님들의 행동 하나하나에 의미를 담아 판단하고 또 개발해야합니다. 그런데 쉬우면서도 어려운 것이 바로 리뷰를 받는 것입니다. 배달앱에서는 서비스를 줘 가면서 리뷰전쟁을 하고 있는데, 우리는 서비스 음식을 주는대신 우리의 서비스(프로덕트)가 가치있음을 내세우고 리뷰를 받기를 원합니다. 그러니 더더욱 힘들고 안해줍니다. 오늘 소개해드린 hotjar는 이러한 어려움을 조금 쉽게 해결하고자 하는 툴이며, 간단하지만 강력하고 직관적은 기능을 제공하고 있습니다. 우리에게 익숙하게 알려진 유저 행동 추적 도구는 Google Analytics(이하 GA)입니다. 홈페이지 head에 코드만 넣어두면 알아서 정보를 뽑아다가 깔끔하게 시각화를 해줍니다. 이와 비슷하.. 2022. 7. 12. [리액트] 검색의 목적은 편리함에 있다 ( 초성 검색, 자동완성) 들어가며 가끔 OTP 서비스를 사용하다 보면 한글 초성으로만 검색하는 기능을 확인할 수 있습니다. 입력이 불편한 리모컨 특성상 사용자에게 편리함을 제공하기 위해 많이 사용합니다. 그래서 이번엔 초성으로도 검색 가능한 검색창 컴포넌트를 만들어보도록 하겠습니다. 기존 컴포넌트 & 로직 컴포넌트 우선 컴포넌트를 하나 보고 오겠습니다. 이건 제가 예전에 사이트 프로젝트하면서 만들었던 컴포넌트인데요. 보시다시피 주식명 또는 코드를 입력하면 찾아주는 컴포넌트입니다. 근데 만약 여기서 삼성전자 대신에 ㅅㅅㅈㅈ를 입력했을때도 삼성전자가 검색된다면 얼마나 좋을까요? 그래서 한번 만들어가보겠습니다. 로직 일단 기존의 로직부터 확인하고 가겠습니다. const matchStock = ( stockList: Holdings[].. 2022. 7. 10. 이전 1 2 3 4 5 6 ··· 10 다음
