react20 [React]UseFunnel(설문조사 패턴 한페이지에서 관리하기) 오늘은 새로 적용시켜본 useFunnel에 대해서 적어보려고 한다. 토스 유투브를 통해 알게된 이 hook은 단계별로 화면이 이동될 때 사용하기 좋은 hook이다. 이 화면들을 토스에서는 '설문조사 패턴'이라고 한다. 이번 프로젝트에서도 이렇게 단계별로 넘어가는 페이지를 만들게 되었다. modal이 연속되어 넘어가는 페이지로, 처음에는 단계에 맞는 모달창을 띄워주는 방식으로 코드를 구성했다. 하지만 그렇게 된다면 모달위에 모달이 새로 쌓이는 구조로, 모달 창을 종료하고 싶을때 지금까지 켜진 모달을 일일이 종료해줘야 하는 불편함이 있었다. 이 문제를 해결할 수 있는 것이 퍼널 방식이다. 단계가 여러개여도 한 페이지 안에서 모든 단계별 페이지를 관리 할 수 있어 유지보수에도 편하고 관리에도 용이해보인다. 먼.. 2023. 11. 7. dangerouslySetInnerHTML(XSS 보안 이슈) reactquill을 커스텀해서 사용하면서 이미지 첨부를 해야했다. 지금까지의 프로젝트에서는 프론트에서 직접 a3계정을 만들어서 첨부하는 과정으로 이미지 업로드를 진행했었는데 이번에는 이미지 업로드 api를 전달받아서 업로드를 하는 방식으로 진행하게 됐다. 이 과정에서 이미지와 함께 문자열을 출력하면 html tag와 함께 출력이 되어 dangerouslySetInnerHTML에 대해서 찾아보게 되었다dangerouslySetInnerHTMLdangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 react의 속성 중의 하나로 컴포넌트의 내부 HTML 콘텐츠를 직접 설정하거나 랜더링하는데에 사용된다. 리엑트에서는 보통 jsx문법을 사용하여 컴포넌트의 렌더링을 정의.. 2023. 10. 13. [React] 리엑트 debounce & Throttle(feat. 검색 기능 구현) 최근 검색기능을 구현하다가 알게된 개념인 Debounce 와 Throttle에 대해서 정리해보려고 한다. 검색 기능을 구현하다보면 한글자 한글자 입력할 때 마다 매번 콘솔에 찍히고 api를 그때마다 요청하니 성능적인 부담이 될 것이라는 생각을 한번쯤은 해봤던 경험이 있을 것이라고 생각한다. 이럴 때 유용하게 쓰이는 것이 저 두가지 개념 Debounce 와 Throttle이다. 물론 같은 기능을 하는 라이브러리도 존재하지만 , 이번에는 라이브러리 없이 구현하는 것이 더 나을 것이라고 생각해서 라이브러리는 사용하지 않았다.Debounce먼저 Debounce는 연속되는 함수 호출이 있을 경우 가장 마지막 함수만 호출하는 방식이다. 예를들어 검색창에 tstory를 검색하면 debounce를 적용하기 전에는 이렇.. 2023. 10. 6. rechart (bar chart/ area chart/ pie chart 커스텀) 프로젝트에서 숫자들을 차트로 표현해야 할 일이 생겼다. chart를 작성하기 좋은 라이브러리를 찾아봤는데 react에서 유명한 라이브러리로는 rechart와 chart js 이렇게 두 개가 있었다. rechart와 chart js 중 rechart가 내가 원하는 디자인으로 커스텀하기 좋을 것 같다는 판단이 들었다. 참고할 자료도 많았고, 코드도 비교적 간단하게 구성할 수 있었기 때문이다. rechart rechart 라이브러리를 사용 하는 것은 간단했다. rechart 라이브러리를 설치한 뒤 $ npm install recharts 공식 홈페이지에 나와있는 예시들 중 원하는 그래프의 코드를 가져와서 이용하면 된다. https://recharts.org/en-US 위에 rechart 공식페이지에 다양한 차.. 2023. 9. 19. 이전 1 2 3 4 5 다음 728x90 반응형
