react 41 en_US인가 en-US인가 그것이 문제로다(feat. i18n) 들어가며이번 글에서는 다국어 지원을 도입한 프로젝트에서 겪은 표준 에러에 대해 설명한다. 이 글은 에러의 식별, 원인 분석, 그리고 문제 해결 과정을 다루며, 동일한 문제를 겪을 수 있는 개발자들에게 유용한 정보를 제공한다.에러 식별9월을 앞두고 이번 분기에 진행한 개발 작업을 정리하던 중, Sentry에서 특정 에러가 발생한 것을 확인했다. 해당 에러는 다국어 지원을 위해 사용한 locale 파일과 관련이 있었다.우선 일차적으로 locale 파일을 가져와서 json 형태로 만들고 이를 타입을 추론하여 사용하기 때문에 만약 없는 locale key라면 빌드단계에서 막혀야한다. (프로젝트 빌드시에 타입체크를 하도록 강제해두었기 때문에)원인분석1. locale key가 없다?그런데도 에러가 발생했고 소스맵을.. 2024. 8. 27. 많은 데이터를 보여주는 방법에 대하여 (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 ··· 11 다음
