웹 구성 요소 사용 및 오픈 소스 기여

웹 컴포넌트란?



소프트웨어 엔지니어링 또는 코딩 수업을 수강한 경우 교수는 캡슐화에 대해 이야기하는 것을 좋아합니다. 웹 구성 요소는 캡슐화의 실제 예입니다. 모르는 경우 캡슐화는 기본적으로 더 많은 조직과 사용 가능한 프로젝트를 만들기 위해 코드를 재사용하는 것입니다. 웹 구성 요소는 코드를 재사용하고 삶을 더 쉽게 만드는 좋은 방법입니다! 예를 들어, 이 데모에서 사용할 웹 구성 요소는 다른 프로그래머가 만든 것이지만, 예를 들어... 내 웹 사이트를 구축하는 경우 내 프로젝트에서 그의 웹 구성 요소를 사용할 수 있습니다.

프로젝트 찾기



이 예에서는 Twitter Embed를 사용합니다.


느릅나무 / lrnwebcomponents


@lrnwebcomponents NPM 기반 요소 정의를 위한 Monorepo





lrnwebcomponents













lrnwebcomponents 프로젝트에 오신 것을 환영합니다!


ELMS:LN은 모든 프로젝트를 위한 웹 구성 요소를 제작했습니다.

빠른 시작


참고: Node 버전 6.0 이상을 사용해야 합니다. Yarn이 활성화되었는지 확인합니다. 그렇지 않은 경우 install yarn globally . 이러한 웹 구성 요소는 ES6에 작성되었으며 빌드 루틴은 레거시 브라우저를 포함하도록 es5로 컴파일됩니다.

빠른 설치


$ curl -fsSL https://raw.githubusercontent.com/elmsln/lrnwebcomponents/master/scripts/lrnwebcomponentsme.sh -o lrnwebcomponentsme.sh && sh lrnwebcomponentsme.sh

수동 설치

$ git clone https://github.com/elmsln/lrnwebcomponents.git
$ cd lrnwebcomponents
$ yarn global add @wcfactory/cli
$ yarn global add polymer-cli
$ yarn global add lerna
$ yarn global add web-component-analyzer
$ yarn install

포크 동기화

$ git remote add upstream https://github.com/elmsln/lrnwebcomponents.git
$ git fetch upstream
$ git pull

윈도우


Git bash은 Windows 컴퓨터에 이미 설치되어 있어야 하며 컴퓨터의 응용 프로그램을 검색하거나 파일 탐색기 내부를 마우스 오른쪽 버튼으로 클릭하여 찾을 수 있습니다.
Cygwin command line은 가볍게 테스트했지만…

View on GitHub

제작자는 나의 교수

.ltag__user__id__254952 .follow-action-button {
배경색: #1aff00 !중요;
색상: #000000 !중요;
border-color: #1aff00 !중요;
}



브라이언 올렌다이크 팔로우



@elmsln @haxcamp @btopro #HAXTheWeb #drupal #webcomponents #edtech ✻ Full stack unicorn Adjunct professor teaching about webdev, ethics, and everything in between



필요한 종속성 설치



이 프로젝트는 원사를 다운로드 및 설치하고 리포지토리를 포크하고 로컬로 복제해야 합니다. 기여하기로 결정한 프로젝트가 무엇이든 그들의 readme 페이지를 확인하십시오! 개인적으로 npm을 항상 사용하는데 이 프로젝트는 yarn이 필요하고 npm으로 실행할 수 없습니다. git 지침이 필요하면 내 git 기사를 참조하십시오.

일부 코드를 편집하십시오!



Twitter/embed 웹 구성 요소에 대한 데모 페이지를 업데이트했습니다. 데모 페이지는 웹 구성 요소가 수행해야 하는 작업과 이를 수행하는 구문을 보여 주는 데 도움이 될 수 있습니다. 이것은 내가 추가하기로 결정한 트윗입니다









WeRateDogs®


@dog_rates






페이튼입니다. 그는 지난 1월 뇌암 진단을 받았다. 그는 치료 기간 동안 너무 용감했고 이번 주부터 공식적으로 방사선 졸업생입니다! 아래를 클릭하면 Peyton의 보살핌 비용을 도울 수 있습니다. 10/14 gofundme.com/f/help-peyton-…


오후 16:42 - 2021년 3월 26일









얼마나 달콤합니까?

개발팀에 제출



코드 한 줄을 변경했다고 해서 작업이 완료된 것은 아닙니다. 다음으로 프로젝트의 주요 개발 팀에서 검토할 풀 요청을 제출해야 합니다. Github는 프로젝트를 중단시킬 수 있는 충돌 등을 확인합니다.

여기까지 왔고 요청이 승인되면 오픈 소스 프로젝트에 기여할 수 있게 된 것을 축하합니다. 현실 세계에 오신 것을 환영합니다.

이 블로그 게시물과 함께 이동하려면 내 YouTube 비디오를 확인하십시오.

좋은 웹페이지 즐겨찾기