개발기록

Unreal Webcam Fun 카메라가 켜지고 take photo를 클릭하면 사진이 찍힌다(내사진이 찍혀서 가리고 찍었다...) 1. 아주 약간 나온 promise 환경 이해하기 2.canvas의 비디오 사용법 익히기 3. video에 쓰이는 메서드 익히기 4. video에 컬러입히는 함수들은 아직 잘 모르겠다.. 코드 const video = document.querySelector('.player'); const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelecto..

Tally String Times with Reduce reduce메서드를 이용해 비디오 재생시간의 총 누적시간을 더한다. 1. .map을 심도있게 사용하여 시간 내 시,분까지 순환한다. 2.data값을 배열로 만들기위해 this를 재설정한다. 3..reduce의 사용법 알기 4.시/3600으로 하고 분/60으로 함 코드 Video 1 Video 2 Video 3 Video 4 Video 5 Video 6 Video 7 Video 8 Video 9 Video 10 Video 11 Video 12 Video 13 Video 14 Video 15 Video 16 Video 17 Video 18 Video 19 Video 20 Video 21 Video 22 Video 23 Video 24 Video 25 V..

Sorting Band Names without articles sort메서드로 관사(an,the,a)를 뺀 스펠링을 오름차순으로 정렬한다. 1. 관사들을 빼기 위해 대체 메서드(.replace)를 사용하기 2. 관사들을 선택하기 위해 정규식을 사용하기 3.sort메서드 활용법을 알기 4.map으로 Dom에 배열 정렬하기 코드 알게된 문법 .replace([변경될 문자열],[변경할 문자열]) 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환하는 메서드 .trim() 문자열 좌우에서 공백 제거하는 메서드 .sort((a,b)=>a>b?1:-1); sort를 이렇게 작성할 경우 오름차순으로 배열됨

CSS Text Shadow Mouse Move Effect css shadow가 마우스가 움직일 때마다 움직인다. 1. es6 문법으로 상수,변수 작성 2.좌표값 변경 3. shadow 움직이는 반경 구하기 코드 🔥WOAH! ​ 알게된 문법 const {offsetWidth : width, offsetHeight : height} = hero;//const offsetWidth = hero.width , offsetHeight =hero.height let {offsetX : x, offsetY: y} = e;//const x = e.offsetX , y = e.offsetY es6에서 새로 나온 문법으로 더 가독성있게 작성이 가능하다 x = x + e.target.offsetLeft; .hero와 h..

LocalStorage and Event Delegation 체크리스트를 만들고, 내부에 localStorage를 만들어 사용자가 데이터를 지우지 않는 이상 계속 브라우저에 남긴다. 1.배열을 만들어 내부에 인풋값을 저장한다. 2.innerHTML안에 배열을 넣는다. 3.localStorage를 만들어 내부에도 값이 저장되게 한다. 4.localStorage의 값도 변경(true/false)되게 하기 위해 토글함수를 만든다. 코드 LOCAL TAPAS Loading Tapas... 알게 된 문법 e.preventDefault() submit event를 할경우, 클릭시 바로 새로고침되어 반짝하고 나왔다 없어진다. 하지만 preventDefault를 사용하면 새로고침이 되지않는다. e.target.matc..

Object and Arrays - Reference VS Copy 배열과 객체의 얕은복사와 깊은복사의 메서드를 알아보았다. 1.얕은복사의 예시 알기 2.깊은복사의 예시 알기 3.깊은복사와 this의 바인딩 코드 알게 된 문법 얕은복사 -배열과 객체의 내부 값을 다른 객체에 복사하여, 복사한 객체 내부 값을 변경하면 복사했던 기존 값도 변경된다. const team = players 배열과 객체의 기본적인 얕은 복사 방법이다. but, 객체 자체를 변경하면 객체에 대한 변경임에도 값이 변경된다. ex.) player = {d:44,g:'string'};//깊게 복사됨 player.d = 33 //얕게 복사됨 const team4 = [...players] 전개연산자는 배열의 경우 1차원적인 값이 있기 때..