반응형 전체 글171 [React] 초기로딩속도 줄이기! 최적화 방법 로딩 속도가 3초가 넘어가면 50%이상의 사용자가 떠나며 5초를 넘으면 90%의 사용자가 떠난다는 통계가 있다. 그만큼 초기 렌더링 속도 개선은 중요하다.그런데 지금 회사 내 React 초기 렌더링 속도가 굉장히 느려서 속도 개선이 필요하다고 생각했고 최적화에 대해서도 알아보고 싶었기에 하나도 모르는 상태에서 호기롭게... 도전을 하게되었다. 하나씩 검색하면서 찾아보게 된 여러 최적화 방법들을 정리한 기록들이다. Lighthouse 이용하기여러 블로그들을 돌려보니 lighthouse랑 pageSpeed Insights가 많이 나왔다.Lighthouse는 웹페이지 품질을 개선하는데 도움이 되는 오픈소스 자동화 도구이며 성능, 접근성, 검색엔젠 최적화 등 Lighthouse 툴을 이용해서 웹사이트를 분.. 2025. 1. 19. 2024 개발 회고록 2023년 연말에 썼던 2024년도 목표를 다시 보았다.그 어느 하나 제대로 지킨 게 없는....🥲 이게 맞나사실 회고록을 써야 할지 말아야 할지 고민도 엄청 했다.슬프지만 일단 반성문 같은 회고록을 써야겠다. 이래저래 잘 모르겠지만 일단 고... [ 인강 공부 ]React 인강을 사 놓았지만, 처음부터 끝까지 하나씩 다 봐야겠다고 생각했음에도 필요한 부분만 부분적으로 보았다. 완강을 꼭 해야겠다고 마음먹었지만 다 듣지 못한 것이 아쉽다는 생각이 들었다. 오히려 유튜브에 나와있는 개념 동영상들을 더 열심히 들었었다. 유료 강의를 사놓고 무료 강의들을 들은 게 웃기긴 하지만, 이래저래 나에게 도움이 되었다면 괜찮지 않나 싶다. [ 프로그래밍 책 읽기 ]시작과 동시에 덮어버렸던 모던 자바스크립트 딥다이브... 2025. 1. 5. 코드스플리팅(Code splitting) Code splitting은 왜 하는걸까?웹 애플리케이션은 점점 더 복잡해지고 규모가 커지고 있다. 이런 변화 속에서 애플리케이션의 코드 역시 방대해지고, 모든 코드를 하나의 번들 파일로 묶는 방식은 초기 로딩 속도와 사용자 경험에 있어 한계를 보이게 된다. 이런 문제를 해결하기 위한 기술이코드스플리팅이다. 자바스크립트 프로젝트 만들 때 모든 코드를 하나의 번들로 묶어서 만들게 되는데 앱이 비교적 간단한 편이면 괜찮지만 프로젝트가 커지면서 전달해야 하는 파일도 커지고, 유저의 브라우저가 파싱(parsing) 해야하는 정보도 많아지기 때문에 퍼포먼스 문제들이 생길 수 밖에 없다. 코드 스플리팅은 애플리케이션의 코드를 더 작은 단위로 나눠 필요한 코드만 로드하고, 나머지 코드는 필요한 순간에 로드하도록 만.. 2024. 12. 22. [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. 쿠키(Cookie)정의:클라이언트(브라우저)에 작은 데이터 조각을 저장하는 방식.특징:클라이언트 측에 저장됩니다.주로 사용자 인증, 세션 유지, 사용자 맞춤 설정에 사용됩니다.서버와의 통신 시, HTTP 요청에 자동으로 포함되어 전송됩니다.속성:크기 제한: 약 4KB.유효기간 설정 가능:만료 기간이 설정된 쿠키는 일정 시간 동안 유지됩니다.세션 쿠키는 브라우저 종료 시 삭제됩니다.장점:서버 부하 감소(클라이언트에 저장되므로).간단한 데이터 저장 가능.단점:보안 취약: 데이터가 평문으로 저장될 수 있어 민감한 정보는 저장하지 않음.브라우저 제한: 크기와 개수 제한.예시:로그인 유지: 쇼핑몰에서 로그인 후, 페이지를 닫았다가 다시 열어도 로그인 상태가 유지되는 것.사용자 설정 저장: 웹사이트에서 다크 .. 2024. 11. 12. 이전 1 2 3 4 5 ··· 29 다음 728x90 반응형
