개발/리액트 30 [리액트] 마크다운 문서에서 HTML 랜더링하기(rehype-raw, next-intl) 들어가며이 글을 읽고나면 next-intl로 들어오면 번역언어의 HTML를 파싱하여 랜더링할 수 있게 됩니다.대상 독자는 리액트 프로젝트로 다국어를 지원하는 개발자, 블로그 서비스를 마크다운으로 관리하는 개발자입니다.문제 인식이번 분기에 만들고 있는 제품을 홍보 및 가이드하기 위해 블로그 기능을 추가하였다. 다만 현재 제품은 11개의 언어로 번역되어 있고, 각각의 번역 파일은 구글 시트로 관리하며 자동화스크립트에 의해 프론트엔드 개발자가 사용할수 있도록 locale 별 json으로 떨어진다.그리고 내부적으로 next.js를 사용하고 있고 i18n 라이브러리는 next-intl 를 사용하고 있었다. 여기까지 문제될건 없었다. 그런데 갑자기 특정 문자열에서 에러가 발생하기 시작했다. 저기 보이는 "blog.. 2024. 9. 26. 많은 데이터를 보여주는 방법에 대하여 (Tanstack query,table,react-virtual) 들어가며 안녕하세요. 편리함을 추구하는 개발자 핸디입니다. 이번 글에서는 Tanstack query, Tanstack table, Tanstack react-virtual로 이루어진 Tanstack 라이브러리 3형제를 이용해서 유저에게 더 많은 데이터를 편리하고 깔끔하게 보여주는 방법에 대해서 적어보았습니다. 대상독자는 무한스크롤, 혹은 페이지네이션을 이용하여 유저에게 데이터를 보여주고 싶지만, 개발하기가 귀찮아서 편리하게 만들고 싶은 개발자입니다. 시작하겠습니다. Tanstack Table Tanstack Table은 테이블을 만들어주는 라이브러리입니다. 여기서 주목할 점은 Headless와 React,Vue,Solid 의 환경에서도 동작한다는 점입니다. Tanstack Table은 모든 기능 및 디자.. 2024. 1. 21. [상태관리] Zustand 조금 더 편하게 쓰기 ( snippet ) 들어가며 편리함을 추구하는 프론트엔드 개발자 핸디입니다. 저번 글에 이어서 이번 글에서는 Zustand를 조금 더 편하게 사용하는 방법에 대해 알아보도록 하겠습니다. [상태관리] 내가 Zustand를 선택한 이유 (over the Recoil) 들어가며 편리함을 추구하는 프론트엔드 개발자 핸디입니다. 최근에 새롭게 진행한 사이드프로젝트에서는 recoil 대신에 zustand를 사용해 보았습니다. 그래서 이번 글에서는 zustand와 Recoil를 비교 all-dev-kang.tistory.com Snippet Extension 우리가 개발을 하다보면 많은 Extension를 만납니다. 이미 react snippet를 쓰고 있는 저에겐 snippet extension는 코파일럿보다 훨씬 중요한 도구인데요... 2023. 7. 10. [리액트] Devtool로 확인하고 성능개선하기 들어가며 안녕하세요. 핸디입니다. 최근에 모바일 버전에 대응하여 반응형 레이아웃과 컴포넌트로 변경했습니다. 다만 데스크톱에서 원활하게 돌아가던 서비스가 구형단말기에서는 랜더링 중에 멈추는 현상이 발견되었습니다. 그래서 이번에는 간단한 성능테스트하는 방법, 리펙토링 하는 방법, 그리고 최종결과에 대해 살펴보도록 하겠습니다. 결과부터 말씀드리면 성능향상의 기준이 각자 다르지만 유휴시간 기준으로 16배, 스크립팅시간으론 4배 빨라졌어요. 성능테스트하는 방법 일단 데스크탑 기준으로 성능을 측정해 보겠습니다. 우리의 영원한 친구 크롬 개발자 도구와 리액트 개발자 도구로 측정해보겠습니다. 크롬 개발자 도구 일단 보시면 Idle 시간이 10초 중에 0.5초밖에 없습니다. 바쁘게 열일하고 있었군요.. 리액트 개발자 도.. 2023. 2. 8. 이전 1 2 3 4 ··· 8 다음
