TIL 221208 git reset / background(숏핸드) / fieldset, legend

🎆 오늘 한 것

• 수업 들은 거 정리하고 복습
• 과제 1 테일윈드로 구현
• 리덕스 강의 보기
• 알고리즘 강의 보기

🙄 오늘 하려고 했는데 못한 것

• 이듬 강의 보기
• deep dive 24장 클로저

---

✨ git reset

🎇 soft / hard reset 차이?

🚀 soft

코드는 그대로 놔둔 채로 커밋 내역만 쫌쫌따리 되돌리고 싶을 때 사용

🚀 hard

코드까지 다 이전으로 되돌려버림 사용할 때 주의할 것~~!

🎇 reset 방법

$ git log --oneline

👉 커밋과 해시값 리스트가 나옴

$ git reset --hard {해시값}을 치고 누르면

👉 헤드가 그 해시값의 커밋으로 리셋됨

실수로 하드 리셋해버렸는데 어케 복구함??

$ git reflog --oneline

👉 리셋시킨 커밋 내역도 보임!! 이 위치로 다시 리셋 시키는 것도 가능

✨ 연산 개수 세기

코드 성능을 비교할 때 시간을 비교하는 건 문제가 있음. 컴퓨터가 처리해야 되는 연산 개수를 세는 게 나음. 뭔 컴퓨터를 쓰든 연산 횟수는 바뀌지 않기 때문!

딱 세번의 연산만 하는 코드. n이 무슨 값이든 3번임!

이 방식을 사용하면 n의 개수가 커질 수록 연산 횟수도 늘어나게 됨

함수 실행에 시간이 얼마나 오래 걸리는지 보여주는 위젯

✨ 오늘 강의 메모

🎇 background

얼렁뚱땅 쓰던 background 속성의 기초를 다시 잡았음 기분 좋네

🎇 animation 효과 차이 시각적으로 보기

이미지 출처

링크 들어가보면 움짤 있는데 참고

🎇 페럴럭스 스크롤링

background만 잘 활용하면 정말 다양하고 멋진 효과 연출 가넝
W3School : How TO - Parallax Scrolling

패럴럭스 스크롤링 예시들

🎇fieldset / legend

<fieldset> 태그는 <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용합니다. <fieldset> 요소는 하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려줍니다. 또한, <legend> 요소를 사용하면 <fieldset> 요소의 캡션(caption)을 정의할 수 있습니다. - mdn

이 테두리가 필드셋, 이 글자가 레게노다. 이것은 라벨이다.

머쓱하게 미리보기엔 보였는데 포스팅하니까 안 보임...😅 위의 이상한 글자와 인풋은 사실 이렇게 마크다운 되어있다.

<fieldset>
	<legend>이 테두리가 필드셋, 이 글자가 레게노다.</legend>
  <label>이것은 라벨이다.</label>
  <input placeholder='이것은 인풋이다'></input>
</fieldset>

원래의 결과물은 이렇게 보인다.

위의 검색이라고 적혀있는 박스가 필드셋, 이 박스의 캡션 역할을 하는 게 레전드다.

폼을 쓸 때는 필드셋과 레전드를 써주는 걸 권장함. 레전드는 마크업에 작성 후 css로 숨겨놓는 게 보편적인? 방법인 것 같음

🎆 내일 할 것

• 수업 들은 거 정리하고 복습

📌 킵해놓을 todo

• preload / modulepreload / prefetch 공부... 언제하지?
• deep dive 19장 프로토 타입

📚 이번 주 개인 목표

• 일요일까지 과제 1은 테일윈드 2는 퓨어 css로 완성하기. 완성 후 궁금한 점 질문하기
• 야무쌤 강의 html 파트 다 보기 / 여유되면 css 파트도 최대한 보기
• 리덕스 지금 보는 파트 다 보기
• 알고리즘 빅오 표기법 공부

일단 계획 잡아놓고 안되면 다음 주에 하는 걸로...

---

📝 오늘의 일기

아이구 넘 피곤하다 자러가야지...