개발/리액트 29 [React] 우리서비스를 더 널리, SNS 공유하기 (Navigator.share) 들어가며 이번에 갑자기 서비스를 운영 중에 팬덤을 타고 SNS에 서비스가 공유되는 일이 발생했었습니다. 그래서 이번 기회에 유저의 편의성을 위해 링크를 만들어 제공하거나 SNS로 바로 공유가 가능하도록 기능을 구현한 방법을 다뤄보겠습니다. 대상 독자는 공유하기 기능에 대한 예시 코드를 살펴보고 싶은 개발자 리액트를 통해 공유 기능을 제공하려는 개발자 공유 기능 살펴보기 공유기능 생각보다 눈여겨보진 않았지만 어느덧 우리 삶에 깊숙이 들어온 기능입니다. 이번 기회에 다른 서비스 예시부터 그리고 어떤 UX를 가지고 있나 살펴보도록 하겠습니다. 공유하기의 UX 공유하기 기능은 크게 2가지 버전으로 나눌 수 있습니다. 일반 브라우저에서의 공유하기 모바일 브라우저에서의 공유하기 이렇게 나눠지는 이유는 실은 간단.. 2022. 11. 22. [리액트] 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. [리액트] 검색의 목적은 편리함에 있다 ( 초성 검색, 자동완성) 들어가며 가끔 OTP 서비스를 사용하다 보면 한글 초성으로만 검색하는 기능을 확인할 수 있습니다. 입력이 불편한 리모컨 특성상 사용자에게 편리함을 제공하기 위해 많이 사용합니다. 그래서 이번엔 초성으로도 검색 가능한 검색창 컴포넌트를 만들어보도록 하겠습니다. 기존 컴포넌트 & 로직 컴포넌트 우선 컴포넌트를 하나 보고 오겠습니다. 이건 제가 예전에 사이트 프로젝트하면서 만들었던 컴포넌트인데요. 보시다시피 주식명 또는 코드를 입력하면 찾아주는 컴포넌트입니다. 근데 만약 여기서 삼성전자 대신에 ㅅㅅㅈㅈ를 입력했을때도 삼성전자가 검색된다면 얼마나 좋을까요? 그래서 한번 만들어가보겠습니다. 로직 일단 기존의 로직부터 확인하고 가겠습니다. const matchStock = ( stockList: Holdings[].. 2022. 7. 10. [리액트] 글로벌한 웹을 향하여 (react-i18next, 다국어지원) 들어가며 이번 글에서는 글로벌한 웹을 위해서 react i18n를 적용하는 방법과 나름의 best practice에 대해 적어보겠습니다. 이 글은 아직 이제 막 프로젝트에 i18n을 던지려는 용기 있는 개발자를 위한 글이며, 더욱 위대한 웹을 위한 글이기도 합니다. 이직이 어느정도 마무리되었고, 사이드 프로젝트도 마무리하고 새로운 아이템을 찾는 피벗 중이어서 갑자기 시간이 붕 떴습니다. 그래서 이래저래 책을 읽으며 여유있는 시간을 즐기고 있는데 기존 프로젝트를 정리도 하면서 문서화를 하다 i18n에 대해 정리해보려고 이렇게 글을 작성하게 되었습니다. best practice는 아니지만 better practice이기를 바라며 react- i18n 적용하는 방법을 시작해보겠습니다. i18n 이란? i18n.. 2022. 5. 29. 이전 1 2 3 4 5 ··· 8 다음
