펑션과 코딩의 행방불명

어제 Canvas 사용법을 배우다가 갑자기 물리엔진을 만들게 되었다. 단진자 물리엔진을 만들려고 했지만 물리2를 보면서 혼란이 와서 거기까지는 못했고 간단한 움직임 까지는 완성하였다. 먼저 main함수부터 살펴보자. display함수는 최적화 프레임(?)마다 render함수를 불러온다. 그리고 render함수는 원래있던 그림을 지우고 다시 그려주는 형식이다. Boxes라는 오브젝트를 담고있는 리스트에서 각각의 객체들에게 process로 움직임을 처리하고 그림을 그린다. Boxes에 담았던 그 클래스, Ball이다. 참조할때는 질량, 위치, 반지름, 속도, 색깔로 이루어져있다. 그리고 process함수는 그리고, 벽에 닿았으면 튕기게하고, 속도에 따라 움직이게 하는 함수가 있다. 사실 이게 전부다. 매우 ..

원래 어제 썼던 백엔드 스터디나 이번에 쓸 프론트엔드 스터디, 둘 중 하나만 선택해야하지만 나는 백엔드를 빨리 끝내서 둘다 할 수 있었다. 그래서 아무 생각 없이 프론트엔드 스터디에서 React를 하기로 결심했다. 난 처음에 useState와 useEffect가 HTTP의 응답코드를 전달하는 함수인줄 알았다. 한번 실행해보니까 내가 input에서 입력하면 변수의 값이 실시간으로 바뀌었다! 좀 연구해보다가 미션제출을 하였는데 Mission 15, 16이 Mission 14에서 다 만든 기능이라 14번 코드로 클리어 했다. localStorage는 사용해보니까 Web Cookie 느낌이 들었다. 그래서 클라이언트에서 쓰이는 쿠키(?)로 이해하였다. 그래서 좀 간단하게 끝낼수 있었다. 드디어 마지막 미션 요놈..

오늘 React를 공부하다가 갑자기 JS로 타이핑하는 연출을 만들고 싶어졌다! 그래서 바로 만들어 버렸다. const target = document.getElementById("change"); const text = "Hello World"; target.innerText = ""; //sleep 함수 function sleep(t) { return new Promise(resolve => setTimeout(resolve, t)); } (async function () { while (true) { for (var i = 0; i < text.length; i++) { target.innerText = text.slice(0, i + 1); await sleep(200); } await sleep(..