Summary

• DOM API
• Event
• NPM
• Sass
• Vue.js

DOM API

Document Object Model

HTML, XML 문서를 위한 API. 즉, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. 문서 구조, 스타일, 내용 등을 변경할 수 있도록하여 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. nodes와 objects로 문서를 표현한다.

Event

• prevent default (기본 동작 방지)
• stop propagation (이벤트 버블링 정지)
• Event Bubbling VS Event Capturing
• currentTarget VS target
• 이벤트 종류
  click, input, keydown, moveenter, mouseleave, scroll, resize
• event object 참고!
• 캡처링 --> 버블링 (아래로~위로!)
• addEventListener 옵션
  capture, once, passive (로직과 화면처리 분리)
• Event Capturing에서의 capture 옵션
  capture: true인 이벤트 핸들러인 경우 지울 때도 removeEventListener의 핸들러에 capture: true 옵션까지 동일하게 표기해준다.

NPM

• 프로젝트 시작 npm init -y

다음 3개 디렉토리는 필요시 생성/재생성이 가능하기 때문에 .gitignore 파일에 기입하여 원격 저장소에 올리지 않는 것이 좋다

• node-modules
• dist
• parcel-cache

Sass

• 재활용(mixins)
• list & map
  list는 배열과 유사, map은 객체와 유사.
  배열과 객체의 차이는? 배열은 index로 나열, 객체는 key-value 형태
• 중첩 (중요! 표준으로 바뀔 예정)
• BEM 방법론
• SCSS는 zero-based numbering이 아니다!
• use 키워드는 제일 꼭대기에!!!
  @use "sass:list"
@use "sass:"
  sass에서 파생되었기 때문에 scss가 아닌 sass로 쓴다
• SCSS 공식 홈페이지 > documentation > built-in modules 참고

Vue.js

• 단방향, 양방향 데이터 바인딩
  기본적으로 단방향, 양방향이 필요한 경우 v-model 사용
• 참고
  truthy 데이터에 부정 연산자를 취하면 falsy가 아닌 false가 되는 것에 주의. 거기에 다시 부정 연산자를 취하면 true가 된다.

'123' // truthy
!'123' // false, falsy 아님!!
!!'123' // true

Lifecycle

• created 먼저 고려하고, HTMl 구조를 알 수 없는 경우 mounted 사용

Component (Keyword)

• props, emit
• slot
• provide / inject
• 동적 & 비동기 컴포넌트
• Template refs