CLI 버전 및 설치확인방법

COMMAND창(window + r)/cmd 에 SFDX를 입력하면 

다음과 같이 뜨는것을 확인할 수 있다 

 

vs코드 설치 후 

확장 아이콘클릭 후 salesforce Extension Pack을 클릭한다 

 

sdfx 명령을 치면 해당 관련 명령리스트가 뜨는것을 볼 수 있다 

 

프로젝트를 만들기 위해서 SFDX:Create Project 를 누르면 프로젝트를 만들 수 있다 

 

만들고 나서 , 오그와 연결하고 싶으면 SFDX:Authorize an Org 를 선택해서 누르고,

Project Default login URL 옵션 눌러주고 

로그인 화면이 뜰것이다 로그인을 해주면 다음과 같이 성공적으로 떳다고 화면에 입력이된다 

 

이렇게 성공적으로 할 수 연결이 된 것을 확인할 수 있다 

 

기초중에 기초 LWC 클래스 만들기 

 

ctrl+ shift +p 누르고 SFDX:Create Lightning Component 누르고 

force-app/main/default/lwc. < 를클릭후 

제목을 입력해주면 

 

다음과 같이 만들어진것을 확인할 수 있다

 

 

 

html , js , xml 이렇게 총 3가지가 만들어진것으로 보여지는데 

 

첫번째 html 

<template>

    <lightning-card title="HelloWorld" icon-name="custom:custom14">

      <div class="slds-m-around_medium">

        <p>Hello, {greeting}!</p>

        <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>

      </div>

    </lightning-card>

  </template>

 

두번째로 js

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {

  greeting = 'World';

  changeHandler(event) {

    this.greeting = event.target.value;

  }

}

 

세번째로 helloWorld.js-meta.xml

 

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {

  greeting = 'World';

  changeHandler(event) {

    this.greeting = event.target.value;

  }

}

 

하고 오그에 디플로이 하자 

sfdx: Open Default Org를 누르면 연결된 해당 오그가 열린다 

 

설정톱니바퀴 - Edit Page 누르고 보면 custom 쪽에 helloworld가 만들어진것을 확인할 수 있다 

 

드레그앤 드롭으로 커스텀된애를 봐보자 

 

이렇게 된 나온것을 확인해볼 수 있다