2.3 Your First Express Server 깃허브관리 - .gitignore 만들기 우선 우리의 프로젝트를 깃허브에서 관리하기 위해서 깃허브 홈페이지에서 repositiory를 만들어준다. 그 다음 node_modules 파일 들이 깃허브에서 전부 관리 대상이 되려고 하니까 이것을 ignore 해주어야 한다. (내가 만든 코드만 업로드하고 싶기 때문) 그래서 비쥬얼 스튜디오 코드에서 .gitignore를 만들고 그 안에 node_modules 라고 치고 저장하면 깃허브에서 관리 대상이 300몇개에서 4개로 예쁘게 사라진다. gitignore의 표준 같은게 있는데 https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore n..

[2.0] What is a Server 1. 물리적으로 늘 켜져있는 컴퓨터 2. 인터넷에 연결된 접속 요청에 응답하는 컴퓨터 - 서버란 접속을 받아주는 무언가이다. [2.1] What is Express Express란 무엇인가? - Express.js는 node.js에서 작동하는 프레임워크이다. - 즉, 휼륭한 사람들이 미리 만들어놔서 우리가 원하는 걸 쉽고 빠르게 해낼 수 있게 만들어둔 것을 말한다. - 우리의 목표가 node.js로 서버를 만드는 거라면 수작업으로 좀 해줄게 있다. - 우리의 목표가 node.js로 서버를 만드는거라면 Express를 이용할 수 있다. - Express를 사용하는 이유: 매우 유명하고 매우 안정적, 새로운 버전이 자주 나오지 않기 때문에 더 할게 별로 없음 [2.2..

이미 canvas에는 오른쪽 마우스를 누르고 이미지를 저장할 수 있다. ctx.fillStyle = "white"; ctx.fillRect(0,0,canvas.width, canvas.height); //캔버스 처음의 배경 색 지정, 이걸 안해주면 사진 저장했을 때 배경이 투명하게 저장이 된다. 그런데, css로는 일단 기본 배경이 흰색으로 보이니까 그 상태에서 뭔가 그리고 저장을 하면 흰색배경에 저장이 될 것이라고 예상했는데, javascript에서 다뤄지는 부분은 다르기 때문에 투명한 배경으로 저장이 되는 것을 볼 수 있다. 그래서 위의 코드를 윗부분에 추가를 해주어야 한다. 오른쪽 마우스를 눌렀을 때 사진을 저장하고 싶지 않게 할 수도 있을 것이다. 그런 경우에는 oncontextmenu라는 이벤트..

ctx.fillStyle = "yellow"; ctx.fillRect(50,20,100,49); //x,y,width,height .fillRect(x,y,width,height)를 통해서 채워진 사각형을 그릴 수 있다. 아까 브러쉬(그냥 선)의 색을 strokeStyle으로 지정했다면 Filling은 fillStyle을 사용하면 된다. ctx.fillStyle = "yellow"; ctx.fillRect(50,20,100,49); //x,y,width,height ctx.fillStyle = "purple"; ctx.fillRect(80,10,100,49); Canvas는 위에서부터 아래로 내려오면서 실행이 되므로 Fillstyle을 지정한 다음에 fillRect로 그리고, 다른 fillStyle을 지..

1. brush size const range = document.getElementById("jsRange"); 브러쉬 사이즈를 조정할 range를 자바스크립트에서 가져온다. if(range){ range.addEventListener("input", handleRangeChange) } 항상 이렇게 확인을 해주는 것이 좋다. (range가 존재할 때) Range에 이벤트를 추가해주는데, range는 input에 반응하기 때문에 저렇게 작성해준다.(onchange도 있긴 하던데) function handleRangeChange(event){ console.log(event); } 이렇게 해서 event를 확인해보면 event.target안에 value가 있는 것을 확인할 수 있다. function ha..

Html 태그에서 각 컬러들에 class를 추가한다. (jsColor) const colors = document.getElementsByClassName("jsColor"); 이것을 자바스크립트에서 가져오고 console.log(colors)해보면 배열이 아니라 HTMLCollection인 것을 알 수가 있는데, HTMLCollection은 HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다. console.log(Array.from(colors)); 그러므로 HTML Collection을 array로 바꿔주는 코드를 넣는다. Array.from()은 유사배열을 배열처럼 만들어주는 것이다. Array.from(c..