TIL: 2022-11-22

⚙️ 오늘 배운 주제

CSS keyframes, Canvas

🐹 오늘의 기분

어제 만든 반응형 웹에 애니메이션과 canvas를 넣는 작업을 했다. 많은 속성이 있는데 시간이 촉박해서 제대로 찾아보진 못하고 일단 갖다 썼다. 그래도 뭔가 작동이 되니까 신기했다. 아 근데 주말에 못 쉰게 아직도 여파가 커서 너무 힘들다 ... ㅠㅠ 내일은 또 솔로라 조금 편하게 할 수 있을 것 같은데 또 집중 못할 수도 있으니까 줌방 들어가서 공부해야겠다. 

🗝 키워드

keyframes, transition, canvas

🗣 스스로에게 설명

@keyframes

animation 속성

animation-name - 애니메이션의 이름
animation-duration - 기본값 0, 시간 속성으로 작성
animation-delay - 재생을 미룰 시간, ex) 3s, 3초 후에 애니메이션 시작

animation-direction

• normal: 재생이 끝나면 처음부터 다시 재생
• reverse: 역방향으로 재생
• alternate: 순방향과 역방향 돌아가며 재생
• alternate-reverse: 역방향과 순방향 돌아가며 재생

animation-iteration-count: 애니메이션이 몇 번 재생될지 적용, infinite - 무한재생
animation-play-state: 애니메이션의 재생 상태 설정, running, pause

animation-timing-function: 애니메이션의 진행 속도 설정

• linear
• ease (default)
• ease-in
• ease-out
• ease-in-out

animation-fill-mode 재생 전후의 스타일 지정

• none: 재생 중이 아닐 때 요소의 스타일을 유지
• forwards: 재생 중이 아닐 때 마지막 키프레임의 스타일 유지
• backwards: 재생 중이 아닐 때 첫 번째 키프레임 스타일 유지
• both: 재생 전에는 첫 번째 키프레임 스타일, 재생 후에는 마지막 키프레임 스타일 유지

Canvas

html에 canvas 태그로 불러올 수 있다. 

canvas는 돔 조작으로 작성되므로 id도 지정해주는 것이 좋다.

높이와 너비는 따로 지정해주지 않으면 300*150으로 렌더링된다.

canvas 태그에서는 픽셀 단위만 인식한다. vw, vh를 써도 픽셀로 인식한다.

<canvas id="canvas" width="200px" height="300px"></canvas>

픽셀은 절대 단위이므로 캔버스 크기를 유동적으로 변화시키고 싶다면 자바스크립트에서 설정해줄 수 있다.

const canvas = document.querySelector("#canvas");

// 상대 단위로 지정하거나
canvas.width = 70vw;
canvas.height = 40vh;

// 아예 창 크기에 맞춰지도록 설정할 수 있다
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

 

캔버스에 쓸 수 있는 메소드들이 잘 정리되어 있다. 현실적으로 다 알아둘 수는 없으니 필요할 때 찾아써야지

HTML Canvas Reference

 

이번 과제는 이렇게 구현했다.

이미지에 커서를 올리면 떨리는 애니메이션을 넣어보았고, 버튼을 누르면 캔버스가 모달처럼 띄워지도록 했다.

캔버스 안에서는 마우스 드래그로 그림을 그릴 수 있게 구현했다.

구글링으로 코드 찾아서 적절하게 여기저기에 버무렸다... 코드로 김장했음

 

❓ 막히는 or 막혔던 부분

리액트에서 Canvas를 쓰려면 useRef와 useEffect를 써야했다.

아직도 useRef와 useEffect는 익숙해지지가 않아서 이 과제로 둘을 써보는 연습을 할 수 있었다. 오히려 좋아(?)

 

🔍 공부가 더 필요한 부분

이미지 20개를 하드코딩해서 넣은 점이 아쉽다. 데이터 파일을 하나 만들어서 map으로 렌더링하도록 리팩토링해봐야겠다. 

 

이번 과제에 참고한 소중한 글들도 남겨둬야지

ReactJS 와 HTML canvas 사용하여 사진 위에 그림 그리기

canvas 태그 - 마우스로 그림 그리기