반응형 개발/소소한 실습14 눈내려요~~ 니콜라스 강의 보고 따라했다. 코드 const body = document.querySelector('body'); const MIN_DURATION = 10; function makeSnowflake() { const snowflake = document.createElement('div'); const delay = Math.random() * 10; const initialOpacity = Math.random(); const duration = Math.random() * 20 + MIN_DURATION; snowflake.classList.add('snowflake'); snowflake.style.left = `${Math.round(Math.random() * window.screen.wid.. 2022. 12. 29. 벽돌깨기 js로 게임을 만들 수 있다고 해서 그냥 이것저것 검색하는데 mdn에 벽돌깨기 튜토리얼이 있었다. canvas+바닐라js로 만들었다. https://ryu9663.github.io/break-brick-game/ 원리 공이 벽돌을 깨고 패달에 부딪히는 것을 감지하는 것은, map의 영역을 기준으로 한다. 패달의 이동 = 패달을 다시 색칠함 공의 이동 = 공을 다시 색칠함 10ms마다 공,패달,벽돌을 그림 리액트로 전환하는데 상당한 노력이 들 것 같음. + 초딩때 하던 벽돌게임은 어케만든거지 대단하다. + 바닐라js로 만드니까 코드가 엄청나게 많고 길어지고 정리가 안된다. 왜 webpack으로 번들링을 하게 되었는지 몸소 느낌 2022. 12. 27. 그냥 버튼 만들기 그냥 만들어보았다 // 하이 버튼 import styled from "styled-components"; function Button1() { return ( 버튼1 하이 ); } export default Button1; const Button = styled.div` .button { border-radius: 4px; background-color: #f4511e; border: none; color: #ffffff; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .button span { cursor: pointer; display.. 2022. 10. 22. useToast만들기 맨날 남이 만들어준거 쓰다가 그냥 만들어보았다 디자인은 대충했다 ㅎ 빨간토스트가 nagative, 파란토스트가 positive이다. 빨강토스트는 1초후, 파랑토스트는 3초후 사라지게 하였다. 코드 // App.tsx import useToast from "./hooks/useToast"; function App() { const { showToast } = useToast(); return ( showToast(false, "bye", 1000)}>토스트 빨강 showToast(true, "hi", 3000)}>토스트 파랑 ... ); } export default App; type, string(내용), time(몇초후 사라질지)를 매개변수로 받는 showToast 함수를 리턴한다. /// useToa.. 2022. 10. 13. 이전 1 2 3 4 다음 반응형
