프런트엔드 UI 구성요소

Susan Sarandon
풀어 주다: 2024-09-21 06:32:02
원래의
418명이 탐색했습니다.

 Frontend UI Components

iHateReading 맞춤형 저장소

지난 한 달 동안 저는 버튼, 입력, 양식, 배너, 갤러리 등 실제 웹 구성 요소인 UI 구성 요소를 많이 만들어 왔습니다

몇 가지 목적으로 만들어진 구성 요소

  • 프론트엔드를 배우고 내가 하는 일을 더 잘하게 됩니다
  • 프론트엔드 개발에서 더 나은 코드를 작성하는 능력을 향상합니다(이것이 무엇을 의미하는지 나중에 설명하겠습니다)

저는 현재 기술 스택 또는 기술이 반응형과 next.js를 프레임워크로 사용하고 있으며 스타일링에는 Tailwind CSS를, 애니메이션에는 GSAP를 사용합니다

문제가 되지 않는 어떤 기술 스택이라도 사용할 수 있으므로 최신 프레임워크로 시작했고 언어는 Reactjs와 next.js입니다

다음으로 결제 양식, 구독 양식, 이미지 갤러리, 버튼, 기타 다양한 UI 구성 요소 등 향후 실제 프로젝트에서 개인적으로 사용할 수 있도록 개발해야 하는 모든 구성 요소를 선택해야 합니다. 헤더 구성요소 등

iHateReading은 개발자를 위한 개발자의 플랫폼이며 지난 2년 동안 ihatereading.in에서 블로그와 뉴스레터를 공유해 왔습니다.

이 플랫폼의 모든 것을 다시 가져오기 위해 사용자 정의 저장소, 사용자 정의 코드 또는 무엇이라고 부르든 간에 새로운 변경 사항이나 새로운 기능을 도입할 적절한 시기입니다.

이제 이러한 구성 요소는 무엇으로 구성되어 있습니까? 모든 구성 요소는 다음 모듈을 사용하여 만들어집니다.

  1. 리액트J
  2. 테일윈드 CSS
  3. 애니메이션을 위한 GSAP
  4. Mantine.dev UI 라이브러리(필요한 경우)

스타일링이나 프레임워크 종속성 없이 기능만 추가되는 헤드리스 UI 구성 요소를 사용하려고 합니다. 이러한 방식으로 많은 개발자가 코드를 쉽게 복사하여 붙여넣고 직접 사용하여 빠르게 개발할 수 있습니다.

이러한 구성 요소를 개발하는 동안 제가 https://ihatereading.in/customrepo에서 공유한 첫 번째 구성 요소를 보고 새 구성 요소나 최신 구성 요소와 비교해 보면 차이점을 쉽게 찾을 수 있습니다.

자바스크립트에 대한 종속성이 줄어들고 코드 구성 요소가 더 최적화되고 재사용 가능합니다.

작년에 제가 수행한 연구와 블로그, JavaScript가 웹 사이트 성능을 저하시키는 이유에 대한 모든 공로가 인정됩니다. 브라우저는 CSS에 비해 JS를 구문 분석하는 데 많은 시간이 걸리기 때문입니다. JS를 줄이면 웹사이트 성능도 향상됩니다.

게다가 요즘 CSS는 너무 강해져서 웹 사이트에 멋진 애니메이션을 가져오는 데 JS가 거의 필요하지 않으며 많은 개발자가 CSS를 더 많이 사용하는 또 다른 모토이기도 합니다. > JS가 적습니다.

지금까지 40개의 구성요소가 추가되었으며 더 많은 작업을 진행 중입니다. 어떤 종류의 구성요소나 형태, 도구를 만들 수 있는지 알고 계시다면 댓글 섹션에 추가해 주시기 바랍니다.

트위터와 링크드인에서 부품 개발 소식을 적극적으로 공유하고 있으며, ihatereading.in/customrepo에서 코드를 푸시하고 있습니다

자유롭게 확인해 보시고 추가하고 만들어야 할 사항을 알려주세요.

건배
슈리

위 내용은 프런트엔드 UI 구성요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!