웹 구성 요소 활용

웹 구성 요소는 웹 사이트를 개발할 수 있는 훌륭한 도구입니다. 다른 사람들이 이미 코딩한 구성 요소를 사용하고 몇 가지 간단한 단계만 거치면 이를 자신의 구성 요소에 입력할 수 있습니다. https://www.webcomponents.org/에서 사용할 더 많은 구성 요소를 찾거나 스스로 놀면서 더 많이 찾고 만들 수 있습니다.

오늘은 이 6단계를 통해 웹 구성 요소를 설치, 가져오기 및 활용하는 방법을 안내해 드리겠습니다. 시각적 학습자인 경우 이 코드를 사용하여 아래 동영상을 시청할 수 있습니다.

1. node.js 설치
가장 먼저 해야 할 일은 https://nodejs.org/en/ 에 node.js를 설치하는 것입니다. 이것은 터미널이 우리가 제공하는 프롬프트를 이해하는 데 도움이 될 것입니다.

2. 저장소 초기화
이제 모든 올바른 설치가 완료되었으므로 프로젝트를 시작할 수 있습니다. 터미널을 열고 npm init @open-wc 를 실행하십시오. 기본 설정과 프로젝트 이름을 묻는 메시지가 표시됩니다. 리포지토리에 대해 제안된 모든 선택 사항을 선택했지만 자유롭게 다양한 옵션을 사용해 볼 수 있습니다. 거기에서 디렉토리를 cd <project-name> 를 사용하여 실제 프로젝트로 변경해야 합니다.

3. VS 코드 열기
이제 저장소를 열어 올바르게 작동하는지 확인할 준비가 되었습니다. code . 명령을 사용하여 이 작업을 수행할 수 있습니다.

4. 구성 요소 설치
터미널로 돌아가서 이제 구성 요소를 설치할 준비가 되었습니다. 오늘 우리는 meme-maker와 moar-sarcasm을 사용했지만 새로운 것을 시도하는 것을 두려워하지 마십시오. npm install @lrnwebcomponents/meme-maker 및 npm install @lrnwebcomponents/moar-sarcasm 를 실행하여 구성 요소를 설치할 수 있습니다. 이제 js 파일로 돌아가서 맨 위에 가져옵니다.

import '@lrnwebcomponents/meme-maker';
import '@lrnwebcomponents/mpoar-sarcasm';

5. 프로젝트 시작
브라우저에서 웹사이트를 열려면 터미널에서 npm start를 실행하십시오. 여기에서 구성 요소를 사용하기 전에 모든 것이 제대로 작동하는지 확인할 수 있습니다.

6. 컴포넌트 사용
이제 프로젝트가 훌륭하다는 것을 알았으므로 다시 자바스크립트로 이동하고 렌더링 기능에서 실제로 구성 요소 태그를 사용할 수 있습니다.

<meme-maker
  image-url="https://images.immediate.co.uk/production/volatile/sites/3/2021/02/Super-Bowl-meme-d53799a.jpg?quality=90&resize=620,413"
  top-text="trying to figure out"
  bottom-text="web components">
</meme-maker>
<moar-sarcasm>
  "trying to figure out web components"
</moar-sarcasm>

정말 좋아보이네요! 탐색에 행운을 빕니다. 코딩을 계속하세요!