리액트 25 [리액트] 검색의 목적은 편리함에 있다 ( 초성 검색, 자동완성) 들어가며 가끔 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. [리액트] 다이나믹한 웹을 향하여 (framer-motion, lottie) 들어가며 텍스트로 이뤄졌던 웹이라는 공간이 이미지, 스타일을 넘어 동적이고 유저와 티키타카하는 공간이 되어가고 있습니다. 이런 공간을 만들어야 하는 프론트엔드 개발자로서 항상 css는 두려움과 귀찮음의 공간이기 마련입니다. 하지만 디자이너님이 뽑아준 대로 이쪽으로 나왔다 저쪽으로 들어가는 화려한 애니메이션과 이미지를 멋지게 랜더링 하고 조작할 수 있게 도와주는 좋은 라이브러리들이 있습니다. 이번 글에서는 바로 css로 하기 어려운 작업을 간단하게 도와주는 라이브러리 2개를 소개해드리는 글입니다. 바로 lottie와 framer-motion입니다. 그럼 한번 프로젝트에 적용을 하러 가보겠습니다.!! framer-motion 란? framer-motion의 공식문서상 이를 아래와 같이 설명하고 있습니다. M.. 2022. 5. 7. [리액트] React.memo를 이용해 성능 최적화를 해보자 React.memo가 필요한가? 어느 때와 같이 기획문서를 보고( 실은 기획자가 없어서 뇌리에 스치는 게 기획) 컴포넌트를 만들고 있었습니다. 이번엔 차트와 관련된 컴포넌트를 구현하고 있어서, Plotly 라이브러리를 활용해 미리 만들어놨던 컴포넌트에 테스트를 붙이고 구현하고 푸시를 했습니다. 문제 인식 | 성능이 구려 푸시를 하면 일단 기분이 좋기 때문에 완성된 모습을 뿌듯하게 쳐다보고 있는데 자꾸 버벅이는 느낌이 들어 바로 파고들어가 봅니다. 콘솔 창을 열고 확인을 해보니 같은 요청이 여러번 날아가는 것을 확인했습니다. 데브툴로 봐도 같은 prop임을 확인했습니다. 같은 요청 & 같은 데이터 --> 여러번 랜더링 -> 잘못된 구조 --> 최적화라는 뇌피셜 로직이 수행되었고 바로 어떤 컴포넌트인지 확인.. 2022. 1. 3. 이전 1 2 3 4 5 6 7 다음
