[TDL] 04/22 Today's-Done-List

- css font 관련 속성

• font-family
  • 보통 글씨체는 브라우저에 따라 다른데,
    크롬일 경우 설정 -> 모양 -> 글꼴 맞춤 설정에 들어가면 적용되어 있는 폰트들을 볼 수 있다.

• family-name : family-font의 이름, 예를 들어 "Times"는 글꼴 모음이다.
• generic-name : 일반 family-font에서 사용 가능한 지정된 글꼴이 없을 경우 대체되는 폰트.
  • serif : 폰트의 스타일이 대체적으로 끝이 뾰족하거나 끝이 가늘어지거나 끝이 갈라져 있음.
  • sans-serif : 일반적으로 평범함.
    
    

font-family: Lucida, Grande, "Times New Roman", sans-serif;

.sansserif {
  font-family: Times, "Times New Roman", Georgia, serif;
}

• 위처럼 폰트들을 설정해 놓을 경우,
  • 만약 "Lucida"라는 폰트가 내 브라우저에 없다면, 그 옆의 Grande가 적용되는 식으로 진행된다.
  • 또한 font 중간에 스페이스가 포함된 경우에는 따옴표로 감싸준다.
  • font-family의 마지막 폰트는 generic-name으로, 내 브라우저 상에 Lucida, Grande, "Times New Roman"이 없다면  sans-serif generic의 font들로 대체된다.

 

• line-height
  • line-height를 적용해야 하는 이유 : 글꼴마다 갖고 있는 고유의 line-height가 다르기 때문에 일정하게 적용해주지 않으면, 같은 스타일을 적용했을지라도 높이가 제각각이어서 통일성이 없고, 허접해 보일 수 있음!

---

- JS 기본 문법

• 객체 생성 - 싱글 리터럴 객체

// 1. 싱글 리터럴을 이용한 객체 생성
const object = {
	property: "value",
	method: function () {},
};

• 객체 생성 - 생성자 함수

// 2. 생성자 함수 : 싱글 리터럴 객체를 빠르고, 많이 만들어야 할 때

function NewObject(name) {
	this.name = name;
}

// 무조건 new와 함께 쓰여야 객체 생성이 됨.
const newObject = new NewObject("kim"); // NewObject { name: 'kim' }

• 객체 생성 - Object.create

// 3. Object.create(프로토타입, 객체 서술자(기술자))를 사용한 객체 생성

const newObject2 = Object.create(Object.prototype, {
	name: {
		value: "park",
		writable: true, // 덮어쓸 수 있는지
		enumerable: true, // 열거할 수 있는지
		configurable: true, // 객체 서술자를 수정할 수 있는지
	},
});

newObject2 // { name: 'park' }
newObject2.name = "kim"; // { name: 'kim' }

// writable을 false로 변경시
newObject2.name = "kim"; // { name: 'park' }

// enumerable을 false로 변경시 
newObject2.name = "kim"; // {}

 

• for-in을 사용한 프로퍼티 열거

const obj = {
	prop1: "value1",
	prop2: "value2",
	prop3: "value3",
	prop4: "value4",
};

// for (const key in object) {}
for (const key in obj) {
	console.log(key) // prop1 prop2 prop3 prop4
	console.log(obj[key]) // value1 value2 value3 value4
}

obj // { prop1: 'value1', prop2: 'value2', prop3: 'value3', prop4: 'value4' }

obj.prop1;  // value1
obj["prop1"]; // value1

const prop1 = "prop1";
obj[prop1]; // value1

const prop = "prop";
obj[prop + 1]; // value1

• 스코프 체인을 방지하기 위해 hasOwnProperty를 사용해보자
  • 해당 객체 obj가 해당 key를 가진 것이 맞느냐? 는 해석으로,
  • hasOwnProperty을 사용하지 않을 경우 : 해당 객체의 요소들 외에도 상위 스코프가 가진 속성들을 체이닝 해서 꺼내온다.
    따라서, hasOwnProperty으로 상속되거나 확장돼서 사용된 객체의 속성들을 막아주기 위한 일종의 방어 문.

for (const key in obj) {
	if (obj.hasOwnProperty(key)) {
		console.log(obj[key]);
	}
}

---

- JavaScript playing-drum

키보드 입력과 클릭으로 오디오 재생되는 드럼 만들기 구현.

 

• 각 알파벳에 사운드와 키보드 입력, 클릭 기능을 넣기 위해서
  audio태그를 생성해서 그 안에 data-key, src요소를 추가하고, keys태그 속, key태그 안에 audio태그들을 append.

const getAudioElement = (idx) => {
    const audio = document.createElement('audio')
    audio.dataset.key = drumSounds[idx].key
    audio.src = soundsRoot + drumSounds[idx].sound
    return audio
}

const init = () => {
    keys.forEach((key, idx) => {
      key.appendChild(audio)
    })
  }

• 유사 객체 배열 : 배열이 아닌데 배열 인척 하는 객체
  className이 key인 요소들을 console로 찍어보면 아래처럼 NodeList가 반환되는데, 이것이 유사 배열 객체.
  배열로 만들기 위해서는 아래와 같이 Array.from을 사용하면 된다.
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

• 키보드 입력으로 keycode를 알 수 있는 사이트 : https://keycode.info/for/q

• 사운드가 재생될 때 스타일 적용.
  element.classList.add(' ')로 playing이라는 클래스를 생성하고, 스타일을 설정해준다.
  HTMLMediaElement.currrentTime : 내가 첨부한 사운드를 지정된 시간부터 재생시켜 준다.
  HTMLMediaElement.play() : 말 그대로 재생을 시작하는 함수.

• transitionend 이벤트를 적용하여 사운드가 멈출 경우 스타일 해지
  • transitionend 이벤트란 : css 전환이 완료되면 시작되는 이벤트
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event
  • 스타일을 해지하는 이유 : 사운드가 재생되면 위의 캡처 본처럼 playing클래스가 생성되면서 스타일이 나타남.
    스타일이 적용은 되는데 해지해주는 기능이 없기에 아래 이미지처럼 계속 스타일이 유지된 상태로 남음.

그렇기에 위의 캡처본 style.css에서 playing클래스의 스타일을 보면 transform과 background-color을 적용했기에,
console.log(e)을 찍어보면 아래와 같이 이벤트들이 나오는데, 거기서 propertyName이 transform 또는 background-color의 스타일이 전환될 경우 transitionend 이벤트에 잡히고, playing클래스를 삭제함으로써 스타일을 해지하는 것! 

const onTransitionEnd = (e) => {
	console.log(e)
    if (e.propertyName === 'transform') {
      e.target.classList.remove('playing')
    }
  }

  const init = () => {
    keys.forEach((key, idx) => {
      key.addEventListener('transitionend', onTransitionEnd)
    })
  }
init()

---

17:50 오후 회고 스터디 (만족도 : 7)

이번 주에 워낙 집중을 못했어서, 어제부터 그래도 조금씩 집중도가 높아지긴 하고 있지만....
그래도 계속 딴짓하고 쉬고 싶은 마음이 너무 많다ㅠ 딴짓하고 싶어서 배고픈 거 같은 느낌적인 느낌^^ 

---

- 자료구조 / 알고리즘 (Js ver.) 강의

등차수열의 항을 찾는 문제를 풀었는데, 나는 바보인 건지 아직 접근방식이 제대로 떠오르지 않는다...
알고리즘적 생각이 너무 부족한 걸까ㅠㅠㅠ 숫자들의 공통점, 규칙들을 못 찾겠다.
또한 반복문+조건문으로 겨우겨우 풀어내도, 조건문으로 축소시키는 로직은 어떻게 접근한 건지 이해조차 되지 않는다..
나에게 로봇 뇌를!!!!!

function answer(a, d, n) {
	let index = -1;

	for (let i = 1; ; i++) {
		let num = a + d * (i - 1);

		if (num > n) {
			index = -1;
			break;
		}

		if (num == n) {
			index = i;
			break;
		}
	}
	return index;
}

function answer(a, d, n) {
	let index = -1;
    
	if((n - a) % d == 0) {
		index = (n - a) / d + 1;
	} else index = -1;

	return index;
}

위의 두 코드가 같은 결과가 나온다... 아래의 조건문만으로 로직을 짜는 것은 정말 어떻게 한 건지 이해가 안 된다ㅠ.ㅠ
규칙들을 찾는 연습... 그 규칙을 찾아서 코드로 구현하는 능력.... 정말 많이 풀어봐야 알 것 같다.

---

22:50 저녁 회고 스터디 (만족도 : 6)

js 정리까지는 집중도 있게 했는데, 알고리즘 풀이부터 집중이 조금 깨졌다.
원래 2문제 풀려했지만 1문제밖에 못 풀었기에 6점

---

[ 출처, 참고 : 제로베이스 프런트엔드 스쿨 ]