🎄 성장일지 3.2

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

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

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

🔑 오늘의 키워드

컴포넌트 합성하여 더 큰 컴포넌트 만들기(feat. TS, Vanilla Extract)

먼저 아래와 같이 Base 역할을 해주는 component를 만들어준다. 이 component는 전달받은 html string을 element 형태로 갖고 있고 부모 element의 원하는 위치에 스스로를 자식 element로 넣을 수 있는 attachTo 메서드를 갖고 있다.

export interface Base {
  attachTo(parent: HTMLElement, position?: InsertPosition): void;
}

export class BaseComponent<T extends HTMLElement> implements Base {
  protected readonly element: T;
  constructor(htmlString: string) {
    const template = document.createElement('template');
    template.innerHTML = htmlString;
    this.element = template.content.firstElementChild! as T;
  }

  attachTo(parent: HTMLElement, position: InsertPosition = 'afterbegin') {
    parent.insertAdjacentElement(position, this.element);
  }
}

위의 Base를 바탕으로 TextComponent를 구현했다.

import { BaseComponent } from '../Base';
import { TextComponentStyle } from '../../../style/components/basic/TextComponent.css';

export class TextComponent extends BaseComponent<HTMLSpanElement> {
  constructor(
    text: string,
    color: string = '',
    fontSize: string = '',
    fontWeight: string = '',
  ) {
    super(`<span class='${TextComponentStyle}'>${text}</span>`);
    this.element.style.color = color;
    this.element.style.fontSize = fontSize;
    this.element.style.fontWeight = fontWeight;
  }
}

이 때, vanilla extract으로 작성된 TextComponent.css.ts은 아래와 같다.

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

export const TextComponentStyle = style({
  display: 'block',
  color: 'var(--color-white)',
  fontSize: 'var(--font-md)',
  fontWeight: 'var(--weight-regular)',
  textAlign: 'center',
});

위의 변수를 component의 class에 전달해주면 해당 style들이 적용된다.<br/> 이제 간단한(정말 작은 단위의) 컴포넌트는 구성할 수 있게 되었다. 이를 바탕으로 각 component를 합성하여 더 큰 navbar-main component를 구현했다.

import { BaseComponent } from '../../Base';
import { ImageComponent } from '../../basic/ImageComponent';
import { SearchBarComponent } from './SearchBarComponent';
import { TwoRowTextComponent } from './TwoRowTextComponent';
import { SymbolTextComponent } from '../SymbolTextComponent';
import { NavBarMainComponentStyle } from '../../../../style/components/navbar/main/NavBarMainComponent.css';

export class NavBarMainComponent extends BaseComponent<HTMLElement> {
  constructor() {
    super(`<section class='${NavBarMainComponentStyle}'></section>`);
    const logo = new ImageComponent(
      'assets/nav-bar/logo.svg',
      '6rem',
      '2.5rem',
    );
    const shippingAddress = new TwoRowTextComponent('배송처', '대한민국');
    const searchBar = new SearchBarComponent();
    const nation = new SymbolTextComponent('assets/nav-bar/flag-un.svg', 'UN');
    const login = new TwoRowTextComponent('안녕하세요, 로그인', '계정 및 목록');
    const myPage = new TwoRowTextComponent('반품', '& 주문');
    const cart = new SymbolTextComponent('assets/nav-bar/cart.svg', '장바구니');
    cart.attachTo(this.element);
    myPage.attachTo(this.element);
    login.attachTo(this.element);
    nation.attachTo(this.element);
    searchBar.attachTo(this.element);
    shippingAddress.attachTo(this.element);
    logo.attachTo(this.element);
  }
}

솔직히 아직도 리펙토링해야할 요소들이 보이지만, 작은 컴포넌트를 만들고서 어떻게 합성할지 계속 고민했던지라... 너무 기뻤다 ㅠㅠㅠ 진짜 감격...<br/> NavBarMainComponent의 style은 아래와 같이 구현했다.

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

export const NavBarMainComponentStyle = style({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  width: '100%',
  height: '3.5rem',
  padding: '.5rem 1rem',
  backgroundColor: 'var(--color-black)',
});

이렇게 하나하나 컴포넌트를 만들어서 합성하는 중이다. 이제 다음 고비(?)는 event와 관련된 부분일텐데... 이게 또 고민이다. 이 event와 관련된 부분도 component로 만들어서 처리하는지, 아니면 그냥 이벤트가 발생하는 component에서 바로 처리하는지..! 아니면 event를 변수로 전달해서 처리하는 방법도 있을 것 같다! 이 부분은 천천히 이번주까지 전부 완료해야겠다.

참고

• 바닐라 익스트랙
• 바닐라 익스트랙 - Vite Scope Repro

📝 요약 및 하루 간단 회고

진짜 조금씩 아주 천천히 감이 온다..! 컴포넌트 기반 설계가 쉽지도 않고 지금 이게 제대로 가고 있는건지도 조금 헷갈리지만...! 너무 재미있다ㅋㅋㅋㅋㅋ 일단 확실히 component도 결국 함수인지라, 함수들을 만들어서 웹의 구조를 짜다보니 뭔가 재사용성과 분리도가 높아지는 기분이 들어서 너무 좋다. 그리고 점차 새로 접하는 것들도 공식문서를 통해서 내가 하나하나 찾아가며 구현하고 있기에 더 의미있다고 느껴진다.

오늘의 잘한 점

• 새로운 것(vanilla extract, ts component)을 시도한 것
• 공식문서에 어느정도 익숙해진 것
• 컴포넌트 합성!!! 오예~

오늘의 아쉬운 점

• 레이아웃쪽은 전부 다 완료하길 바랐는데 아주 다 하진 못했다!!!

undefined