[TIL] 2023-01-29

• 리액트에 대한 기본 세팅, 동작 원리에 대해서 하나씩 살펴봤고, 리액트 하면 뷰(view), 뷰하면 CSS 라서 리액트에서의 CSS 스타일에 대해 공부함 (기본서 목차 순 😅)

  • 부트스트랩 CSS 프레임 워크 맛보기
    프로젝트 기획을 하고, 기술 스택을 정하면서 시간을 절약하는 느낌으로 부트스트랩 CSS 프레임 워크를 사용하면 어떨까하는 의견들이 나왔지만, 당시에는 사용하지 않았다. (직접 해보는게...🤪)
    
    

  • CSS 파일 적용

    • <link>태그의 href 속성에 설정
    • import 문 (웹펙)
    • @import
    • style 속성 (인라인)
    • Node.js 패키지 방식 사용
    
    

  • CSS 기본 구문

  • 선택자 => 전체 선택자(*), 유형 선택자(HTML 태그 이름), 클래스 선택자(.클래스명)

    
    

  • 타입스크립트에서 매개변수 이름 바꾸기
    매개변수 이름 뒤에 콜론(:)을 붙이는 방식으로 변경 가능

  • DetailedHTMLProps 와 HTMLAttributes 타입
    한꺼번에 특정 HTML 요소의 속성들을 추가할 수 있게 해주는 타입

    예시)

import type {FC, DetailedHTMLProps, HTMLAttributes} from 'react'

	type ReactSpanProps = DetailedHTMLProps<HTMLAttributs<HTMLSpanElement>, HTMLSpanElement>