January 26, 2024

240126(금)

🌱 성장일지 9.0

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

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

🌬️ (9.0)<대규모 개편> 정보 전달 목적이 아니다. 일기라고 생각하면 될 것 같다. 다만, 개발에 관련된 스토리나 감정, 생각을 담아서 하루를 돌아보는 형태로 작성하려 한다.(매일 작성할 부담 없이!)

🔨 개발관련

Storybook ts vs tsx 작성방법(feat. Storybook CSF)

회사에서 디자인 시스템을 기반으로 구현 중인 공통 컴포넌트 스토리를 작성 중, 좀더 동적인(?) 스토리를 작성하고 싶어서 익히게 되었다. 단순하게 예를 들면 스토리를 작성할 때, 기존 방식(ts 확장자)으로 작성하게 되면 컴포넌트의 action에 대한 스토리를 작성할 수 없다. 그래서 tsx 확장자로 작성하게 되면 action에 대한 스토리를 작성할 수 있게 된다. 또한, 스토리북 파일 내에서 또 컴포넌트를 정의해야하지만, react 훅을 사용해서 스토리를 작성할 수도 있게 된다.

ts 확장자로 작성할 때

import type { Meta, StoryObj } from '@storybook/react';

import Example from '.';

const meta: Meta<typeof Example> = {
  title: 'Component/Example',
  component: Example,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: {
        type: 'radio',
        options: ['large', 'medium', 'small'],
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    size: 'medium',
  },
};

tsx 확장자로 작성할 때

import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import Example from '.';

const meta: Meta<typeof Example> = {
  title: 'Component/Example',
  component: Example,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: {
        type: 'radio',
        options: ['large', 'medium', 'small'],
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  render: ({ size = 'large' }) => <Example size={size} />,
};

naver에서 시도한 UI 라이브러리 간 컴포넌트 공유

팀 커피챗 중에 흥미로운 시도로 이야기가 나와서 기록해둔다. 정말 간단한 개념을 말하면, 순순 JS로 작성한 컴포넌트를 React에서도 사용 가능하고 혹은 React 컴포넌트를 Vue에서도 사용 가능하게 해주는..? 컴포넌트 공유 프로젝트이다. 현재는 중단된 프로젝트인 것 같다. 자세한 건 깃헙에서 확인해보자.(아래 참고자료에 링크)

🥳 감정관련

아고고~~~ 그래도 조금씩 배우고 성장한다는 기분이 든다. 무엇보다 내가 관여한 프로젝트를 쓰는 사람들을 눈 앞에서 보고 개발할 수 있다는 점이 정말 좋은 것 같다. 재미있기도 하고!! 이런 한편으론 기술적으로 더 스스로 성장할 수 있도록 노력해야겠다는 생각이 든다.

Jayden { do: smite }