펑션과 코딩의 행방불명

어제 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 느낌이 들었다. 그래서 클라이언트에서 쓰이는 쿠키(?)로 이해하였다. 그래서 좀 간단하게 끝낼수 있었다. 드디어 마지막 미션 요놈..

학교에서 3학년 형이 주도하는 웹 스터디에 참가하였다. 나는 백엔드 스터디라서 Node.js에 Express 프레임 워크를 이용하여 진행하였다. 그중 몇가지를 올려 볼까 한다. function sayHi() { console.log('hello, world!'); } setTimeout(sayHi, 1000); var timer=setInterval(() => { console.log('hello, world!'); }, 5000); 사실 5초후 hello world 한번이고, 그 다음부터 1초에 한번씩 hello world인데 1초후에 hello world 한번, 그 다음부터 5초 간격으로 만들었다. 여기 함수 중에서 setInterval 함수가 매우 눈에 띄었다. C# 할때 너무 많이 봐서 너무 반가..

오늘 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(..

나는 이번 방학때 BE, FE을 공부하자라는 다짐으로 NodeJS를 시작하였다. 예전에 JS를 좀 하고, 다른 언어와 문법이 비슷해서 빠르게 기본을 배우고 서버를 만드는 과정을 시작하였다. '생활 코딩'에 있는 CRUD(Create Read Update Delete), 즉 글 생성, 읽음, 수정, 삭제 기능을 구현하는 웹 서버를 만들었다. CREATE 먼저 "/"로 들어오면 위와 같이 간단한 UI를 만들었다. Create버튼은 글 생성, 밑에 li태그는 생성됐던 글 목록이다. 글을 생성하는 페이지로 가면 "/cerate" 경로에 요롷게 글을 쓸수 있는 기본 틀만 만들어져있다. 글을 쓰고 제출 버튼을 누르면 "/process_create"로 이동하면서 POST 방식으로 내가 입력한게 전달돼고 파일이 생성되..