Dony :)

FE로 성장 중 🌱

2022.10.24(월)

TIL 🧐

아쉬워요 🙁

주말에 일정이 있어 자스스터디 준비를 별로 못해 오늘 했는데 생각 이상으로 양이 많아서 참여 못했다 결국ㅠㅠ
날짜를 미룰까하다.. 내일 프리온보딩 수업도 들어야해서 그냥 빠지기로 했다ㅠ 플젝이랑 병행할 생각에 걱정된다..

잘했어요 🙂

잘한거 없다 오늘ㅠ

2022.10.26(수)

TIL 🧐

주절주절 😗

as prop 만들기

오터가 저번에 as prop을 만들었던 내 글을 읽고 가지고 있던 PDF파일을 줬다. 50장이 넘는 파일인데 50장 전부 as prop을 구현하는 방법이 적혀있다.. 영어로.. 읽느라 🐶고생..
40몇장까지 거의 읽었는데 제네릭과 React,ComponentPropsWithoutRef를 실제 태그에서 사용하는 attribute만 받도록 할 수 있었다.(as로 div를 하고 src 속성을 쓰면 에러가 뜨도록!)

type TextProps<C extends React.ElementType> = {
  as?: C;
  color?: Rainbow | "black";
  children: React.ReactNode;
} & React.ComponentPropsWithoutRef<C>;

export const Text = <C extends React.ElementType = "span">({
  as,
  children,
  ...restProps
}: TextProps<C>) => {
  const Component = as || "span";
  return <Component {...restProps}>{children}</Component>;
};

table attribute width vs css width

Table 태그로 컴포넌트를 만들고 있는데 각 td 마다 넓이를 어떻게 지정헤줘야햐나 고민하다 colgroup의 col에 각각 width를 지정해주려고 생각했다. 그러다 table내의 width랑 css에서 지정하는 width랑 뭐가 다르지 찾아보다가 옛날 html에서 스타일을 주기 위해 만들어진 속성이나 현재는 데이터와 스타일의 분리를 하고자 하는 CSS의 철학 때문에 인라인으로 width는 잘 사용하지 않게 되었다고 한다. 결론은 똑같은 기능이긴 하나 요즘은 css로 분리한다.

Table 컴포넌트 고민

tr, th, td
  • tr, th, td 전부 따로 제공해야하나? th, td는 항상 tr에 들어가야하니까 tr은 사용자가 사용하지 않아도 들어가도록 해야하나?
    • tbody에는 tr이 여러줄 들어가야 되는 경우가 많다. 그럼 그 경우 사용자가 row 구분을 위해 감싸줄 태그가 필요하다.
    • ⇒ tr도 제공하는게 나을 듯.
폰트 css
  • table 안에서 폰트를 바꿔야할 경우 모두 Text로 감싸줘야하나? 그럼 th, td 안에 전부 span 등의 태그가 들어갈텐데..?

프리온보딩 환불

오늘 프리온보딩을 결국 환불 확정받았다.. 과제하느라 시간 쓴게 있고 수업 내용이 듣고 싶은게 있어 고민했으나.. 팀 과제가 아니고 8명씩 팀원인게 너무 많아 부담이였다.
8명이 다 가능한 시간이 다르다보니 시간 맞추는데만 힘이 들었다. 생각보다 시간을 많이 투자해야할거 같아 그냥 현재하고 있는 프로젝트에 집중하기로 했다.
과제는 하면서 배운게 있으니 그걸로 만족하쟈!

아쉬워요 🙁

내일 목요일이라 Table을 완성하려고 했는데 못했다ㅠ

잘했어요 🙂

as prop 결국 styled로 하기로 했지만 그래도 영어문서 열심히 읽었다..!

2022.10.27(목)

TIL 🧐

주절주절 😗

table width…

table에서 문장이 길어지면 … 처리를 해주려고 ellipsis 처리를 했는데 계속 적용되지 않고 지정해준 넓이보다 길어졌다.. overflow: hidden을 줘도 안되서 아주아주 한참 해매다가 max-width: 0을 주면 된다는걸 찾아서 적용했다..
table 레이아웃 잡기 너무 힘들다.ㅠ table로 코딩하던 사람들 대단..

아쉬워요 🙁

width 땜에 또 PR 못 보냄..

잘했어요 🙂

햄디와의 야간 작업..🙃

참고