728x90 반응형 공부하기49 [stencil+html] <picture>의 사용 의 사용법은 다음과 같다 [stencil] [html] stencil 에서 사용이 html과 다른 점이 있다면 srcset 을 srcSet으로 표기한다는 점입니다. picture 태그사용의 이점 태그는 태그를 이용한 반응형 이미지를 사용함으로써 대역폭을 절약하고 페이지 로드 시간 단축을 위한 목적으로 사용합니다. 2024. 1. 17. [stencil]Boolean Props 유형이 있는 Stencil 구성 요소의 속성은 boolean다음과 같이 선언될 수 있습니다. import { Component, Prop, h } from '@stencil/core'; @Component({ tag: 'ts-list-item', }) export class TsListItem { @Prop() isComplete: boolean; } HTML에서 이 버전을 사용하려면 / ts-list-item문자열을 구성 요소에 전달합니다."true""false" ts-list-itemTSX에서 이 버전을 사용하려면 중괄호로 묶인 true/를 사용합니다.false // Set isComplete to 'true' // Set isComplete to 'false' booleanStencil이 주목할 가.. 2024. 1. 12. [stencil] 에서 css연결하는 방법 stencil 에서 css연결하는 방법 단일 css가져오기 import { Component } from '@stencil/core'; @Component({ tag: 'ts-list', styleUrl: './ts-list.css', }) export class TsList { // implementation omitted } 여러 css를 가져오기 import { Component } from '@stencil/core'; @Component({ tag: 'ts-list', styleUrls: ['./ts-list-1.css', './ts-list-2.css'] }) export class TsList { // implementation omitted } 모드사용 import { Component }.. 2024. 1. 12. 노드 버전 관리를 위해 NVM 사용하기 설치된 nodejs가 두개 이상을 각각의 프로젝트에 사용하고 있다면 버전을 변경하여 사용할 수 있습니다. nvm을 사용하시면 됩니다. 먼저 설치를 하셔야겠지요? 1.homebrew 설치 $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. nvm 설치 $ brew install nvm 3. 설치확인 command -v nvm $ nvm --version 4. 환경변수 등록 # 터미널이 bash라면 /.bash_profile에 zsh라면 /.zshrc에 환경변수를 등록 합니다. (걍 모르겠으면 둘다 처리) export NVM_DIR="$HOME/.nvm" [ -s "/usr/loc.. 2024. 1. 8. Yarn 설치 homebrew를 아직 설치 전이라면 아래의 명령어로 설치를 완료합니다. $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" homebrew 이용하여 yarn 설치하는 명령어 입니다. $ brew install yarn Npm 이용을 이용하신다면 다음과 같습니다. $ npm install -g yarn 정상적으로 설치가 되었는지 확인하기 위해 다음과 같이 버전 확인을 합니다. $ yarn --version 설치 후 전역 사용에 문제가 있다면 Path 설정를 설정해 주시면 됩니다. $ export PATH="$PATH:/opt/yarn-[version]/bin" 추가로 yarn 캐쉬삭.. 2024. 1. 8. Node.js 설치하기 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS로 좌측의 안정화 버전으로 다운받아 설치합니다 인스톨 시작 다음 버튼을 눌러 주시고요 다음과 같이 동이하기를 체크하여 다음버튼을 눌러주십니다. nodejs를 설치할 폴더를 지정하여 주시고 역시 다음 버튼을 눌러주세요. 런타임버전으로 선택후 다음버튼을 눌렀습니다. 체크하지 않고 다음 버전을 눌러주었습니다. 최종적으로 인스톨버튼을 클릭하여 설치를 완료하십니다. FINISH로 설치를 완료합니다. 설치가 잘 되었는지 확인을 위해서 명령창을 열고 "node -v" 명령으로 버전정보를 확인해 봅니다. 아래는 .. 2024. 1. 8. 특수문자 ✿ ☺ ☻ ☹ ☼ ☂ ☃ ⌇ ⚛ ⌨ ✆ ☎ ⌘ ⌥ ⇧ ↩ ✞ ✡ ☭ ← → ↑ ↓ ➫ ⬇ ⬆ ☮ ✔ ★ ☆ ♺ ⚑ ⚐ ✉ ✄ ⌲ ✈ ♦ ♣ ♠ ♥ ❤ ♡ ♪ ♩ ♫ ♬ ♯ ♀ ♂ ⚢ ⚣ ❑ ❒ ◈ ◐ ◑ ✖ ∞ « » ‹ › “ ” ‘ ’ „ ‚ – — | ⁄ \ [ ] { } § ¶ ¡ ¿ ‽ ⁂ ※ ± × ~ ≈ ÷ ≠ π † ‡ ¥ € $ ¢ £ ß © ® @ ™ ° ‰ … · • ● ▲ ▼ ◀ ▶ ◢ ◣ ◥ ◤ △ ▽ ◿ ◺ ◹ ◸ ▴ ▾ ◂ ▸ ▵ ▿ ◃ ▹ ◁ ▷ ◅ ▻ ◬ ⟁ ⧋ ⧊ ⊿ ∆ ∇ ◭ ◮ ⧩ ⧨ ⌔ ⟐ ◇ ◆ ◈ ⬖ ⬗ ⬘ ⬙ ⬠ ⬡ ⎔ ⋄ ◊ ▢ ⊞ ⊡ ⊟ ⊠ ▣ ▤ ▥ ▦ ⬚ ▧ ▨ ▩ ⬓ ◧ ⬒ ◨ ◩ ◪ ⬔ ⬕ ❏ ❐ ❑ ❒ ⧈ ◰ ◱ ◳ ◲ ◫ ⧇ ⧅ ⧄ ⍁ ⍂ ⟡ .. 2024. 1. 4. [Stencil]토글가능한 Expander UI만들기 Watch 를 이용해 isOpen의 값 변화를 주어 Expander 를 만들어 보겠습니다. button 마크업에 onclick 이벤트로 expanderClick 함수를 호출하였고, isOpen의 값을 변경하였습니다. Watch에서 값 변경을 인식하여 현재 컴포넌트의 상태값을 변경해주는 로직입니다. import { Component, Host, h, Prop, Watch, Element } from '@stencil/core'; @Component({ tag: 'td-expander', styleUrl: 'td-expander.less', shadow: true, }) export class TdExpander { @Prop() itemType: string; @Prop() panelId: string; .. 2024. 1. 4. [Stencil]컴포넌트 구성 셋 컴포넌트 사용 class 값과 text를 인자로 받는 간단한 컴포넌트를 생성해봅시다. 인자 값을 받기 위해 스텐실에 내장된 Prop를 임포트해주고, tdList 클래스 내부에 text와 class를 문자열로 선언해줍니다. render되는 마크업에 Prop로 선언된 요소를 this를 붙여 배치 시킵니다. import { Component,h,Prop } from '@stencil/core'; @Component({ tag: 'td-list', styleUrl: './td-list.css', shadow: true }) export class tdList { @Prop() text: string ; @Prop() class: string ; render() { return ( {this.text} ); } .. 2024. 1. 3. [Stencil]Web components API Web components API Stencil에서 제공하는 전체 API는 데코레이터, 수명 주기 후크 및 렌더링 방법 집합으로 압축될 수 있습니다. 데코레이터 데코레이터는 구성 요소에 대한 모든 메타데이터, 구성 요소가 노출할 수 있는 속성, 특성 및 메서드, 내보낼 수 있는 이벤트 또는 관련 스타일시트를 수집하기 위해 스텐실에서 사용하는 순수한 컴파일러 시간 구성입니다. 모든 메타데이터가 수집되면 모든 데코레이터가 출력에서 제거되므로 런타임 오버헤드가 발생하지 않습니다. @Component()는 새로운 웹 구성요소를 선언합니다. @Prop()은 노출된 속성/속성을 선언합니다. @State()는 구성 요소의 내부 상태를 선언합니다. @Watch()는 속성이나 상태가 변경될 때 실행되는 후크를 선언.. 2024. 1. 3. web components :part() part의 값을 정의하여 사용하면 CSS가 ::part 요소를 통해 쉐도우 트리의 특정 요소를 선택하고 스타일을 지정할 수 있습니다. 하지만 사파리에서 호환이 어렵다는 문제가 있어요(exportparts) css는 다음과 같이 사용하고 :host{ &::part(part){ color:red; } } 웹컴포넌트에서 사용은 파트 버튼 아래와 같이 exportparts도 사용할 수 있지만 사파리에서 적용이 안됩니다. 쉐도우 돔 하위 요소의 스타일을 지정할 때 사용하지만 호환이 안된다는 단점이 있어서 사용을 안하고 있어요 파트 버튼 2024. 1. 3. Webcomponents 에서 css사용 host가 open이라는 속성을 가질때 다음과 같이 정의한다. :host([open]) { display:block } host가 main이라는 클래스를 가지고, 내부 slot에 배치된 slot이라는 클래스개체의 스타일을 정의하고 싶을때는 다음과 같습니다. :host(.main){ background: blue; ::slotted(.slot){ background: red; } } host 내부 콘텍스트가 div에 스타일을 적용하고 싶을때는 다음과 같습니다. :host-context(div){ color:yellow; } 참 쉽죠? 2024. 1. 2. 이전 1 2 3 4 5 다음 728x90 반응형
