[TIL]20220823

• 프리온보딩 복습(1주차 목) ⇒ React성능 향상 한 번 읽고 전에 내용들 복습하면 정리
• next js 공식문서 link확인
• clubstudy 프로젝트 메인페이지 작업 중
• react 공식문서 React로 생각하기 복습
• position에 대해서 공부

nvm은 node js 버전 매니저로 시스템에 여러 개의 nodejs 를 설치하고 사용할 버전을 쉽게 전환할 수록 도와주는 shell scrip이다.

@font-face지시어는 웹 브라우저에게 서체 이름과 다운받을 위치를 알려줍니다.

CSS의 position 속성으로 HTML 요소 배치하기

프로젝트 생각

• header: position fixed

  • globol body에 padding-top대신에 layout만들어서 header밑에 친구 요소에 padding-top주기
  • ▶scroll 이벤트 써서 어떻게 header 밑에 친구 요소에게 scrolltop값을 넘겨줄지 생각하자
  • 스크롤 해서 위에 올리면 그대로 header에 노출되는데 backgroud를 설정해서 안 비치게 하기
  • scroll 이벤트시 홈페이지 로고 작아지면서 padding 값도 작아져야 하는데 이거 생각하기

• 카드 컴포넌트 제작

  • 목 데이터 작업
  • 카드 레이아웃 보기

emotion의 themes css props 작성법

const themes = {
  primary: css`
    background: #20c997;
    color: white;
    &:hover {
      background: #38d9a9;
    }
    &:active {
      background: #12b886;
    }
  `,
  secondary: css`
    background: #e9ecef;
    color: #343a40;
    &:hover {
      background: #f1f3f5;
    }
    &:active {
      background: #dee2e6;
    }
  `,
  tertiary: css`
    background: none;
    color: #20c997;
    &:hover {
      background: #e6fcf5;
    }
    &:active {
      background: #c3fae8;
    }
  `
};

Storybook을 활용하여 본격적으로 디자인 시스템 구축하기

[함수형 컴포넌트를 선호하는 이유]

요즘은 많은 개발자들이 클래스형 컴포넌트보다 함수형 컴포넌트+Hook을 사용한다.

클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖고 있는 반면,

함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어 함수형 컴포넌트+Hook을 주로 사용한다고 한다.

먼저 컴포넌트의 기능을 한 번 짚어보고 가도록 하자. 컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수도 있다.

함수형 컴포넌트와 클래스형 컴포넌트의 차이

useState 과도하게 사용하지 않기

state 결정법

1. 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
2. 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
3. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.