[세일즈포스] 컴포넌트 폴터 Component Folder

 

 

Component Folder

To create a component, first create a folder that bundles your component’s files.

The folder and its files must have the same name, including capitalization and underscores.

 

myComponent ├──myComponent.html ├──myComponent.js ├──myComponent.js-meta.xml ├──myComponent.css └──myComponent.svg

The folder and its files must follow these naming rules.

• Must begin with a lowercase letter
• Must contain only alphanumeric or underscore characters
• Must be unique in the namespace
• Can’t include whitespace
• Can’t end with an underscore
• Can’t contain two consecutive underscores
• Can’t contain a hyphen (dash)

Lightning web components match web standards wherever possible. The HTML standard requires that custom element names contain a hyphen.

Since all Lightning web components have a namespace that’s separated from the folder name by a hyphen, component names meet the HTML standard. For example, the markup for the Lightning web component with the folder name widget in the default namespace c is <c-widget>.

However, the Salesforce platform doesn’t allow hyphens in the component folder or file names. What if a component’s name has more than one word, like “mycomponent”? You can’t name the folder and files my-component, but we do have a handy solution.

Use camel case to name your component myComponent. Camel case component folder names map to kebab-case in markup. In markup, to reference a component with the folder name myComponent, use <c-my-component>.

 

<-- parent.html --> <template> <c-my-component></c-my-component> </template>

 

 

You can use underscores in component folder names, but they don’t map to kebab case in markup. The names are legal because the namespace is separated with a hyphen, but most users expect hyphens instead of underscores in a web component name. For example, this component’s markup references the my_component component. It’s legal, it just looks a little odd.

 

<!-- parent.html --> <template> <c-my_component></c-my_component> </template>

 

구성 요소 폴더

구성 요소를 만들려면 먼저 구성 요소의 파일을 묶는 폴더를 만듭니다.

폴더와 해당 파일의 이름은 대문자와 밑줄을 포함하여 동일해야 합니다.

 

myComponent ├──myComponent.html ├──myComponent.js ├──myComponent.js-meta.xml ├──myComponent.css └──myComponent.svg

폴더와 해당 파일은 다음 명명 규칙을 따라야 합니다.

• 소문자로 시작해야 합니다.
• 영숫자 또는 밑줄 문자만 포함해야 합니다.
• 네임스페이스에서 고유해야 합니다.
• 공백을 포함할 수 없습니다.
• 밑줄로 끝날 수 없습니다.
• 두 개의 연속된 밑줄을 포함할 수 없습니다.
• 하이픈(대시)을 포함할 수 없습니다.

Lightning 웹 구성 요소는 가능한 경우 웹 표준과 일치합니다. HTML 표준에서는 맞춤 요소 이름에 하이픈이 포함되어야 합니다.

모든 Lightning 웹 구성 요소에는 폴더 이름과 하이픈으로 구분된 네임스페이스가 있으므로 구성 요소 이름은 HTML 표준을 충족합니다. 예를 들어 폴더 이름이 포함된 Lightning 웹 구성 요소의 마크업은 다음과 같습니다.위젯기본 네임스페이스는 c입니다 .<c-widget>

그러나 Salesforce 플랫폼에서는 구성 요소 폴더 또는 파일 이름에 하이픈을 허용하지 않습니다. 구성 요소 이름에 "mycomComponent"와 같이 두 개 이상의 단어가 있으면 어떻게 되나요? 폴더와 파일의 이름을 지정할 수 없습니다내 구성 요소하지만 편리한 솔루션이 있습니다.

Camel Case를 사용하여 구성 요소 이름 지정myComponent. Camel Case 구성 요소 폴더 이름은 마크업의 kebab-case에 매핑됩니다. 마크업에서 폴더 이름으로 구성 요소를 참조하려면myComponent, 사용하세요 .<c-my-component>

 

<-- parent.html --> <template> <c-my-component></c-my-component> </template>

구성 요소 폴더 이름에 밑줄을 사용할 수 있지만 마크업의 케밥 대소문자에 매핑되지는 않습니다. 네임스페이스가 하이픈으로 구분되어 있으므로 이름은 합법적이지만 대부분의 사용자는 웹 구성 요소 이름에 밑줄 대신 하이픈을 기대합니다. 예를 들어 이 구성요소의 마크업은 다음을 참조합니다.내_구성요소요소. 합법적이지만 조금 이상해 보입니다.

 

<!-- parent.html --> <template> <c-my_component></c-my_component> </template>