비전공자 개발일기

★ 모든 method는 지정한 배열 내 요소들로 진행 array.map(x => x *2)이면 이때 x는 array[0], array[1].... 이 되는 것! // Array.map(함수) const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; const doubles = numbers.map(function (num) { return num * 2; }) console.log(doubles) /////////////////////////////////////////////////////////////// // Array.forEach(함수) const numbers = [1, 2, 3, 4, 5, ..

// array.filter(function) let numbers = [1, 2, 3, 4, 5]; let result = numbers.filter(n => n % 2 ===0) console.log(result) // [2, 4] function f1() { return "Hello World!" } function f2(str: string) { return str } // f2(1234) error f2("I'm IRONMAN") document.title = "Typescript Basic" interface Friend { name: string; favoriteColor?: string; } function add(friend: Friend) { let name = friend.name; ..

// break let goal = 3; let result = ""; for(let i = 0 ; i < 100; i++) { if(i === goal) { break; } result +="IRONMAN \n"; } console.log(result); // continue // 1부터 100까지 정수 중 7의 배수를 제외한 수 들의 합계 let sum = 0; for(let i = 1 ; i

// 숫자 데이터 형식: number 키워드로 숫자 데이터 지정 후 정수 또는 실수 저장 namespace NumberNote { // [1] 숫자 형식의 변수 선언 및 초기화 let age : number = 21; // 정수 const PI : number = 3.1415922714; // 실수 // [2] 문자열을 다시 대입하려고 하면 에러 발생 // age = 'abc'; // [3] 사용 console.log(`나이 : ${age}`) console.log(`PI : ${PI}`) } // 숫자 구분자 const rich =9_999_999_999_999; console.log(rich) // 9999999999999 // 문자 데이터 형식: string namespace StringKeywor..

Update CSS Variables with JS Spacing: Blur: Base Color :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } body { text-align: center; background: #193549; color: white; font-family: 'helvetica neue', sans-serif; font-weight: 100; font-size: 50px; } .h1 { color: var(--base); } .controls { margin-bottom: 50px; } a { color: var(--base); text-decoration: none; } input { width: 100px; } img{ pa..

Simple Clock html { background: #018ded background-size: cover; font-family: 'helvatica neue'; text-align: center; font-size: 10px; } body { font-size: 2rem; display: flex; flex-flow: column; flex: 1; min-height: 100vh; align-items: center; } h1 { color: lavender; } .clock { width: 30rem; height: 30rem; border: 20px solid lavender; border-radius: 50%; margin: 50px auto; position: relative; paddi..

Sun Mon Tue Wed Thu Fri Sat * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Quicksand', sans-serif; } html { font-size: 62.5%; } .container { width: 100%; height: 100vh; background-color: #12121f; color: #eee; display: flex; justify-content: center; align-items: center; } .calendar { width: 45rem; height: 52rem; background-color: #222227; box-shadow: 0 .5rem 3rem rgba(0,0,0,.4) ..

A clap S hihat D kick F openhat G boom H ride J snare K tom L tink function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`) const key = document.querySelector(`.key[data-key="${e.keyCode}"]`) // console.log(audio) if (!audio) return; audio.currentTime = 0; audio.play(); // console.log(key) key.classList.add('playing'); } function removeTransition(e) { if (e...