Study/Web (27) 썸네일형 리스트형 [유튜브 클론 코딩] #1.0~3.0 서버에 접속하기까지의 준비 과정(NodeJS, NPM, Express, Babel, Nodemon) #1.3 What is NodeJS NodeJS 크롬 V8 자바스크립트 엔진으로 빌드 된 자바스크립트 런타임 브라우저 밖에서 돌아가는 자바스크립트(로컬 등) 자바스크립트를 브라우저에서 분리한 것 프로그래밍 언어. 백엔드도 가능! #1.4 What is NPM NPM 자바스크립트 언어를 위한 패키지 매니저 npm은 nodeJS와 상호작용할 수 있게 해줌. 둘이 같이 사용해야 함.ㅇㅇㅇㅇ nodeJS를 npm 없이 쓸 수 없기 때문에 nodeJS와 함께 설치됨 npm과 비슷한 패키지 매니저로 yarn이 있음 nodeJS 명령어 보단 npm 명령어를 주로 쓴다. 다른 사람이 만들어 둔 패키지 공유할 수 있음 #2.0 Your First NodeJS Project NodeJS project npm init 이 .. [유튜브 클론 코딩] #5.0~5.9 Templates(템플릿) #5.0 Returning HTML HTML을 리턴하는 법 #5.1 Configuring Pug 템플릿 엔진. 뷰 엔진. 작성하면 자동으로 html으로 변환해준다. 아래의 코드로 뷰 엔진을 pug로 설정할 수 있다. 뷰는 유저가 보는 대상을 말한다. app.set("view engine", "pug"); views 폴더 안에 pug 확장자 파일을 만들면 된다. 📂wetube |----📂node_modules |----📂src | |----📂views | |----📄home.pug | |----📂routers | |----📄globalRouter.js | |----📄userRouter.js | |----📄videoRouter.js | |----📄server.js pug 작성법 모든 것은 소문자로 작성한다... [유튜브 클론 코딩] #3.9~4.8 Routers(라우터) #3.9 Controllers Recap app.get("/",handleHome); app.get("/", routes 만든다. hanleHome); controllers 만든다. 이 자리에는 반드시 함수를 넣어줘야 한다. #3.10 Middleware Recap middleware controller다. middleware에서 return이 있으면 다음으로 넘겨지지 않고 끝난다. 원하는 만큼 쓸 수 있다. (대부분 2~3개) 누군가가 대답하기 전까지, 즉 return이 있기 전까지는 전부 middleware다. const routerLogger = (req, res, next) => { next(); }; const methodLogger = (req, res, next) => { next(); };.. [JS] 바닐라 JS | #8.0~8.2) weather API 사용해보기 #8.0 Geolocation 아래의 코드를 입력하면 내가 있는 곳의 위도와 경도를 콘솔에 띄울 수 이따따ㅏ따. 루꼣디스뷰리. function onGeoOk(position) { const lat = position.coords.latitude; const lng=position.coords.longitude; console.log("You live in",lat,lng); } function onGeoError() { alert("Can't find you. No weather for you.") } navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError); #8.1 Weather API https://openweathermap.org/api 요기에서.. [JS] 바닐라 JS | #7.0~7.8) To-Do List 만들기 이번 강의 한 줄 요약은 투두투두뉴투두뚜두뚜두뚜 #7.0 Setup 아래와 같이 코드를 작성하면 form 안에 있는 input 태그의 default 인 submit을 막고, input 받은 value를 받아서 console.log할 수 있다. 헷갈리지 말아야 할 것은! form 태그와 input 태그를 따로 받아와야 한다는 것이다. form 태그 -> addEventListener로 submit 감지 input 태그 -> .value로 입력된 값 받아옴 // JS const toDoForm=document.getElementById("todo-form"); const toDoInput=toDoForm.querySelector("input"); const toDoList=document.getElement.. [JS] 바닐라 JS | #5.0~5.3) 시계 만들기 #5.0 Intervals interval: 매번 일어나야 하는 무언가 ex. 매 2초마다 작동 setInterval(function, 호출되는 function 간격 ms) 5000ms는 5초다. #5.1 Timeouts and Dates setTimeout(function, 얼마나 기다린 후에 실행할지 ms) 반복되지 않고 한 번만 실행한다. js에는 date object라는 tool이 있다. 이는 오늘 날짜를 가져온다. new Date () Date = new Date() date.getDate() // 4 date.getDay() // 0: 일요일 date.getFullYear() // 2021 date.getHours() date.getMinutes date.getSeconds() #5.2 Pad.. [JS] 바닐라 JS | #4.0~4.6) 입력폼 만들기 #4.0 Input Values html에 있는 input element를 js로 받아온다. loginInput 변수에 input element를 할당하고, loginButton 변수에 button element를 할당한다. (input element).value input element의 object는 value 프로퍼티를 가진다. 아무것도 입력하지 않으면 value=""이다. 입력 받으면 입력받은 것 대로 값이 바뀐다. eventListener를 통해 button을 클릭하면 input element의 value 값을 console.log하게 할 수 있다. 그 코드는 아래와 같다. #4.1 Form Submission 이전까지는 input에 입력 받은 value 값을 바로 console.log 했다. .. [JS] 바닐라 JS | #3.6~3.8) CSS와 JS를 분리하기 #3.6: CSS in Javascript getter & setter // JS const h1=document.querySelector("h1"); function handleTitleClick(){ console.log(h1.style.color); // getter h1.style.color = "blue"; // setter console.log(h1.style.color); // getter } h1.addEventListener("click",handleTitleClick); getter: 값을 받아오는 것 setter: 값을 설정하는 것 if 문 사용해서 blue -> tomato -> blue -> .... 만들기 1. 단순한 if - else 구문 // JS const h1=docume.. 이전 1 2 3 4 다음
