\(@^0^@)/
[TDL] 04/06 Today's-Done-List 본문
일찍 일어났다가 다시 잤다 으악!!
그렇게 일어나서 밥 먹고 오면 항상 오전에는 아무것도 못하게 되어버리는 상황.. 밥 먹으면서 티비 봐서 그래계획적인 삶.. J의 삶으로 거듭나고 싶지만 너무 어렵다.. 그래도 꾸준히 조금씩 변화하고 있긴 하다! 파이팅
- html 전역 속성 요소 학습
- data
html에서 추가 정보를 저장할 때 data 속성을 사용할 수 있고,
<article
id="electric-cars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>JS에서 이러한 속성 값을 읽을 수 있고, 변경할 수도 있음.
const article = document.querySelector('#electric-cars');
// The following would also work:
// const article = document.getElementById("electric-cars")
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
article.dataset.columns = 5 // "5"데이터 속성은 일반 HTML 속성이므로 CSS에서도 액세스 할 수 있음.
article::before {
content: attr(data-parent);
}
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}- draggable
<body> <img src="https://via.placeholder.com/300" draggable="true" /> </body>
true로 설정할 경우 이런 식으로 마우스로 드래그가 가능하지만,
false로 적용할 경우 드래그 불가. (default 값은 auto)
- css 속성 학습
- html/css 프로젝트 강의
며칠 전에 한 줄의 ellipsis를 학습하였는데, 오늘은 여러 줄 일 경우 말 줄이는 방법!
여러 줄 일 경우는 조금 복잡한데, 우선 font-size, line-height, lines의 값을 받아서
font-size, line-height는 그대로 적용해주고, line-height와 lines로 max-height를 구한다.
17:50 오후 회고 스터디 (만족도: 7)
html, css 요소 강의 들을 때, 좀 졸았음. 그리고 중요하지 않은 부분? 은 다 듣지 말고 빨리 넘겨야 할 것 같다.
마크업 강의 들을 땐 집중도있게 잘 들었는데, 5시부터 원래 리액트 docs 원서로 영어공부 겸 개념 학습하려 했는데,|공책도 없고 A4용지도 없어서 그냥 유튜브 보고 딴짓해버렸다^^..
- 자료구조 / 알고리즘 (Js ver.) 강의
아직도 함수 쓸 때마다 두렵고 어렵고 그런 느낌이다ㅠ JS는 원래 취업하고나서도 계속 계속 꾸준히 공부해야 된다고 들었기에.. 조급해하지 말고 천천히 다가가다 보면은 언젠간 나도 JS의 고수가 되어있지 않을까~~ 자신감을 갖자 아자!
각 함수의 개념을 파악해서 어떤 함수가 결과를 값으로 반환하는지, 배열로 반환하는지 / 단 하나의 결과값을 반환하는지, 모든 결괏값을 반환하는지 비교하고 암기해서 적용해보자.
// use for loop
let nums = [1, 2, 3];
for (let i = 0; i < nums.length; i++) {
console.log(nums[i]); // output: 1 2 3
}
// forEach()
// 배열 요소 별 콜백 함수 각각에 실행: Array.forEach(function(item, index, array){})
// item: 배열 요소, index: 배열 위치, array: 배열
nums.forEach(function (i) {
console.log(i); // output: 1 2 3
});
// map()
// 배열 요소 별 함수 및 결과를 배열로 반환: Array.map(function(item,index,array){})
// item: 배열 요소, index: 배열 위치, array: 배열
let use_map = nums.map(function (item) {
return item * 2;
});
console.log(use_map); // output: [ 2, 4, 6 ]let users = [
{ name: "bob", age: 17, job: false },
{ name: "amy", age: 20, job: false },
{ name: "john", age: 27, job: true },
];
// find()
// 콜백 함수의 조건을 만족하는, 단 하나의 값만 반환: Array.find(function(item,index,array){})
// item: 배열 요소, index: 배열 위치, array: 배열
let find_job = users.find(function (user) {
return user.job == false;
});
console.log(find_job); //output: { name: 'bob', age: 17, job: false }
let find_age = users.find(function (user) {
return user.age > 19;
});
console.log(find_age); //output: { name: 'john', age: 27, job: true }
// filter()
// 콜백 함수의 조건을 만족하는 값을 배열로 반환: Array.filter(function(item,index,array){})
// item: 배열 요소, index: 배열 위치, array: 배열
let filter_job = users.filter(function (user) {
return user.job == false;
});
console.log("filter_job", filter_job);
// output: [
// { name: 'bob', age: 17, job: false },
// { name: 'amy', age: 20, job: false }
// ]
let filter_age = users.filter(function (user) {
return user.age > 19;
});
console.log("filter_age", filter_age);
// output: [
// { name: 'amy', age: 20, job: false },
// { name: 'john', age: 27, job: true }
// ]// reduce()
// 요소 별 함수 수행 누적 결과값 반환: Array.reduce(function(accumulator,item,index,array){})
// accumulator:이전 함수 결과(initial로 초기값 설정 가능), item: 배열 요소, index: 배열 위치, array: 배열
let nums2 = [1, 2, 3, 4, 5];
let call_count = 0;
console.log("result\tvalue\tindex");
let sum = nums2.reduce(function (accumulator, item, index, array) {
console.log(accumulator, "\t\t", item, "\t\t", index);
call_count++;
return accumulator + item;
}, 0);
console.log(call_count);
console.log(sum);
// output:
// result value index
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// 10 5 4
// 5
// 1522:50 밤 회고 스터디 (만족도 : 6)
저녁먹으러 집에 와서, 저녁 먹고 그 이후에도 계속 쉬었다.. 역시 집에 오면 안 되는 건가~?
10시부터 공부 슬슬 시작해서 11시 30분까지 약 1시간 10분 정도 집중했으려나?ㅠ 그래도, 회고 끝나고 집중해서 마무리한 것 같아서 회고에서 말한 만족도에 +1 해줌.
총평 : 집에서는 공부가 안된다~ 내일부터 오전에는 집에서 할 예정인데 제발 제발 일찍 일어나길
[ 출처, 참고 : 제로베이스 프론트엔드 스쿨 ]
'TDL' 카테고리의 다른 글
| [TDL] 04/08 Today's-Done-List (0) | 2022.04.09 |
|---|---|
| [TDL] 04/07 Today's-Done-List (0) | 2022.04.07 |
| [TDL] 04/05 Today's-Done-List (0) | 2022.04.05 |
| [TDL] 04/04 Today's-Done-List (0) | 2022.04.04 |
| [TDL] 03/31 Today's-Done-List (0) | 2022.03.31 |
