[TIL] 0125

코드스피츠 스터디

Modern Box

Box-sizing

• width, height 값을 어떤 기준으로 잡을 것인가
• css 기본은 content-box 기준
• 나머지 padding이나 border의 사이즈는 추가되는 것
• 박스의 사이즈를 border와 padding을 합한 값으로 설정하려면
  box-sizing: border-box를 해줘야 함

Box-shadow

• 그림자는 프레그먼트 단계에서 그려진다
• 범위가 넓어진다고 다른 상자를 밀어내지 않는다
• border기준 안,밖 모두 그릴 수 있다
• 갯수에 제한이 없다(겹겹이 만들 수 있다)
  • 확장되는게 아니라 겹쳐지는 것
  • 그려지는 순서는 선언순서와 반대다
• border-box에 영향을 받는다(ex. border-radius)

outline

• box-shadow와 같은 위치에 그려진다(border 밖)
• 지오메트리 영향 x
• border-box에 영향을 안받았었는데 최근 border-radius에 영향받게 바뀜

Position

• offset
  • 지오메트리 단계에서 추상적인 명령의 계산이 모두 끝나고 나온 실제 값
  • 변경 불가
  • 우리가 내리는 명령(코드)은 희망사항일 뿐, 브라우저가 어떻게 계산하냐에 따라 offset값이 결정된다
• offset parent
  • offset을 계산할 때 가장 먼저 해야할 것 - 기준점(offset parent) 찾기
• relative
  • offset parent는 자기 자신
  • 주로 absolute의 offset parent로 만들기 위해 사용
  • relative는 모든 nomal-flow가 다 그려지고 난 다음에 해당 요소에 다시 적용된다
• absolute
  • relative, absolute적용 요소만 offset parent로 삼을 수 있음
  • 위치 값을 주지 않으면 기본 값은 돔 상의 부모가 기준이 됨(static과 같음)
  • 위치 값을 주었을 때 비로소 offsetparent찾아 기준으로 삼음
  • 상위 모든 요소가 offsetparent가 될 수 없다면 body가 된다
• fixed
  • offset parent는 브라우저

스토리북 공식문서 학습

const Template = args => <Task {...args} />;

export const Default = Template.bind({});
Default.args = {
  task: {
    id: '1',
    title: 'Test Task',
    state: 'TASK_INBOX',
    updatedAt: new Date(2018, 0, 1, 9, 0),
  },
};

• Template.bind({})는 함수의 복사본을 만드는 표준 JavaScript의 한 기법.
  => 스토리가 각각 다른 속성을 갖지만 동시에 동일한 구현을 할 수 있음.

• 스토리를 만들기 위해 함수를 내보내는데, 그 함수의 args속성에 props값들을 할당해주면 args를 인자로 받아 해당props가 포함된 컴포넌트를 반환한다. (args === props)

• props이 아닌 args로 받는 이유는 컨트롤러를 사용한 실시간 컴포넌트 업데이트 때문.

• 다른 story파일에서도 쓸 수 있도록 각 스토리를 export해준다.

• 데코레이터(Decorators)는 스토리에 임의의 래퍼(wrapper)를 제공하는 한 방법 -> provider도 적용할 수 있음

export default {
  component: TaskList,
  title: 'TaskList',
  decorators: [story => <div style={{ padding: '3rem' }}>{story()}</div>],
};

---

학습 자료

Presentational and Container Components
스토리북 공식 문서