이벤트 버블링
자식에서 부모 태그로 이벤트를 전파하는 것.
**전파: 이벤트를 클릭했을 때 다른 함수까지 이벤트가 전달 되는 것을 말한다.
의도치 않은 결과를 가진 전파의 경우 currentTarget으로 이벤트 버블링 문제를 해결할 수 있다.
currentTarget을 이용하면 이벤트도 정상적으로 전파가 되고 id값도 전파가 되기 때문에 원하는 결과를 얻어낼 수 있고 cT가 적용된 태그의 id를 기준으로 요소가 적용되기에 cT 태그에 한번만 설정을 해주면 된다.
라이브러리를 사용하는 이유
- 시간절약
- 버그 최소화
다양한 브라우저, 디바이스 사이즈 등 서로 다른 사용자 환경이나 기능에 따른 검증을 혼자서는 해결하기 어렵기 때문에 안정성을 위해 여러명이서 제작하고 여러 사용자들에 의해 검증된 라이브러리를 사용한다.
대표적 라이브러리로는 'Ant-design'과 'material UI(MUI)'가 있다.
++ 라이브러리: 메뉴바 혹은 캐러셀 같은 하나의 도구
++ 프레임워크: 라이브러리의 집합
Ant-design의 경우 터미널에서
yarn add antd로 설치를 진행할 수 있고 사이트에 있는 아이콘을 사용하기 위해서는
yarn add @ant-design/icons로 라이브러리를 추가설치 해주어야 한다.
불러온 아이콘을 emotion을 통해 관리하기
import {AppleOutlined} from '@ant-design/icons'
import styled from '@emotion/styled'
const MyIcon = styled(AppleOutlined)`
font-size: 100px;
color: black;
`emotion/styled 를 import하고 기존 emotion과 동일하게 지정하되 styled뒤에 .div 등 이 아니라 괄호안에 해당 이모티콘의 이름을 넣어준다
스코프-체인
함수 안에서 선언된 변수의 값이 자신이 포함된 함수(중괄호)안에 없을 경우 그 상위 중괄호로 올라가서 자신의 변수명과 동일한 값을 찾아오는 것을 말한다.
단, 하위 함수(중괄호)로 내려가지는 않는다.
youtube 동영상 넣기
yarn add react-player터미널에서 위 명령어를 통해 설치를 해주고 상단에
import ReactPlayer from 'react-player' 임포트 해주면 사용이 가능하고
return(
<ReactPlayer
url='https://youtu.be/stWO6rfmfXg'
width={800}
height={800}
/>
)이런 식으로 첨부하고자 하는 url주소를 기입해주면 사용이 가능하며 크기 또한 지정이 가능하다.
