[수습일지] - 26

1.perttier가 제대로 되지 않아 다시 설치를 하려고 했는데 앱을 설치한 것 만으로는 동작하지 않았기 때문에

"npm install --global prettier prettier-plugin-apex"를 사용해 전역으로 apex에 맞게 설치했다.

 

그 이후 default setting과 save format 설정을 하고

npm run prettier를 누르고 나니 자기 멋대로 전체파일을 확인하고 json 하나에 에러를 띄운 후 정상적으로 작동했다.

 

 

2.윈도우에서는 git 명령어를 사용하기가 우분투보다 조금 더 복잡한데

git을 설치한 다음 vsc의 settings에서 Terminal › Integrated › Default Profile: Windows부분을

git 또는 powershell 등으로 지정해야 한다.

 

git지정이 되지 않아 명령어가 먹히지 않고 clone도 되지 않았지만

해당 문제를 처리하고 나니 고질적인 sfdc extension의 느린 로딩만 참으면 수월하게 넘어갈 수 있었다.

 

 

3.중단점 작업을 위한 임시 해결 방법으로 Lightning 웹 보안을 끄기 위해서는

setup 부분에서 session setting으로 들어가 lightning 보안 사용을 해제하면 되고

해당 부분을 바로 적용시키기 위해서는 강력 새로고침을 통해 캐시를 지워줘야 한다.

 

또한 debug mode를 사용하기 위해서는 Debug Mode 세팅에서 권한설정을 진행해야 한다.

 

 

4.icon을 카드에 추가하려고 하면 아래의 코드로도 충분하지만

<template>
  <lightning-card title="How to bind HTML element in LWC" icon-name="utility:animal_and_nature">
    <div>
      Hello, {value}!
    </div>
  </lightning-card>
</template>

아이콘 자체를 넣기 위해서는 아래와 같이 할 수 있으며

해당 아이콘의 사이즈와 색도 조절할 수 있다.

//html
<template>
  <lightning-card>
    <lightning-icon icon-name="utility:animal_and_nature" size="large"></lightning-icon>
    <div>Hello, {myValue}!</div>
    <lightning-icon icon-name="utility:apex" size="large"></lightning-icon>
    <lightning-icon icon-name="utility:record" size="xx-small"></lightning-icon>
  </lightning-card>
</template>

//css 색 조정
#id{
--sds-c-icon-color-foreground-default : red;
background-color: white;
}

 

 

5.아래의 방식으로 이벤트를 감지해 실시간으로 값을 변경해줄 수 있다.

//html
<template>
    <lightning-card title="How to bind HTML element in LWC and make it dynamic" icon-name="utility:animal_and_nature">
        <div>
            Hello, {myValue}!
        </div>
        <lightning-input label="Dynamic value" value={myValue} onchange={handleChange}>

        </lightning-input>
    </lightning-card>
</template>

//js
import { LightningElement } from "lwc";

export default class BindInputText extends LightningElement {
  myValue = "world";
  handleChange(event) {
    this.myValue = event.target.value;
  }
}

 

 

6.이벤트 감지 및 조건에 따른 출력은 아래와 같이 할 수 있다.

//html
<template>
    <lightning-card title="COnditional Rendering Elements" icon-name="utility:animal_and_nature">
        <div>
            Hello, {myValue}!
        </div>
        <div>
            <lightning-input type="checkbox" label="Click me" onchange={handleChange}>

            </lightning-input>
            <template if:true={showMe}>
                I am Visible
            </template>
            <template if:false={showMe}>
                I am not visible.
            </template>
        </div>
    </lightning-card>
</template>

//js
import { LightningElement } from "lwc";

export default class ConditionallyRenderElements extends LightningElement {
  myValue = "Salesforce Yohan";
  showMe = false;
  handleChange(event) {
    this.showMe = event.target.checked;
  }
}

 

 

7.form 입력값을 받는 것은 아래의 코드로 해결할 수 있다.

//html
<template>
    <lightning-card title="Bind Expressions from JS" icon-name="utility:animal_and_nature">
        <div>
            <lightning-input name="fullName" label="Full Name" onchange={handleChange}>

            </lightning-input>
            <lightning-input type="number" name="phone" label="Enter Mobile No." onchange={handleChange}>

            </lightning-input>
            <lightning-input type="email" name="email" label="Email" onchange={handleChange}></lightning-input>
        </div>
        <div style="padding:10px">
            <table border="1">
                <tr>
                    <td>Full Name :</td>
                    <td>{upperCase}</td>
                </tr>
                <tr>
                    <td>Email :</td>
                    <td>{email}</td>
                </tr>
                <tr>
                    <td>Phone :</td>
                    <td>{phone}</td>
                </tr>
            </table>
        </div>
    </lightning-card>
</template>

//js
import { LightningElement } from "lwc";

export default class BindExpressionsfromJS extends LightningElement {
  fullName = "";
  email = "";
  phone = "";
  handleChange(event) {
    const field = event.target.name;
    if (field === "fullName") {
      this.fullName = event.target.value;
      this.fullName = this.fullName.toUpperCase();
    } else if (field === "email") {
      this.email = event.target.value;
    } else if (field === "phone") {
      this.phone = event.target.value;
    }
  }

  get upperCase() {
    return `${this.fullName}`.toUpperCase();
  }
}

 

 

8.forEach를 사용해 테이블을 만드는 것은 아래의 코드같이 생성할 수 있다.

//html
<template>
    <lightning-card title="How to use for each loop in LWC" icon-name="utility:animal_and_nature">
        <div style="padding:10px">
            <table border='1'>
                <tr>
                    <td>
                        Student Name
                    </td>
                    <td>
                        Class
                    </td>
                    <td>
                        Fee
                    </td>
                </tr>
                <template for:each={students} for:item="stu">
                    <tr key={stu.Id}>
                        <td>{stu.Name}</td>
                        <td>{stu.Class}</td>
                        <td>{stu.Fee}</td>
                    </tr>
                </template>
            </table>
        </div>
    </lightning-card>
</template>

//js 여러개의 students 자료가 있지만 의미 없어 보여서 2개만 남겼다.
import { LightningElement } from "lwc";

export default class UseForEachLoop extends LightningElement {
  students = [
    {
      Id: "001",
      Name: "Student 1",
      Class: "Class 1",
      Fee: "1000 $"
    },
    {
      Id: "002",
      Name: "Student 2",
      Class: "Class 2",
      Fee: "1000 $"
    }
  ];
}

 

 

9.lwc를 사용해 레코드를 생성할 수도 있다.

ShowToastEvent 부분은 제대로 작동하지 않는데 큰 상관은 없고

//html
<template>
    <lightning-card>
        <lightning-record-form object-api-name={objectApiName} fields={fields} onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

//js
import { LightningElement } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import ACCOUNT_OBJECT from "@salesforce/schema/Account";
import NAME_FIELD from "@salesforce/schema/Account.Name";
import PHONE_FIELD from "@salesforce/schema/Account.Phone";
import REVENUE_FIELD from "@salesforce/schema/Account.AnnualRevenue";

export default class CreateAccountRecord extends LightningElement {
  objectApiName = ACCOUNT_OBJECT;
  fields = [NAME_FIELD, PHONE_FIELD, REVENUE_FIELD];

  handleSuccess(event) {
    const toastEvent = new ShowToastEvent({
      title: "Account has created successfully !",
      message: "Account Created : " + event.details.id,
      variant: "success"
    });
    this.dispatchEvent(toastEvent);
  }
}

 

 

10.Record에 접근하고 싶은 경우 uirecordapi로 검색해 salesforce developer page에 들어가면 된다.

//html
<template>
    <lightning-card title="How to use for each loop in LWC" icon-name="utility:animal_and_nature">
        <div style="padding:10px">
            <table border='1'>
                <tr>
                    <td>
                        Student Name
                    </td>
                    <td>
                        Class
                    </td>
                    <td>
                        Fee
                    </td>
                </tr>
                <template for:each={students} for:item="stu">
                    <tr key={stu.Id}>
                        <td>{stu.Name}</td>
                        <td>{stu.Class}</td>
                        <td>{stu.Fee}</td>
                    </tr>
                </template>
            </table>
        </div>
    </lightning-card>
</template>

//js
import { LightningElement } from "lwc";

export default class UseForEachLoop extends LightningElement {
  students = [
    {
      Id: "001",
      Name: "Student 1",
      Class: "Class 1",
      Fee: "1000 $"
    },
    {
      Id: "002",
      Name: "Student 2",
      Class: "Class 2",
      Fee: "1000 $"
    },
    {
      Id: "003",
      Name: "Student 3",
      Class: "Class 3",
      Fee: "1000 $"
    },
    {
      Id: "004",
      Name: "Student 4",
      Class: "Class 4",
      Fee: "1000 $"
    },
    {
      Id: "005",
      Name: "Student 5",
      Class: "Class 5",
      Fee: "1000 $"
    },
    {
      Id: "006",
      Name: "Student 6",
      Class: "Class 6",
      Fee: "1000 $"
    },
    {
      Id: "007",
      Name: "Student 7",
      Class: "Class 7",
      Fee: "1000 $"
    },
    {
      Id: "008",
      Name: "Student 8",
      Class: "Class 8",
      Fee: "1000 $"
    },
    {
      Id: "009",
      Name: "Student 9",
      Class: "Class 9",
      Fee: "1000 $"
    },
    {
      Id: "010",
      Name: "Student 10",
      Class: "Class 10",
      Fee: "1000 $"
    }
  ];
}

 

 

11.계정 삭제 등의 기능과 toast 기능을 구현했는데

2년 전 강의라 그런지 dataset.recordid로 접근하고 넘어가버렸는데

되지 않아 찍어보니 dataset.record로 접근해야 했다.

//html
<!-- sldsValidatorIgnore -->
<template>
    <lightning-card title="Delete Records without server-side script" icon-name="utility:animal_and_nature">
        <template if:true={accounts}>
            <div>
                <template for:each={accounts} for:item="acc">
                    <lightning-layout key={acc.Id}>
                        <lightning-layout-item flexibility="grow">
                            {acc.Name}
                        </lightning-layout-item>
                        <lightning-layout-item flexibility="grow">
                            <lightning-button-icon icon-name="utility:delete" onclick={deleteAccount}
                                data-record={acc.Id}>
                            </lightning-button-icon>
                        </lightning-layout-item>
                    </lightning-layout>
                </template>
            </div>
        </template>
    </lightning-card>
</template>

//js
import { LightningElement, wire } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { refreshApex } from "@salesforce/apex";
import { deleteRecord } from "lightning/uiRecordApi";
import getAccList from "@salesforce/apex/AccountController.getAccList";

export default class DeleteAccounts extends LightningElement {
  accounts;
  error;
  wiredAccountsResult;

  @wire(getAccList)
  wiredAccounts(result) {
    this.wiredAccountsResult = result;
    if (result.data) {
      this.accounts = result.data;
      this.error = undefined;
    } else if (result.error) {
      this.error = result.error;
      this.accounts = undefined;
    }
  }

  deleteAccount(event) {
    // const recordId = event.target.dataset.recordid;
    const recordId = event.target.dataset.record;
    deleteRecord(recordId)
      .then(() => {
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Success",
            message: "Account Deleted",
            variant: "success"
          })
        );
        return refreshApex(this.wiredAccountsResult);
      })
      .catch((error) => {
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Error",
            message: "Error Deleting record",
            variant: "error"
          })
        );
      });
  }
}

 

 

 

 

 

(1).백준 1225번 이상한 곱셈은 좌측의 각 숫자와 우측의 각 숫자를 곱하는 방식이었는데

좌측의 개별 숫자를 우측의 모든 숫자와 다 곱하는 방식이기 때문에 굳이 a*b회의 계산을 하지 않고

a그룹의 합과 b그룹의 합을 곱해서 해결했다.

const input = `123 45`.split(' ')

let num1 = 0
let num2 = 0

for(let i = 0 ; i < input[0].length ; i++){
    num1 += Number(input[0][i])
}
for(let i = 0 ; i < input[1].length ; i++){
    num2 += Number(input[1][i])
}

console.log(num1*num2)