[LWC] 생성하기 및 반영하기

 

 

1. LWC 생성

 

- F1 (Crtl + Shift + P)

SFDX : Create Lightning Web Component

 

- 공란에 생성될 lwc 컨포넌트 이름을 작성

 

- 기본 lwc 경로 자동 출력

   엔터

 

* force-app - lwc 안으로 컨포넌트가 생성됨 

* 컨포넌트 안에 생성되는 tests_ 폴더는 무시해도 됨 

 

 

2. LWC 작성

- 컨포넌트명.html

템플릿 안에 마크업을 작성

 

- css가 없기에  컨포넌트명.css 를 생성

css가 비어있으면 첫 deploy때 에러가 발생하기에 아무 내용이나 넣어둔다.

 

- 컨포넌트명.js-meta.xml  

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

 

모바일이나 다른 기타에서도 접근 가능하도록 수정

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed> //true로 변경
    
    //추가
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
   //추가
    
</LightningComponentBundle>

 

 

3. LWC 반영

- F1 (Crtl + Shift + P)

SFDX : Deploy This Source to Org

 

혹은 

 

- 컨포넌트 아무 파일에서나 우클릭을 하고 

SFDX : Deploy This Source to Org 선택

 

컨포넌트에 모든 파일이 반영됨

 

 

3. 브라우저 화면 띄우기

- vscode 하단 왼쪽에 

 

 

클릭하면  org와 연동된 창이 열림