오늘 배운 것

• 컴포넌트 단위로 개발하기 -> 당위성: 재사용성up!up!

  • 를 도와주는 도구인 "storybook" 라이브러리
  • storybook: https://storybook.js.org/
  • "Storybook teaches tried-and-true patterns for component development"

• CSS in JS 방법론

  • CSS 변천사 : CSS - SASS - BEM - CSS in JS - Styled-Component
  • styled-component : https://styled-components.com/ "장: great for the maintenance"

• React_ useRef (왜 "레퍼"란 이름인지를 생각해보면...)

  • 자주는 아니지만, 리액트에서 DOM요소를 다뤄야 할 때
  • 예) focus를 옮긴다든지, 비디오플레이어 버튼으로 멈춘다든지, 오래된 라이브러리를 리액트에 써야할때, 리액트 방식으로 해결이 안될 경우

• sprint-react-custom-component

  • state를 스스로 정의할 수 있는지, 왜, 어떤, 어디에

  • state 이용한 조건부 렌더링 - 삼항연산자 false값 null일 경우
    {(조건) && true일때 결과}

  • clean-up을 사용하는 useEffect, 쓸데없이 메모리를 쓰지 않도록 https://ko.reactjs.org/docs/hooks-effect.html#effects-with-cleanup

  • state lifting up 상태끌어올리기

  • CSS: position: absolute / relative

  background: linear-gradient(to left, #8b8b8b 50%, #4000c7 50%);
   background-size: 200% 100%;
   background-position: right bottom;
   transition: all 0.5s ease;```
  

• 용어사전++ 버블링, <React.Fragment>의 short Syntax인 <></> 명칭은 fragment??

느낀 점

• @_@ 반복만이 살길이다
• 토이 - 콜백함수 찜찜해 - 어떻게 뚫지
• 다른 사람의 장점을 통해 배우기 기억, 어떻게 체화할 수 있을까
• 고마움을 표현하는 올바른? 효과적인? 적정한 선에 대하여
• 코딩의 재미를 깜빡하고 있었네, 다시 오지 못할 순간들

내일은

• sprint adv이어서
• 스프린트 다시풀기 이어서, 자료구조 이어서