목록전체 글 (102)
솔미는 성장중
보호되어 있는 글입니다.
Canvas 태그를 사용해보자 (3) - 폭죽 파티클
해당 작업을 하면서 새롭게 배운 부분 또는 정리해두면 좋을 내용만 자세히 작성하였다! (여기 코드만 보고는 전체를 이해하기는 힘들 것 같다. 풀 코드와 함께 보는 것을 추천한담.) https://github.com/SOL-MI/Canvas-Practice/tree/main/2.%20%EB%B6%88%EA%BD%83%EB%86%80%EC%9D%B4 원 모양으로 폭죽 퍼지게 하기 // utils.js export const hypotenuse = (x, y) => { return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); }; // index.js createParticles(x, y, colorDeg) { const PARTICLE_NUM = 400; for (let i..
Canvas 태그를 사용해보자 (2) - gooey 효과를 적용한 무작위 파티클 만들기 !
index.html은 크게 수정할 게 없으니 1번 글을 참고하자! index.js에서 우선 arc를 이용해 원을 그려준다. const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio; const canvasWidth = 300; const canvasHeight = 300; canvas.style.width = canvasWidth + "px"; canvas.style.height = canvasHeight + "px"; canvas.width = canvasWidth * dpr; canvas.height = canvasHeight * dpr; c..
Canvas 태그를 사용해보자 (1) - 사이즈 조절하기
우선, index.html에 canvas 태그를 하나 만들어준다. (id는 나중에 css를 적용시키기 위해 넣어준거라 일단은 중요하지 X) 전체 코드를 먼저 보여주고, 자세한 설명은 아래에서 확인해주세요. // index.html // index.js const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); //그리는 도구 console.log(ctx); const dpr = window.devicePixelRatio; // dpr이 높을수록 선명한 그래픽 (dpr=1이면 1픽셀그리는데 하나 사용, dpr=2면 1px에 2*2로 구성) const canvasWidth = 300; const canvasHeig..
Recoil을 사용해보자
Recoil 이란? React application 을 위한 상태 관리 라이브러리 react application의 모든 구성 요소가 상태를 쉽게 공유할 수 있도록 전역 상태를 제공하며 Redux에 비해 최소화된다. 장점 1. redux를 사용할 때처럼 초반 설정을 위한 복잡한 BoilderPlate 코드를 작성하는 부분이 최소화됨 2. 공식 라이브러리는 아니지만 페이스북에서 만들어진 것이기에 리액트와 호환이 잘 됨 Recoil 설치 방법 1. 리액트 설치 npx create-react-app ./ 2. recoil 설치 npm install recoil --save 개념 Recoil Root recoil 상태를 사용하는 컴포넌트는 recoil root가 필요하다. 루트 컴포넌트에 넣는 것이 가장 좋다...