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

이제 내일이면 스쿨 개강하니깐 오늘부턴 정신 차려서 해보즈아 맨날 정신 차리자는 말만 하는 건 내 착각이겠지...?😓
할 수 있다❗❗❗❗

---

- css 속성 학습

• 상속 제어하기 - initial, inherit, unset
  • initial
    가끔 개발자 도구에서 이러한 값들을 봤었는데 뭔지 몰라도 찾아보려 하지 않은 과거의 나...
    
    

부모 div안에 자식div 2개를 넣어 주고, 약간의 스타일을 적용.

각 스타일 속성에 initial을 적용할 경우, 상속이 제어된다.
모든 스타일들을 상속받고 싶지 않다면 맨 오른쪽의 스타일 코드처럼 all을 사용하면 편함.

• inherit
  
  

inherit은 initial과 반대로 상속 요소의 스타일 값을 최우선으로 적용해주는 속성이다.
따라서 맨 오른쪽의 개발자 도구 이미지를 보면 .parent2에만 해당 값을 추가해주었을 경우에
1. .parent2의 blue가 상속되었지만
2. .child1에 red를 주었기에 때문에 red로 변한다.
3. 하지만, 마지막에 inherit를 해줌으로써 상속받은 값들을 최우선으로 하기 때문에 color : blue;가 다시 적용되는 것임.

• unset
  unset은 둘을 합쳐놓은 속성으로 두 가지의 경우로 적용되는데
  1. 부모로부터 상속받을 값이 있을 때 : inherit
  2. 부모로부터 상속받을 값이 없을 때 : initial
  https://developer.mozilla.org/en-US/docs/Web/CSS/unset
  
  
• 스타일 코드 우선순위
  1. 선언된 곳 : html 파일에서 style tag를 어느 곳에 선언하였는지, inline-Style을 적용하였는지에 따라 다름.
  2. 코드 위치 : 명시도에 따라 다름. (명시도가 같다면 아래쪽에 선언된 코드가 적용됨)
  3. 명시도 (적용범위가 적을수록 명시도가 높은 것)

/*
!important >
inline style >
ID >
Class/Attribute/Pseudo Class >
Type (tag) >
* >
inherited
*/

---

- html/css 프로젝트 강의

• 미디어 쿼리
  요즘엔 기기들이 워낙 다양해서 태블릿도 잘 안 하고, 모발과 pc스타일을 주로 한다고 함.
  pc에 미디어 쿼리 적용할 때 가로폭에 제한을 둬서 모바일 느낌으로 스타일링한다.
  
  

---

- nodebird 강의 (React, Next.js)

• useCallback과 useMemo의 차이점 : useCallback은 함수를 캐싱하는 것, useMemo는 값을 캐싱하는 것.
  지금까지 나는 기존의 스타일 프레임워크 스타일을 변경해야 할 경우 인라인으로 스타일을 수정해주었다.
  
  그러나 적용할 경우 인라인을 적용한 태그가 리 렌더링 되어, 효율적이지 못하므로
  styled-components를 사용하여 별도로 스타일을 적용하거나,

useMemo를 사용하여 리 렌더링을 방지해주고, 최적화를 해주어야 함.

• 공통으로 쓰이는 컴포넌트들은 custom hooks를 만들어 활용하자.
  현재 프로젝트 초반이라 회원가입 페이지의 데이터들을 모두 state로 관리하는 중.
  
  

id, nickname, password는 value값, onChangeHandler에서도 변수명만 빼고 모두 같기 때문에 hooks로 빼서 커스텀화 시켜주었다. 그리고, signup.js로 가서 useInput을 import 하여, 각각의 value와 handler를 넘겨주었음.
이렇게 custom hook으로 생성함으로써 다른 로그인 페이지에서도 재사용을 할 수 있다는 장점이 있다.

---

17:50 오후 회고 스터디 (만족도 : 7)
초반에는 집중력 좋았는데, 5시부터 집중력 정말 깨져서 거의 아무것도 못했기에.... 만족도 7점
그래도 이제 마크업 강의는 다 들었으니깐 js 강의와 알고리즘 위주로 공부하면 될 것 같다
마크업을 당분간은 아예 안 건드릴지, 배운 걸 토대로 네이버나 다른 괜찮은 사이트의 마크업을 해볼지가 고민이다.

---

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

• Date

/*
생성자 및 대표 메서드 (method)
Date 객체 생성자 : new Date()
현재 시간 기준 문자열: Date()
날짜 정보 얻기 (년/월/일): Date.getFullYear(), Date.getMonth(), Date.getDate()
날짜 정보 얻기 (시/분/초/ms): Date.getHours(), Date.getMinutes(), Date.getSeconds()
날짜 정보 설정 (년/월/일): Date.setFullYear(), Date.setMonth(), Date.setDate()
날짜 정보 설정 (시/분/초/ms): Date.setHours(), Date.setMinutes(), DAte.setSeconds()
그 외 날짜 정보 얻기: Date.getDay(), Date.getTime(), Date.getTimezoneOffset()
그 외 날짜 정보 설정: Date.parse(string)
*/

// new를 붙일 경우에는 object타입의 숫자형태 날짜표기
let date_new = new Date();
console.log("date_new", date_new); // 2022-04-11T13:50:23.454Z

// new를 안 붙일 경우에는 string타입의 한글, 영어 날짜표기
let date_str = Date();
console.log("date_str", date_str); // Mon Apr 11 2022 22:50:23 GMT+0900 (대한민국 표준시)

let ms_parse = Date.parse("2010-01-01T00:00:00.000");
console.log(ms_parse);
console.log(new Date(ms_parse)); // 우리나라 기준 9시간 전으로 나오게 됨
console.log(new Date(Date.parse("2010-01-01T00:00:00.000Z"))); // new Date를 바로 넣어주고, 마지막에 Z 추가

// Date 객체 생성자를 사용하여 날짜를 표기할 경우와
// ms로 날짜표기 할 경우 어느부분이 더 성능이 좋은지 테스트.
// 결론: ms으로 변환을 하여 Date를 수행하는 것이 더 효율적이다.

function dateSub(old_date, new_date) {
	return new_date - old_date;
}

function getTimeSub(old_date, new_date) {
	return new_date.getTime() - old_date.getTime();
}

function benchmark(callback_func) {
	let date_1 = new Date("2020-01-01");
	let date_2 = new Date();

	let start = Date.now();
	for (let i = 0; i < 100000; i++) {
		callback_func(date_1, date_2);
	}
	return Date.now() - start;
}

console.log("dateSub: " + benchmark(dateSub) + "ms");
console.log("getTimeSub: " + benchmark(getTimeSub) + "ms");

---

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

5시 이후로 집중을 많이 못해서인지, 저녁먹고 스터디를 시작하는 9시부터 2시간 동안만큼은 집중도 있게 잘한 것 같다.
어느 때와 같이 목표한 것들을 다 학습하지는 못했지만.... 그래도 딴짓하지 않고 집중했다!
원래 오늘부터 알고리즘 문제들을 풀 생각이었는데, 결국 스쿨 개강까지 알고리즘 문제들을 풀지 못한 것 같아서 조금 두렵다ㅠㅠ JS문법과 알고리즘 공부를 분리해서 병행학습했어야 하는 건가 싶지만 이미 늦었다... 지금부터라도 그렇게 하면 된다~

---

[ 출처, 참고 : 제로베이스 프론트엔드 스쿨 ]
[ 출처, 참고 : 인프런 Zerocho's nodebird 강의 ]