🎄 성장일지 3.2

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 키워드 (1.0)<br/> 최대한 간단하게 정리, 추후에 보면서 스스로 설명<br/> 🍉 경험 위주로 (2.0)<br/> 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성<br/> ❄️ 정해진 템플릿에 맞춰서 (3.0)<br/> 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성<br/> (3.1) 230102부터 시작되는 학습에 관한 내용 추가<br/> (3.2) 230313부터 좀더 경험, 감정 위주의 내용도 담기!

🔑 오늘의 키워드

Vanilla Extract 그리고 TypeScript

• Sass, LESS와 같이 빌드 타임에 모든 스타일들이 발생하면서 동시에 타입스크립트와 함께 한다.
• Framework Agnostic, 즉 어떤 프레임워크에도 의존하지 않는다.
• 타입스크립트와 아주 좋은 조합이다!

// ButtonComponent.ts
import { BaseComponent } from '../Base';
import { ButtonComponentStyle } from '../../style/components/ButtonComponent.css';

export class ButtonComponent extends BaseComponent<HTMLElement> {
  constructor(content: string, type?: string) {
    super(
        `<button class='${ButtonComponentStyle}' type='${type}'>${content}</button>`,
    );

    if (this.element.getAttribute('type') === 'flexible') {
      this.element.style.width = '4rem';
    }
  }
}

// ButtonComponent.css.ts
import { style } from '@vanilla-extract/css';

export const ButtonComponentStyle = style({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  padding: '0px 10px',

  position: 'absolute',
  width: '10rem',
  height: '2rem',
  // left: '20px',
  // top: '20px',

  background:
      'linear-gradient(174.6deg, #FFFFFF 4.31%, #FED15F 50.01%, #FEBE30 95.71%)',

  border: '1px solid var(--color-yellow-300)',
  borderRadius: '4px',
  fontStyle: 'normal',
  fontWeight: '600',
  fontSize: '11px',
  lineHeight: '13px',
  textAlign: 'center',
  letterSpacing: '-0.06em',

  ':hover': {
    cursor: 'pointer',
  },
});

// vite.config.js
// 개인적으로 여기서 엄청 헤맸기 때문에 기억하기 위해 작성해두는 예시 코드
import { defineConfig } from 'vite';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  base: './', // This sets the base path for all generated URLs to './'
  // Other configuration options...
  plugins: [
    vanillaExtractPlugin(),
    viteStaticCopy({
      targets: [
        {
          src: 'assets',
          dest: '',
        },
      ],
    }),
  ],
});

• 위와 같이 Button 컴포넌트를 구현했다.
• css.ts에 원하는 스타일을 vanilla extract로 선언해주고 그 값을 export하여 랜더링할 html의 class에 할당한다.
• 처음 익히는 방법과 css 모듈이라서 계속 에러, 공식문서의 반복이었다.
• 특히나 처음으로 Vite 번들러와 함께 사용하다보니 더 익숙치 않았다.

참고

• 바닐라 익스트랙

📝 요약 및 하루 간단 회고

ts를 이용한 컴포넌트 구성과 vanilla extrach과의 무한 사투... 뭔가 진전이 많지 않아서 힘들었지만, 그래도 어떻게 vite로 번들링 시에 현재 html 파일에 src로 사용되지 않는 이미지 파일을 번들링 때 넘길 수 있는지, ts로 컴포넌트를 어떻게 나누고 작성하면 되는지 등을 새롭게 배웠다. 솔직히 아직 컴포넌트 단위로 나누고 설계하고 들어가는 것에 익숙치가 않다... 그러니까 더 해봐야한다!!!

오늘의 잘한 점

• 새로운 것(vanilla extract, ts component)을 시도한 것
• 열심히 공식문서 보면서 끙끙거려본 것
• 그리고 결국엔 해결한 것!!!

오늘의 아쉬운 점

• 뭔가 프로젝트 진도 자체는 많이 못 나간 것 (ㅠㅠ)

undefined