22_03_03_Thu.md

[22.03.03.Thu] - Day 20

Vue.js

• v-if 는 실제 태그 자체가 DOM에서 보였다 사라짐

  • 실제 HTML 요소 완전히 삭제했다가 다시 생성
  • 화면 로딩되는 순간 A, M, G 권한처럼 이미 결정되는 것은 v-if 사용!
  • 사용자 수 고려해서 G-M-A 순으로 구성

• v-show는 display none으로 처리됨

  • 보였다 안보였다 하는 탭 같은 자주 클릭하는 요소들은 v-show 사용
  • 전혀 쓰지 않은 것들을 불필요하게 display none 처리할 필요 없음

• computed

  • 계산해서 data 안으로 넣는 효과 (새로운 데이터 키 만듦)
  • 양방향 바인딩 지원
  • 변경사항 실시간 감지 가능한 큰 장점
  • 실무) 로그인한 사용자 담는 데이터 키 반환, 로그인 일어나면 감지해서 각각 화면 사용 위함
  • 로그인 사용자 정보는 시스템 거의 모든 화면에서 필요함

• watch

  • 값이 변경되고 있는지 감지하고 싶음
  • 데이터 키와 동일한 이름으로 함수 만듦
  • 기존 값 -> 새로운 값 바뀐 히스토리 알 수 있음
  • 하나의 필드에 대한 변동 사항 관리
    • 사용자 행동 패턴 분석 가능
  • 유튜브 시청 기록 같은 것은 클릭하는 순간 다 DB에 따로 저장함

• 컴포넌트 폴더에 만든 것은 라우터 등록 안함

  • 작은 단위 조각
  • 라우터에 등록하는 것은 실제 페이지
  • 컴포넌트 이름명(파일명) 짓는 규칙 다름

• 부모로부터 전달받은 props는 자식에서는 readonly, 부모에서만 변경 가능

• 자식 컴포넌트 입장에서는 어느 부모 컴포넌트에서 받아온지는 모름

  • 자식에서 부모 컴포넌트로 데이터 전달은 가능

• 페이지 타이틀 같은 작은 단위도 다 컴포넌트로 만듦

  • 협업 시 + 스타일 변경할 때 유용

• 컴포넌트명 자동으로 케밥 케이스로 사용 가능

• 재사용 극대화

  • 컴포넌트
  • mixin
  • 플러그인
  • 커스텀 디렉티브 ex. v-for, v-if, ...

[Note]

• 개발을 진정으로 잘하는 사람은 사용자를 잘 고려한 사람
• 개발자는 코드를 잘 설계하고 잘 정리하는 것 뿐만이 아님
  • 사용자가 실제로 이 시스템을 사용하면서 어떤 경험을 하는지 파악!
• FE 프레임워크
  • 컴포넌트 재사용성 뛰어남
• 검색과 조희의 의미 다름
  • 하나로 통일 해야함

Source Code