노마드코더(51)
-
[유튜브 클론코딩] 2.5 ES6 on NodeJS using Babel
2.5 ES6 on NodeJS using Babel Babel이란? - 최신의 Javascript 코드를 무난한 예전의 Javascript 코드로 변환해주는 것 - 우리는 Babel을 node에서 쓸 것이기 때문에 많은 방법 중 Babel Node를 사용할 것이다. - 설치 방법 VS Code의 콘솔에서 npm install @babel/node 로 설치한다. - babel의 stage 또 babel이 갖고 있는게 있는데 많은 stage가 있다. 만약 stage3의 Babel을 이용한다면 브라우저한테 절반 정도 받아들여질 것이다. 만약 stage0을 이용한다면 완전 실험적인 걸 얻게 될 것이다.(리스크가 크다는 말인 것 같음) 우리가 사용할 것은 env이다. (가장 최신이긴 한데 실험적인 수준까지는 아..
2021.02.15 -
[유튜브 클론코딩] 2.4 Handling Routes with Express
2.4 Handling Routes with Express GET / POST 브라우저에서 localhost:4000에 접속했을 때 보이는 Cannot GET / 을 보면 GET이 대문자로 표시되어 있다. GET 어떠한 정보를 가져와서 조회하기 위해서 사용되는 방식 예) 웹사이트에 접속하려고 하면 youtube.com과 같은 URL을 적는다. 이때 브라우저가 GET Method를 통해 페이지를 읽어온다. POST 데이터를 서버로 제출하여 추가 또는 수정하기 위해서 사용하는 방식 예) 웹 사이트에 로그인 할 때에는 POST method를 통해서 데이터를 서버로 전송한다. GET request로는 정보를 전달할 수가 없고 POST request로는 정보를 전달할 수 있다. 예를 들어, 영상에 코멘트를 단다고..
2021.02.15 -
[유튜브 클론코딩] 2.3 Your First Express Server
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..
2021.02.15 -
[유튜브 클론코딩] 2.0 ~ 2.2
[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..
2021.02.15 -
[바닐라js로 그림판 만들기] Brush Size & fill color
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..
2021.01.29 -
[바닐라js로 그림판 만들기] Changing Color
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..
2021.01.28