디벨로퍼 HYMN

• 2022 CSS Layout MasterClass
• 2.1Life Before Flexbox ~ 2.4 Rows and Columns

• React JS 마스터클래스
• 3.6Theme ~ 3.7 Recap
• 5.0 Setup

• 타입스크립트에서는 JS 에처럼styles.css를 import 하는 대신에 styled.d.ts 를 props 로 타입을 정해준 다음에 속성을 전달해준다
  • @types/react-router-dom 처럼 리액트에서 다운받아지지 않는 라이브러리는 @types 를 붙여서 npm i 하면 된다.
  • 버전 붙여서 다운받을 때 5.3.0에서 맨 뒤에 0일 때는 붙여서 다운로드 받는거 아니다
• flexbox 세계에는 2가지가 있다. (row, column) : 기본값은 row

→ main axis 위의 flex childern 위치를 변경하려면 justify-comtent 를 사용하면 된다.

→ cross axis 위의 flex item 위치를 변경하려면 align-item 을 사용하면 된다.

• display:flex; flexbox이전에는 inline-block 이 있어서 너비와 높이가 있는 객체가 옆으로 나란히 있을 수 있었지만 요상한 빈 공간이 있었다. 그러나 바로 객체에 적용하는 것이 아니라 그 객체(요소)의 바로 붙어있는 부모 요소에 적용하는 것이다.

타입스크립트에서 styled component 를 이용한 CSS 스타일링 하는 법

• interface 라는 object shape 를 변수 타입을 설명해줘야 props 로 전달이 가능하다.

• interface 를 선언해준 다음에 왜 styled component 를 선언해주는 형식을 또 만들어주고, 왜 Circle.tsx 를 만들어서 App.tsx 에 전달되는지에 대한 원리가 이해되지 않았다
• 왜 Circle.tsx 에는 interface 가 있는데, App.tsx 에는 interface 가 없는걸까??
• → 이미 완성되어있는 interface 를 갖다 쓰는거라서?

• 무언가 막힐 때는 노마드 댓글과 슬랙을 보면서 진행하는 습관을 기르자