TIL - 21.06.21 👨‍💻

코플릿 계산기 & HTML, CSS 복습

id와 class

id는 특정요소에 네이밍
class는 스타일의 분류

class는 요소는 여러개의 값을 가질 수 있는데, 이 값들에서 선언한 것이 겹칠 경우에 css 파일에서 나중에 적용되는 값이 적용된다.

<h1 class='header section'>I'm Sunghoon</h1>

.section {
	background-color: red;
}
.header { ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property)
	background-color: blue;
}

상기 코드가 있을 경우 클래스 요소의 값의 순서에 따라 header -> section 으로 적용되서 배경색이 빨간 색이 되는 것이 아닌, css 파일 속 순서에 따라 header가 최종적으로 반영되어 파란 색이 된다.

객체 추가로 알아둘 점

• 객체의 프로퍼티는 좌측의 key, 우측의 value가 합쳐져 하나의 property가 된다.
• 빈 객체 생성법은 let objectName = {}; 혹은 let objectName = new Object(); 이다.
• 점 표기법 보다 대괄호 표기법이 적기 귀찮은건 사실이지만 오류날 가능성이 적으니 웬만하면 대괄호 표기법으로 작성하자.
• 마지막 프로퍼티 끝에 쉼표를 찍어두면 프로퍼티 추가, 삭제가 수월하니 끝에 쉼표를 찍어두는 습관을 들이자.
• const로 선언된 객체의 프로퍼티는 수정될 수 있다. 다만 var로 선언하는 것처럼은 당연히 안된다.
• 객체 프로퍼티의 키 값으로 대괄호에 씐 키가 올 수 있는데 이는 외부로 키 값을 받아 올때 사용할 수 있다.
• 선언되지 않은 객체의 값을 호출할때 에러가 발생하는 것이 아닌 undefined를 값으로 반환한다.
• 객체의 프로퍼티를 삭제할때는 delete objectName.key 를 이용한다.

in 연산자

사용법은 'key' in objectName.
key 자리에는 프로퍼티의 키가 와야하고 objectName자리에는 반드시 객체가 와야한다.
objectName 안에 key라는 키를 가진 프로퍼티가 있으면 true 값을 반환한다.

객체의 정렬 방식

정수 프로퍼티는 작은 수 부터 순서대로, 그 외의 나머지 프로퍼티는 입력된 순서대로 출력된다.

정수 프로퍼티 = 값을 정수로 바꾸었을때와 바꾸지 전과의 값이 같으면 정수 프로퍼티이다.

GOOD 😉

새로운 페어 분을 만났다.
말수가 조금 적으신 분인가 싶지만 그래도 같이 페어짜서 문제를 해결하는게 즐겁다.

BAD 😥

오늘 운동을 너무 과하게 했는지 야식으로 새우탕을 먹어버렸다식욕의 노예
페어 분이 말수가 적으시다고 너무 적극적으로 나가 부담스럽게 하진 않았나 싶다.
객체 추가 공부를 못했다.

TO DO 🔥

객체 공부를 너무 못했으니 그 보충을 꼭 하자.

Retrospect 🧐

bad 란에 적었던 것처럼 오늘 페어님한테 너무 부담스럽게 나가진 않았나 걱정된다.
나는 즐거웠지만 혼자 폭주해서 풀어버리기도 했고.. 조금 자제할 필요가 있지 않나 싶다.

그리고 야식, 원래 난 샤워하면서 유튜브를 보는 편이다.
요새 들어 얄팍한 코딩사전 채널에 유익한게 많아 내 레벨에선 조금 어려운 개념들이지만 한번 봐놓으면 다시 볼때 쉽지 않겠나는 생각으로 보고 있었다.
그런데 오늘은 왜 먹방을 봐버렸는지.
국밥을 맛깔나게 흡입하는데 (필자는 국밥충이다.) 나도 뭔가 뜨끈한걸 들이키지 않으면 큰일 날 것 같은 기분이 들어 그만.. 폭주해버렸다.

그리고 하지 기념으로 오늘은 평소 다니던 뒷동산에 조금 긴루트로 다녀오려고 했는데 워낙 다녀온지 오래되어서 길을 못 찾았다 😅
잘못든 길에서 길은 철망으로 막혀있지 묶인 개는 달려들 것 마냥 짖어대지 오르막 하나 넘어왔는데 넘어오자마자 왠지 체감온도가 5도는 떨어진 것 같지..
그냥 원래 가던 루트로 돌아갔다. 절대 해 질까봐 쫀거 아님

자제하자. 열심히 공부하고.

Reference 🙇

모던 자바스크립트 - https://ko.javascript.info/