반응형 React13 [Typescript] any 타입 대체 방법 처음에 실무 시작하게 되면서 TypeScript를 접했을 때 타입 정의가 어려웠다. 일단 익숙하지 않았던 것도 있었고 그냥 any를 써도 넘어 가길래 애매하다 싶으면 타입을 any로 지정하고 자꾸 쓰게 되었는데... 하지만 any를 마구잡이로 사용하면 생기는 문제1. 타입 체크가 무의미해짐 any를 사용하면 TypeScript의 장점인 자동완성과 타입 체크를 포기하는 셈이다.const fetchData = async (): Promise => { const response = await fetch("https://api.example.com/data"); return await response.json();};const data = await fetchData();console.log(data.tit.. 2025. 3. 2. [React] 초기로딩속도 줄이기! 최적화 방법 로딩 속도가 3초가 넘어가면 50%이상의 사용자가 떠나며 5초를 넘으면 90%의 사용자가 떠난다는 통계가 있다. 그만큼 초기 렌더링 속도 개선은 중요하다.그런데 지금 회사 내 React 초기 렌더링 속도가 굉장히 느려서 속도 개선이 필요하다고 생각했고 최적화에 대해서도 알아보고 싶었기에 하나도 모르는 상태에서 호기롭게... 도전을 하게되었다. 하나씩 검색하면서 찾아보게 된 여러 최적화 방법들을 정리한 기록들이다. Lighthouse 이용하기여러 블로그들을 돌려보니 lighthouse랑 pageSpeed Insights가 많이 나왔다.Lighthouse는 웹페이지 품질을 개선하는데 도움이 되는 오픈소스 자동화 도구이며 성능, 접근성, 검색엔젠 최적화 등 Lighthouse 툴을 이용해서 웹사이트를 분.. 2025. 1. 19. [React] react-hook-form과 zod로 validation 유효성 검사 회사에서 react-hook-form을 쓰는데 zod로 유효성검사를 하는데 할 때마다 헷갈렸던 부분 한번 정리해보려고 한다. React hook formReact Hook Form은 React에서 폼을 관리하기 위한 경량 폼 라이브러리이다. 최소한의 리렌더링과 간결한 API를 통해 폼 상태를 효율적으로 관리할 수 있다. 주요 장점:간단한 API: useForm 훅을 사용하여 폼 상태와 검증 로직을 선언적으로 관리할 수 있음.퍼포먼스 최적화: 입력 필드별로 리렌더링을 최소화하여 성능을 높임.유연한 검증: 사용자 정의 검증 로직 및 다양한 검증 라이브러리와 통합 가능. React Hook Form(RHF)의 다양한 기능들1. resolver역할: 외부 검증 라이브러리(Zod, Yup 등)를 React H.. 2024. 11. 24. [React] react-daum-postcode 우편번호, 주소 검색 https://postcode.map.daum.net/guide Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net 우편 번호로 주소를 찾아야 할 때 자주 보이는 다음 우편번호 서비스 API를 사용하는 법! 리액트에서 쓸 수 있는 react-daum-postcode 패키지를 사용할 것이다. 1. 설치 npmnpm install react-daum-postcodeyarnyarn add react-daum-postcode 먼저 패키지 다운 받고 잘 받아졌는지 확인 2. 사용import DaumPostcode from 'r.. 2024. 11. 15. 이전 1 2 3 4 다음 728x90 반응형
