1. Javascript Re-start! - 기본 꼭 알아야하는 자바스크립트 기본 문법을 짧게 요약했어요.😉 1-1. 변수와 상수 [변수 생성의 3단계] 선언 → 초기화 → 할당 - 선언: 실행 컨텍스트에 변수 객체를 등록 (스코프가 참조하는 대상이 되도록요!) - 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화됩니다!) - 할당: undefined로 초기화된 변수에 실제 값을 할당 - var : var는 가급적 사용하지 않는 게 좋아요! 1) var로 선언한 변수는 블록 스코프가 아니라 함수 수준 스포크를 가짐. 2) var는 선언과 초기화를 한 번에 함. 3) 재선언이 가능함. 4) 선언하기도 전에 사용할 수 있음.(호이스팅이 일어남) ..

5-2. 머테리얼 UI 사용하기 - 부트스트랩처럼 이미 다 만들어진 ui를 가져다 쓰기. 머테리얼 ui는 우리가 styled-components를 쓰던 것처럼 사용할 수 있어요. 공식 문서( https://material-ui.com/ )에서 어떻게 생겼는 지 보고 사용 해봅시다! - 머테리얼 UI 설치하기. yarn add @material-ui/core @material-ui/icons 이런식으로 속성 설정을 통하여 컴포넌트의 스타일을 커스텀할 수 있음. ex) variants를 text로 하냐, contained로 하냐, outlined으로 하냐에 따라 버튼의 생김새가 달라짐. Text Contained Outlined ex) color를 secondary, success, error 등 무엇으로 ..

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

3-1. Event Listener - 이벤트 리스너 : 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것. ( 대표적 : 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등 ) 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있지만, 이번에는 addEventListener를 통해 추가해볼 거임. 동그라미 안에 텍스트를 한 줄 넣고 텍스트를 넣어줄 건데 동그라미에 마우스를 올렸을 때 동그라미의 색이 변하고, 텍스트에 마우스를 올렸을 때 텍스의 색이 변하도록 할 거임. - App.js import React from "react"; import styled from "styled-components"; import Text from "./Text"; const Wrap = st..