2022/08/04 TIL

💪 오늘의 공부

• 자바스크립트 딥다이브 30,31,32 - String, Symbol, Iterable
  • String은 많이 쓰는 메서드들을 다시 복습하는 느낌이였다.
  • Symbol과 Iterable은 이어지는 느낌의 개념이 많았다.
  • 다음파트인 스프레드 문법이나 디스트럭쳐링 할당이 Iterable과 이어지는 것 같다.
  • 내일 다음 파트들을 공부하면서 다시 한번 복습해야 겠다.
• Memory Cards 미니 프로젝트 해보기
  • 카드를 뒤집는 애니메이션이 어려웠다.
    • 모든건 부모 요소의 perspective 로 부터 시작된다.
      • 3d 효과를 주기 위해 transform, transition등에 3D를 위한 설정해야할 속성
    • perspective를 적용시킬 부분이 어딘지 판단한다. (관찰자 시점의 투영점)
    • perspective 속성은 바로 아래의 자식 요소에게만 전달 됨
    • 바로 아래의 자식을 통해 그 아래의 자식으로 전달
      • transform-style: preserve-3d; 를 적용시켜야 함
      • 이게 없다면 적용 불가
    • backface-visibilty: hidden;을 적용시키지 않으면 요소의 뒷면을 못숨김
      • 적용시키지 않으면 앞면 뒷면이 함께 보여 이상하게 나옴
  • 그 외에 z-index를 가지고 노는 부분이 신경쓰였다.
  • js 코드 칠때에는 항상 먼저 에러날 부분을 신경쓰면서 치는 것을 연습해야겠다.

 

자바스크립트 딥다이브 정리 git:https://github.com/SDWoo/javaScript-Deep-Dive/tree/main/chapter/30-String 

GitHub - SDWoo/javaScript-Deep-Dive

Memory Cards 정리 git: https://github.com/SDWoo/20_Web_Projects_With_Vanilla_JS/tree/main/Memory%20Cards

GitHub - SDWoo/20_Web_Projects_With_Vanilla_JS