Til

📝 Today I Learned

HTML

• 개념
• DTD
• 태그
• 요소

CSS

• 속성
  • 너비(width / height)와 단위
  • 테두리(border)
  • 여백(margin / padding)
  • box-sizing
  • 넘침 제어(overflow)
  • 화면 출력과 투명도(display / opacity)
  • 글꼴과 문자
  • background
  • 배치
  • 플렉스 Container
  • 플렉스 Items
  • 전환(transition)
  • 변환(transform)
• 선택자

Git

• 버전 관리
• Markdown

JS

• Node.js

  • Node.js
  • nvm 설치
  • npm
  • 개발 서버 실행과 빌드
  • 유의적 버전(SemVer)

• JS 기초

  • 작성법 종류
  • 데이터 종류
  • 변수
  • 함수
  • 조건 반복문
  • DOM API
  • 메소드 체이닝(Method Chaining)
  • ECMASCript 및 프로젝트 초기화
  • 데이터 타입 확인
  • 연산자

• JS 함수

  • 함수 선언 및 표현
  • 화살표 함수
  • IIFE
  • 호이스팅(Hoisting)
  • 타이머 함수
  • 콜백(Callback)

• JS 클래스

  • 생성자 함수(prototype)
  • this
  • ES6 Classes
  • 상속(확장)

• JS 데이터

  • 문자
  • 숫자와 수학
  • 배열
  • 객체
  • 구조 분해 할당
  • 전개 연산자
  • 불변성
  • 얕은 복사와 깊은 복사
  • 가져오기 / 내보내기
  • Lodash
  • JSON
  • Storage
  • OMDb API

• 정규표현식

  • 메소드
  • 정규식
  • 플래그(옵션)
  • 패턴(표현)

TypeScript

• 개념

• 설치 및 사용

• Type Annotation

• Basic Types

  • Primitive Types
  • boolean / number /string
  • symbol / null & undefined / object
  • array / tuple / any
  • unknown / never / void

• Type System

  • 작성자와 사용자의 관점으로 코드 바라보기
  • Structural Type System vs Nominal Type System
  • 타입 호환성(Type Compatibility)
  • 타입 별칭 (Type Alias)

• TypeScript Compiler

  • extends, files, include, exclude
  • compileOptions

• Interfaces

  • Interface
  • optional property
  • function / implements
  • extends / function interface / readonly
  • type alias vs interface

• Classes

  • Class
  • constructor & initialize
  • 접근 제어자(Access Modifiers)
  • Getters & Setters
  • readonly properties
  • Index Signatures in class
  • Static Properties & Methods
  • Singletons
  • 상속(Inheritance)
  • Abstract Classes

• Generics

SCSS

• 개요
• 주석
• 중첩
• 상위 선택자 참조
• 변수
• 산술 연산
• 재활용(@mixin / @content)
• 반복문
• 함수
• 색상 내장 함수
• 가져오기(@import)
• 데이터 종류

BootStrap

• 개요 및 CDN 프로젝트 생성
• 버튼과 버튼 그룹(btn / btn-group)
• 드롭다운과 리스트(dropdown / list)
• 모달(modal)
• 양식(forms)
• 툴팁(tooltips)
• npm 프로젝트 생성 / 색상 커스터마이징

Bundler

• Parcel
  • 개요 및 프로젝트 생성
  • 정적 파일 연결
  • autoprefixer
  • babel
  • CLI
• Webpack
  • 프로젝트 시작
  • entry / output
  • plugins
  • 정적 파일 연결
  • module
  • SCSS
  • Autoprefixer(PostCSS)
  • babel
  • npx / degit

Vue.js

• Vue 개요

  • CDN / Codepen
  • CLI / Vetur
  • Vue3 Webpack Template
  • ESLint
  • 선언적 렌더링 / 입력 핸들링
  • 조건문 / 반복문

• Vue 문법

  • 인스턴스 / 라이프사이클
  • 템플릿 문법
  • Computed
  • Computed 캐싱
  • Getter / Setter
  • Watch
  • 클래스와 스타일 바인딩
  • 조건부 렌더링
  • 리스트 렌더링
  • 이벤트 핸들링
    • 이벤트 수식어
    • 키 수식어
  • 폼 입력 바인딩
  • v-model 수식어
  • 컴포넌트
    • 기초
    • 속성 상속
    • Emit
    • Slot
    • Provide / Inject
    • Refs

• 컴포지션 API

  • 반응형 데이터(반응성)
  • 기본 옵션과 라이프 사이클
  • props / context

• 단위 테스트

  • 테스트 종류
  • 테스트 환경 구성 및 테스트
  • Jest Globals
  • Jest Matchers
  • 비동기 테스트
  • 모의 함수
  • VTU
  • VTU API
  • mount / shallowMount

• E2E 테스트

  • Cypress 설치 및 환경 구성
  • Cypress API

• Nuxt

  • CSR / SSR
  • Open Graph
  • Nuxt / Heroku