[FE 취업 생존 키트] 1주차 세션

선언형 프로그래밍

• 명령형 : input이 주어졌을 때 항상 똑같은 output을 보장하지 않는다. 특정 task를 실행시킨다.
• 선언형 : 똑같은 input에 대해 항상 똑같은 output이 나와 결과 값을 예상할 수 있다.

필요한 UI를 컴포넌트로 만들어서 정해진 규칙 안에서 UI를 작성한다면 명령형일 때 보다 더 수월하게 작성할 수 있고, 코드 규모가 커져도 파악하기 쉬워진다.
React 같은 프레임워크를 사용해서 개발하는 것도 시스템 내부 로직은 크게 신경쓰지 않고 프레임워크 규칙 안에서 UI를 선언형으로 개발하는 것이다.

반응형 웹

• 모바일 퍼스트 : 모바일에서의 리소스가 더 적으므로 데스크탑에서 필요한게 아니라면 기본 스타일을 모바일 우선으로 하는게 좋다.
• Media query
• Container query : 부모에 contain 프로퍼티를 지정해서 부모의 size에 따라 style을 지정할 수 있다. Media query는 브라우저의 width 기준으로 값을 주는데 Container query는 Element 기준으로 지정할 수 있다. 아직 크롬에서만 지원한다.

다크모드

dom property와 css variables를 활용하여 설정된 dom property에 따라 설정된 css variables를 사용한다.

body {
  --color: #000000;
  --background-color: #ffffff;
}

body[data-theme="dark"] {
  --color: #ffffff;
  --background-color: #000000;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

더 좋은 UX : 시스템 preference기반, localStorage를 활용하여 초기값을 설정한다.