프런트엔드 UI 구성요소

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!