![]()
강의에서 배운 기능에 새로운 기능인 eraser와 clear 버튼을 추가 했다. 그리고 컬러는 슬라이드로 구현을 해놨다. 아예 처음부터 만들기도 했고 공부한지 시간이 꽤 지났어서 오래 걸렸다. ㅠㅠ 클론코딩은 역시 본인이 직접 다시 만들어봐야 하는 것 같다. HTML CLEAR SAVE PEN ERASER PAINT CSS @import "reset.css"; body { padding: 50px 0px; background-color: #f6f9fc; } .canvas-wrap { display: flex; justify-content: center; align-items: center; height: 70vh; margin-bottom: 2em; } .canvas { width: 500px; heig..
![]()
9. Collection(2) 5) Date 표준 Built-in 객체로써 날짜와 시간을 위한 속성값과 메서드를 제공하는 객체 Date 객체는 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초로 나타내는 정수 값으로 표현 생성자 및 method Date 객체 생성자: new Date() 현재 시간 기준 문자열: Date() 날짜 정보 얻기 (년, 월, 일): Date.getFullYear(), Date.getMonth(), Date.getDate() 날짜 정보 얻기 (시, 분, 초): Date.getHours(), Date.getMinutes(), Date.getSeconds() 날짜 정보 설정 (년, 월, 일): Date.setFullYear(), Date.setMonth(), Date.setD..
![]()
8. Collection(1) 1) 자바스크립트가 제공하는 Collection 구조 혹은 비구조화 형태로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간 Indexed Collection: Array, Typed Array Keyed Collection: Object, Map, Weak Map, Set, Weak Set 2) Map 다양한 자료형의 key를 허용하고 key-value 형태의 자료형을 저장 할 수 있는 Collection Map은 Object 대비 다양한 key의 사용을 허용 값의 추가, 삭제 시 메서드를 통해 수행이 필요 property & method 생성자: new Map() 개수 확인: Map.size 요소 추가: Map.set() 요소 접근: Map.get() 요소 삭제: Ma..
![]()
7. 고차함수와 생성자 1) 고차함수 ✔ 고차함수 하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수 매개변수로 전달되는 함수: 콜백 함수 대표 배열 조작 method 임의 정렬: Array.sort(callback function) 반복 작업: Array.forEach() 콜백함수 결과 배열 반환: Array.map() 조건을 만족하는 하나의 값 반환: Array.find() 조건을 만족하는 값 배열로 반환: Array.filter() 누적 결과 반환: Array.reduce() ✔ 고차함수: sort() 🤯 sort()의 문제와 한계점 문제: 일의 자리 4가 10의 자리보다 뒤에 정렬됨 원인: 정렬 될 때 배열의 요소가 일시적으로 문자열로 변경되어 발생 한계점: 대소문자 구분없이 정렬..
![]()
5. 숫자와 문자 1) Number ✔ Number 자바스크립트엣 일반적인 숫자는 64비트 형식의 IEEE-754 표준 기반 형태로 저장되는 자료형 10진수 외 16, 2, 8진수 등 다양한 진수 사용 16진수(Hexadecimal): 0xFF 8진수(Octal): 0o71 2진수(Binary): 0b1101 대표 상수값 [MAX|MIN]_VALUE, [MAX|MIN]_SAFE_INTEGER, [POSITIVE|NEGATIVE]_INFINITY, NaN 대표 메서드 문자열로 변환: Number.toString() 특정 자리수까지 제한하여 표현: Number.toFixed(), Number.toPrecision() 타입 확인: Number.isNaN(), Number.isFinite() ✔ 지수 / 진법 ..
