솔미는 성장중

해당 작업을 하면서 새롭게 배운 부분 또는 정리해두면 좋을 내용만 자세히 작성하였다! (여기 코드만 보고는 전체를 이해하기는 힘들 것 같다. 풀 코드와 함께 보는 것을 추천한담.) 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..

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..

우선, 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..

1. vercel 설치 npm i -D vercel 2. package.json 파일에서 scripts 부분에 vercel 서버를 열 수 있는 명령어 추가 "vercel": "vercel dev" 3. vercel 서비스가 동작할 때 기존에 dev 명령어를 통해 동작하는 미리 만들어둔 프로젝트도 같이 동작하게 만들어주기 (vercel에 dev명령어를 알려줘야 한다) - vercel.json 파일 생성한 후 아래 코드 입력 { "devCommand": "npm run dev", "buildCommand": "npm run build" } 4. vercel에서 제공하는 serveless function 써보기 ( 별도로 서버를 직접 구축하지 않고도 그 기능을 함수 단위로 작성해서 바로 사용할 수 있는 것이 ..

보호되어 있는 글입니다.