<TIL> 211213 CS개론, JS 클래스, CSS 애니메이션

 

🐣

 

{ CS개론 }

컴퓨터 아키텍처와 운영체제

CPU(레지스터): 냉장고 -> 소용량/빠름

CPU(캐시): 식품저장고 -> 빠름

RAM: 편의점

디스크 드라이브: 창고 -> 대용량/느림

정적데이터: 프로그램을 작성할 때 얼마나 많은 메모리가 필요할지 아는 데이터입니다.

동적데이터(힙에 쌓임): 프로그램을 실행하기 전에는 크기를 알 수 없는 데이터입니다.

 

입출력과 네트워킹

프로토콜: 여러 규칙으로 이루어진 통신 규약

internet(인터넷) = inter(사이) + net(네트워크)

인터넷은 여러 LAN을 하나로 연결해주는 WAN입니다.

인터넷은 여러 계층으로 이뤄진 프로토콜의 집합입니다.

 

데이터 구조와 처리

자바나 자바스크립트 같은 언어에는 포인터가 없지만 직접 malloc이나 free를 하지 않으면서도 동적메모리 할당을 지원합니다. 이런 언어는 malloc과 free 대신에 가비지 컬렉션을 구현합니다.

 

{ JavaScript }

클래스

protected 필드는 _로 시작합니다. _은 자바스크립트에서 지원하는 문법은 아니지만, protected 필드를 나타낼 때 관습처럼 사용됩니다. 개발자는 protected 프로퍼티가 정의된 클래스와 해당 클래스를 상속받는 클래스에서만 _가 붙은 필드에 접근해야 합니다.

 

에러 핸들링

try..catch는 유효한 코드에서 발생하는 에러만 처리할 수 있습니다. 이런 에러를 '런타임 에러' 또는 '예외'라고 부릅니다.

 

{ CSS }

애니메이션

.box {
  animation: name duration timing-funciton delay iteration-count direction fill-mode play-state
}

@keyframes name {
  from {
  }
  to {
  }
}

 

트랜스폼

transform-origin: 요소의 기준점을 설정할 때 사용합니다. 기본 기준점은 요소의 정중앙입니다(50%, 50%).

.scale:hover {
  transform-origin: 100%, 100%;
  transform: scale(.5);
}

 

웹폰트

CDN(Content Delievery Network) 방식과 서버 폰트 로딩 방식이 있습니다.

영문과 한글을 혼용하는 경우 영문 폰트, 한글 폰트 순으로 지정해야 합니다(한글 폰트가 먼저 나오면 영문 폰트 적용 안됨).

 

📌

 

한권으로 읽는 컴퓨터 구조와 프로그래밍 / 조너선 스타인하트 지음 / 오현석 옮김 / 책만

https://ko.javascript.info/

모던 JavaScript 튜토리얼

https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb