3. 리액트 본격적으로 살펴보기 3-1. CRA로 첫 리액트 프로젝트 세팅하기 1. node로 yarn 설치하기 node -v # node 버전을 확인해봅니다. npm -v # npm은 노드의 패키지 매니저예요. 이걸 통해서 누군가 만들어 둔 패키지를 설치하고 사용할 수 있어요! npm install -g yarn # -g는 글로벌로 설치하겠다!고 알려주는 옵션입니다. yarn을 글로벌로 설치해봅시다! 2. yarn으로 create-react-app 설치하기 yarn -v # yarn 버전을 확인해봅니다. # global은 글로벌 설치 옵션입니다. # yarn은 npm과 명령어가 조금 다른데요, install 대신 add를 씁니다. # 이런 명령어의 차이는 공식문서를 통해 확인해도 좋고, yarn --h..

4-1. Keyframes keyframes는 styled-components 안에 이미 들어있음. 웹에서 애니메이션을 구현할 때는 transition과 animation이라는 스타일 속성을 많이 사용. - transition : 1. 단순한 앨리먼트 상태변화에 쓰기 좋음. 2. 효과가 일정한 시간(duration)에 걸쳐 일어남. 3. 스스로 작동할 수 없기 때문에 onClick 함수나 hover와 함께 쓰임. - animation : 1. 다이나믹한 효과를 주는데 쓰기 좋음.(transition에 비해 훨씬 구현할 수 있는 요소가 다양함.) 2. 이벤트 없이 스스로 시작, 정지, 반복을 제어할 수 있음. 3. @keyframes로 이루어져 있음.(keyframes는 animation에서 사용하는 속성..