공부120 [JavaScript30] 18,19,20 강 정리 18강. Adding Up Times with Reduce 목표 동영상 재생 시간을 Reduce를 사용하여 다 더하여 시,분,초로 나타내기 과정 1. 재생시간 변수에 담기 2. 재생시간의 시, 분, 초를 모두 더하여 초로 나타내기 3. 모두 더한 초를 시, 분, 초로 나타내기 코드 분석 비디오의 시간이 다음과 같이 list tag의 data-time 설정되어 있다. Video 58 data-time(재생시간) 불러와 변수에 담기 - querySelectorAll 로 불러온 Dom은 NodeList속성을 가짐. 따라서 reduce 메소드 사용을 위해 Array로 변환해야 함. - NodeList를 Array로 변환하는 방법 1. Array.from 사용(아래) 2. spread사용(ES6) ex) [..... 2019. 4. 10. [JavaScript30] 12,13,14 강 정리 12강. Key Sequence Detection 목표 비밀키 입력 시 유니콘이 나오도록 설정 과정 1. 비밀키 크기만큼 배열을 생성 2. keyup 이벤트를 받아 순서대로 잘라서 배열에 삽입 3. 배열에 들어있는 문자들을 join 했을 때 비밀키와 일치한다면 유니콘 등장 코드 분석 const pressed = []; // 배열생성 const secretCode = 'wesbos'; //비밀키 설정 window.addEventListener('keyup',(e)=>{ //이벤트 리스너 생성 // console.log(e.key); pressed.push(e.key); //배열에 이벤트 key 삽입 pressed.splice(-secretCode.length - 1, pressed.length - secr.. 2019. 3. 28. [JavaScript30] 1,2,3,4,5 강 정리 3강. Playing with CSS Variables and JS SASS란?Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다.이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.변수의 사용조건문과 반복문ImportNestingMixinExtend/Inherita.. 2019. 3. 21. [JavaScript30] 9,10,11 강 정리 9강 . 14 Must know Dev tools Tricks ( 꼭 알아야하는 14가지 개발 도구 요령 (?)) 콘솔 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메소드를 제공한다. console.log() 의 reqular, Interpolated, style 출력 방법 1 2 3 4 5 6 7 console.log('hello'); console.log('Hello I am a %s string!', 'yeaseul'); const v = 'yeaseul'; console.log(`Hello I am a ${v} string!`); console.log('%c I am some great text', 'font-size:50px; background:.. 2019. 3. 20. [JavaScript30] 6,7,8 강 정리 6강 . Type Ahead Fetch 란?Fetch API를 이용하면 Request 나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능.fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있음.(XMLHttpRequest 기능과 유사) fetch()는 Promise 객체 반환. HTTP error상태를 reject하지 않고 쿠키를 보내거나 받지 않음.HTTP Response 객체로부터 실제값을 가져오기 위해서는 blob()메서드를 사용해야 함. Promise 란?자바스크립트 비동기 처리에 사용되는 객체 (비동기처리란? 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것)데이터를 다 받아오기전에 화면에 데이터를 표시.. 2019. 3. 17. Letsencrypt(무료 SSL) 갱신 오류 해결 분명히 저번에 자동으로 갱신되게 해놨는데 무슨일인가.. ㅂㄷㅂㄷ수동으로 다시 갱신 시도 $ ./letsencrypt-auto renew 하지만 다음과 같은 오류 발생. AttributeError:'Requirement' object has no attribute 'project_name'속성오류: 'Requirement' 객체에 'project_name'속성이 없습니다.. 라 python을 잘 모르기 때문에 python 오류를 정리해 놓은 페이지 일단 참고해보았다.파이썬 프로그래밍 입문서 : 오류를 고치는 방법 https://python.bakyeono.net/chapter-9-2.html 그리고 빨간색 오류표시가 나있는 페이지들을 다 들어가서 project_name이라는것을 열심히 찾았다.하지만.. 어.. 2019. 2. 27. 이전 1 ··· 12 13 14 15 16 17 18 ··· 20 다음
