export default {
  props: {}, 
  /*
   부모 컴포넌트 → 자식 컴포넌트로 데이터를 전달 (props: ['mode', 'disabled'])
  ex) 
      <child-component mode="edit"></child-component>
      [자식] props: ['mode']
      [사용]this.mode
  */
  
  data() {},
  /*
  	컴포넌트 내부 상태(state) 저장
    data() {
      return {
        count: 0,
        user: null
      }
    }
    
    [사용]
    this.count++
    [특징]
    컴포넌트의 로컬 상태
	화면과 반응형 연결
	값 변경 → 자동 렌더링
  */
  components: {},
  /*
  	다른 컴포넌트를 등록
    [사용]
    <PopupComponent />
    [역할]
    하위 컴포넌트 등록
	재사용 UI 구성
  */
  created(),
  /*
  	컴포넌트 생성 직후 실행되는 라이프사이클
    [사용]
    created() {
      console.log("컴포넌트 생성")
    }
    [특징]
	DOM 생성 전
	API 호출 많이 함
  */
  mounted() {},
  /*
  	DOM 렌더링 완료 후 실행
    [사용]
    mounted() {
      console.log("DOM 생성 완료")
    }
    [특징]
    DOM 접근 가능
	차트 / 라이브러리 초기화
  */
  beforeUnmount() {},
  /*
  	컴포넌트 제거 직전에 실행
    [사용]
    beforeUnmount() {
      console.log("컴포넌트 제거 전")
    }
    [특징]
    이벤트 제거
	타이머 제거
	메모리 정리
  */
  watch: {},
  /*
  	특정 데이터 변화를 감시
    [사용]
    watch: {
      count(newVal, oldVal) {
        console.log("count 변경")
      }
    }
    
    this.count = 10
    
    [특징]
    API 재요청
	데이터 동기화
  */
  computed: {},
  /*
  	계산된 데이터
    [사용]
    computed: {
      fullName() {
        return this.firstName + " " + this.lastName
      }
    }
    
    {{ fullName }}
    [특징]
    캐싱됨
	data 기반 계산값
  */
  methods: {}
  /*
  	일반 함수
    [사용]
    methods: {
      submit() {
        console.log("전송")
      }
    }
    <button @click="submit">
    [특징]
    이벤트 처리
	로직 실행
  */
}

Vue 컴포넌트 구조 정리

export default {
     props      → 부모 데이터 받기
     data       → 내부 상태
     components → 하위 컴포넌트 등록

     lifecycle
      created
      mounted
      beforeUnmount

     computed   → 계산된 데이터
     watch      → 데이터 변화 감시
     methods    → 함수
}

Vue 컴포넌트는 보통 이렇게 나눈다

입력
props

상태
data

계산
computed

이벤트
methods

감시
watch

생명주기
created
mounted

Vue의 options 가장 먼저 봐야 할 5가지 

1️⃣ props 먼저 본다 (데이터의 시작점)

✔ 이유

• 이 컴포넌트가 어떤 데이터를 외부에서 받는지 알 수 있음

즉

예

이걸 보면 바로 알 수 있음

📌 props = 컴포넌트 입력값

2️⃣ data 구조 본다 (상태 확인)

✔ 이유

이 컴포넌트가 어떤 상태를 관리하는지 알 수 있음

예

바로 추측 가능

📌 data = 컴포넌트 내부 상태

3️⃣ mounted / created 본다 (API 위치)

또는

✔ 이유

여기서 보통 API 호출이 시작됨

예

📌 데이터가 어디서 오는지 확인

4️⃣ computed 본다 (화면용 데이터)

✔ 이유

computed는 화면에 보여줄 데이터 가공

예

📌 computed = 화면용 데이터

5️⃣ methods 본다 (실제 로직)

✔ 이유

여기에 핵심 비즈니스 로직이 있음

예

📌 methods = 실제 기능

⭐ 실무에서 Vue 코드 읽는 순서

개발자들은 보통 이렇게 본다

Class 안에 Class가 또 들어가있는 구조 >> 중첩클래스 Nesred Class라고 한다

@Service
public class DailyReadingService {

    private static class SimilarityProfile {
        ...
    }
}

왜 static 이 붙었을까?

✔ static 의미

• 바깥 클래스 인스턴스(DailyReadingService)를 참조하지 않음
• 그냥 “이 서비스와 논리적으로 묶인 유틸/모델”임

즉 👇

“이 클래스는 DailyReadingService의 상태와 무관하고
단지 여기서만 쓰이는 도구다”

왜 굳이 Class 안에 넣었을까?

이유 1️⃣ 의미적 스코프 제한

private static

이 조합이 주는 메시지가 아주 강함.

❌ 다른 Service, Controller, Mapper에서 쓰지 마라
❌ 도메인 모델도 아니다
❌ 공용 DTO도 아니다

✅ DailyReadingService 내부 알고리즘 구현체다

이걸 "캡슐화" 라고 부른다

tW.merge(r.traitCode(), 3, Integer::sum);

이 한 줄이 하는 일은:

“traitCode 키가 있으면 기존 값에 3을 더하고,
없으면 3으로 새로 넣어라”

merge가 정확히 뭐냐?

메서드 시그니처

V merge(K key, V value,
        BiFunction<? super V, ? super V, ? extends V> remappingFunction)

해석하면:

• key가 없으면 → value를 그대로 put
• key가 있으면 →
  (기존값, 새값)을 remappingFunction에 넣고
  그 결과를 새 값으로 put

tW.merge를 “if 문”으로 풀어 쓰면

merge 안 쓴 버전

Integer old = tW.get(r.traitCode());
if (old == null) {
    tW.put(r.traitCode(), 3);
} else {
    tW.put(r.traitCode(), old + 3);
}

merge 쓴 버전

tW.merge(r.traitCode(), 3, Integer::sum);

Integer::sum 이건 뭐야?

이건 그냥 메서드 레퍼런스야.

(a, b) -> a + b

이걸 짧게 쓴 것.

그래서:

tW.merge(key, 3, (oldVal, newVal) -> oldVal + newVal);

예시

tW.merge("COURAGE", 3, Integer::sum);
// "COURAGE" 없음
// 결과: COURAGE → 3

tW.merge("COURAGE", 3, Integer::sum);
// 기존값: 3
// 새값: 3
// Integer::sum → 3 + 3
// COURAGE → 6