Vue Composition API는 Vue 3에서 새롭게 도입된 API로, 기존의 Options API를 보완하거나 대체할 수 있는 기능을 제공합니다. 주로 코드의 재사용성과 가독성을 높이고 더 유연한 상태 관리 및 로직 구성을 가능하게 합니다.

<script setup>
import { computed } from "vue";
import Child from "./components/Child.vue";

const count = ref(0);
const arr = reactive([1,2,3])
const double = computed(() => count.value * 2);
const increment = () => count.value++;

provide("provideC", count);

watch(count, () => {
  console.log("state2 changed");
});
</script>
<template>
  <h1>{{ count }}</h1>
  <h2>{{ double }}</h2>
  <button @click="increment">증가</button>
  <Child :count="count"/>
</template>
<style scoped></style>

<script setup>
import { inject, onMounted } from "vue";

const props = defineProps({
    count:Number
})

const provideC = inject("provideC")
onMounted(() => {});
</script>
<template>
   <h1>life</h1>
   <p>{{ props.count }}</p>
   <p>pc {{ provideC }}</p>
</template>
<style scoped></style>

• setup : Composition API를 더욱 간편하게 사용할 수 있도록 제공되는 컴파일 타임 전용 문법입니다.
• ref와 reactive : ref는 기본자료형, reactive는 참조 자료형의 값에 대한 반응성을 제공합니다.
• computed : 계산된 값을 정의할 때 사용합니다.
• watch : 특정 상태를 감시하여 그 상태가 변할 때 추가적인 동작을 수행합니다
• defineProps : defineProps를 사용하면 컴포넌트의 props를 선언하고 사용할 수 있습니다.
• defineEmits : defineEmits를 사용하여 컴포넌트에서 이벤트를 선언합니다.
• provide, inject : 부모-자식 관계(또는 더 깊은 하위 관계)에서 데이터를 공유하기 위해 사용합니다.
• 라이프사이클 : onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted

템플릿 조각을 자식 컴포넌트에 전달하고 자식 컴포넌트가 자체 템플릿 내에서 조각을 렌더링하도록 할 수 있습니다.

<FancyButton>
  클릭하기! <!-- 슬롯 컨텐츠 -->
</FancyButton>

<button class="fancy-btn">
  <slot></slot> <!-- 슬롯 아울렛 -->
</button>

슬롯 사용 시, FancyButton이 button을 렌더링하고, 내부 컨텐츠를 자식 컴포넌트에게 제공합니다. 슬롯을 사용하면 재사용한 컴포넌트를 만들 수 있습니다.

렌더링 범위

슬롯 컨텐츠는 부모 컴포넌트에 정의되어 있으므로 부모 컴포넌트의 데이터 범위에 접근할 수 있습니다. 슬롯 콘텐츠에는 하위 컴포넌트의 데이터에 대한 액세스 권한이 없습니다.

대체 컨텐츠

슬롯에 대체(fallback) 컨텐츠를 지정하여, 컨텐츠가 제공되지 않을 때만 렌더링되도록 할 수 있습니다.

<button type="submit">
  <slot>
    제출 <!-- 대체 컨텐츠 -->
  </slot>
</button>

이름이 있는 슬롯

단일 컴포넌트에 여러 개의 슬롯 아울렛이 있는 경우 사용합니다. name이 없는 slot 아울렛은 암시적으로 "default"라는 이름을 갖습니다.

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

이름이 있는 슬롯을 전달하려면, template 엘리먼트와 함께 v-slot 디렉티브를 사용하고, 슬롯 이름을 v-slot (#)에 인자로 전달해야 합니다

<BaseLayout>
  <template #:header>
    <!-- 헤더 슬롯의 컨텐츠 -->
  </template>
</BaseLayout>

동적인 슬롯 이름

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

  <!-- 단축 문법 사용 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

범위가 지정된 슬롯

props를 컴포넌트에 전달하는 것처럼 속성을 슬롯 아울렛에 전달할 수 있습니다

<!-- <MyComponent> 템플릿 -->
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

<!-- 부모 템플릿 -->
<MyComponent v-slot="{ text, count }">
  {{ text }} {{ count }}
</MyComponent>

이름이 있고 범위가 지정된 슬롯

<MyComponent>
  <template #header="headerProps">
    {{ headerProps }}
  </template>

  <template #default="defaultProps">
    {{ defaultProps }}
  </template>

  <template #footer="footerProps">
    {{ footerProps }}
  </template>
</MyComponent>

provide와 inject는 Vue.js에서 컴포넌트 간 데이터 전달을 단순화하기 위해 사용됩니다. 특히, 부모 컴포넌트와 하위 컴포넌트 간에 중첩 구조가 깊어지는 경우에 유용합니다.

Provide

export default {
  provide: {
    message: '안녕!'
  }
}

data()를 통해 선언된 데이터와 같이 인스턴스별 상태를 제공해야 하는 경우, provide는 함수 값을 사용해야 합니다

export default {
  data() {
    return {
      message: '안녕!'
    }
  },
  provide() {
    // 함수 구문을 사용하여 `this`에 접근할 수 있습니다.
    return {
      message: this.message
    }
  }
}

Inject

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // 주입된 값
  }
}

inject는 컴포넌트 자체 상태보다 먼저 구성되므로, data()에서 주입된 속성에 접근할 수 있습니다

export default {
  inject: ['message'],
  data() {
    return {
      // 주입된 값을 기반으로 하는 초기 데이터
      fullMessage: this.message
    }
  }
}

inject시 기본 값 설정하기

export default {
  // 주입에 대한 기본값을 선언할 때
  // 객체 구문이 필요합니다.
  inject: {
    message: {
      from: 'message', // 주입 시 키와 같은 이름을 사용하는 경우 선택사항입니다.
      default: '이것은 기본 값 문자열 입니다.'
    },
    user: {
      // 생성하는 데 비용이 많이 드는 기본이 아닌 값 또는 컴포넌트 인스턴스마다
      // 고유해야 하는 값에 대해 팩토리 함수를 사용합니다.
      default: () => ({ name: '철수' })
    }
  }
}

반응형으로 만들기

provide로 공급한 데이터는 반응성을 갖지 않습니다. inject로 받은 값을 바꿔도 화면에 반영되지 않습니다. 반응형으로 연결된 inject를 만들기 위해, computed() 함수를 사용하여 계산된 속성을 제공해야 합니다

import { computed } from 'vue'

export default {
  data() {
    return {
      message: '안녕!'
    }
  },
  provide() {
    return {
      // 계산된 속성을 명시적으로 제공
      message: computed(() => this.message)
    }
  }
}

심볼 키 사용하기

많은 의존성 제공자가 있는 대규모 앱에서 작업하거나, 다른 개발자가 사용할 컴포넌트를 작성하는 경우, 잠재적 충돌을 피하기 위해 제공 키로 Symbol(심볼)을 사용하는 것이 가장 좋습니다.

// keys.js
export const myInjectionKey = Symbol()

// 제공하는 곳의 컴포넌트에서
import { myInjectionKey } from './keys.js'

export default {
  provide() {
    return {
      [myInjectionKey]: {
        /* 제공할 데이터 */
      }
    }
  }
}

// 주입되는 곳의 컴포넌트에서
import { myInjectionKey } from './keys.js'

export default {
  inject: {
    injected: { from: myInjectionKey }
  }
}

$emit : 자식 컴포넌트에서 이벤트를 발생시켜 부모 컴포넌트에 신호를 보냅니다.

<!-- Child.vue -->
<template>
  <button @click="$emit('custom-event', 'Hello from Child!')">Click Me</button>
</template>

<script>
export default {
  emits: ["custom-event"], // 정의된 이벤트
};
</script>

@ : 부모 컴포넌트에서 자식 컴포넌트의 이벤트를 리스닝합니다.

<!-- Parent.vue -->
<template>
  <Child @custom-event="handleCustomEvent" />
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  methods: {
    handleCustomEvent(message) {
      alert(message); // "Hello from Child!"
    },
  },
};
</script>

이벤트 인수

$emit에 추가 인수를 전달할 수 있습니다

<!-- 자식 컴포넌트 (Child.vue) -->
<template>
  <button @click="$emit('custom-event', 'Hello', 42)">Click Me</button>
</template>

<script>
export default {
  emits: ['custom-event'],
};
</script>

<!-- 부모 컴포넌트 (Parent.vue) -->
<template>
  <Child @custom-event="handleEvent" />
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  methods: {
    handleEvent(message, number) {
      console.log(message); // 출력: "Hello"
      console.log(number);  // 출력: 42
    },
  },
};
</script>

이벤트 유효성 검사

prop 타입 유효성 검사와 마찬가지로, 배열 구문 대신 객체 구문으로 정의된 이벤트는 유효성 검사가 가능합니다.

export default {
  emits: {
    // 유효성 검사 없음
    click: null,

    // submit 이벤트 유효성 검사
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}

부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 데이터입니다.

props는 props 옵션을 사용하여 선언됩니다

export default {
  props: ['foo'],
  created() {
    // props는 `this`에 노출됩니다.
    console.log(this.foo)
  }
}

문자열 배열을 사용하여 props를 선언하는 것 외에도 객체 선언 문법을 사용할 수도 있습니다

export default {
  props: {
    title: String,
    likes: Number
  }
}

Props 이름 케이싱

긴 속성명을 선언할 때 obj['kebab-case']와 같이 키에 따옴표를 사용하는 번거로움을 줄이기 위해, obj.camelCase와 같이 camelCase를 사용합니다.

export default {
  props: {
    greetingMessage: {
    type: String,
    required:true,
    }
  }
}

<MyComponent greeting-message="안녕!" />

props 옵션에서 디테일한 설정이 가능합니다:

• type: 전달받을 데이터 타입을 제한합니다.
• default: 기본값을 설정합니다.
• required: 해당 prop이 반드시 전달되어야 하는지 여부를 설정합니다.
• validator: 전달된 값이 유효한지 검사하는 함수입니다.

단방향 데이터 흐름

모든 props는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩을 형성합니다. 부모 속성이 업데이트되면 자식으로 흐르지만 그 반대는 안됩니다.

Prop 유효성 검사

컴포넌트는 props에 타입을 지정할 수 있습니다. 지정한 요구 사항이 충족되지 않으면 Vue는 브라우저의 JavaScript 콘솔에서 경고합니다.

    props: {
      validator(value, props) {
        // 값은 이 문자열 중 하나와 일치해야 합니다
        return ['성공', '경고', '위험'].includes(value)
      }
    },

불리언 캐스팅

Boolean 타입의 props는 네이티브 불리언 속성의 동작을 모방하는 특별한 캐스팅 규칙이 있습니다.

export default {
  props: {
    disabled: Boolean
  }
}

<!-- :disabled="true" 같음 -->
<MyComponent disabled />

<!-- :disabled="false" 같음 -->
<MyComponent />

여러 타입을 허용하도록 프롭(prop)을 선언할 때, Boolean에 대한 캐스팅 규칙도 적용됩니다. 그러나 String과 Boolean이 모두 허용되는 경우에는 주의해야 합니다 - Boolean 캐스팅 규칙은 String보다 앞에 위치해야만 적용됩니다

// disabled는 true로 캐스팅됩니다
export default {
  props: {
    disabled: [Boolean, Number]
  }
}

Vue.js에서 감시자 (Watcher) 는 데이터가 변경될 때 반응적으로 특정 로직을 실행할 수 있는 방법입니다. 주로 data 속성이나 computed 속성의 변화를 감지하고, 해당 데이터가 변할 때 자동으로 특정 작업을 수행하는 데 사용됩니다.

• watchedProperty: 감시할 데이터 속성
• newVal: 속성의 변경 후 값.
• oldVal: 속성의 변경 전 값.

<script>
export default {
  data() {
    return {
      age: 25,
    };
  },
  watch: {
    age(newVal, oldVal) {
      console.log(`Age changed from ${oldVal} to ${newVal}`);
    },
  },
};
</script>

깊은 감시 (Deep Watch)

기본적으로 watch는 기본 자료형의 변경만 감지합니다. 만약 객체나 배열처럼 참조 자료형의 내부 값 변화를 감지하려면, 깊은 감시(deep: true)를 사용해야 합니다.

watch: {
  'watchedProperty': {
    handler(newValue, oldValue) {
      // 객체나 배열 내부 값이 변할 때마다 실행
    },
    deep: true // 깊은 감시 설정
  }
}

ex

<template>
  <div>
    <button @click="changeObject">Change Object</button>
    <p>{{ userInfo }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: { name: 'John', age: 25 }
    };
  },
  watch: {
    userInfo: {
      handler(newVal, oldVal) {
        console.log('userInfo changed:', oldVal, '->', newVal);
      },
      deep: true
    }
  },
  methods: {
    changeObject() {
      this.userInfo.name = 'Jane'; // name만 변경
    }
  }
};
</script>

userInfo 객체가 깊은 감시를 받기 때문에, 객체의 내부 속성이 변할 때마다 handler가 호출됩니다.

immediate: 감시자 생성 시 즉시 콜백 트리거. 첫 호출 시 이전 값은 undefined. immediate: true를 사용하면 초기화 시점에도 watch 콜백을 즉시 실행할 수 있습니다. 기본적으로 watch는 데이터가 변경된 후에만 호출됩니다. 그러나 immediate를 설정하면 컴포넌트가 생성될 때에도 콜백이 실행됩니다.

watch: {
  counter: {
    handler(newVal, oldVal) {
      console.log(`Counter changed: ${oldVal} -> ${newVal}`);
    },
    immediate: true // 컴포넌트 생성 시점에도 호출
  }
}

Vue 생명주기 흐름

Vue의 생명주기는 다음과 같은 순서로 진행됩니다

beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted 각 생명주기 훅은 특정 시점에 자동으로 호출되며, 그에 따라 특정 로직을 실행할 수 있습니다.

1. beforeCreate

시점: Vue 인스턴스가 생성되기 직전. 특징: data, computed, watch 등의 옵션이 설정되지 않았기 때문에 인스턴스의 초기화가 아직 완료되지 않은 상태입니다. 용도: 데이터가 아직 설정되지 않았거나, 인스턴스가 초기화되기 전에 해야 할 작업이 있을 경우 사용합니다.

2. created

시점: Vue 인스턴스가 생성되고, 데이터가 초기화된 후 호출됩니다. 특징: 데이터, 메소드, 계산된 속성 등 인스턴스가 초기화된 상태지만, DOM은 아직 렌더링되지 않았습니다. 용도: 서버에서 데이터를 가져오거나, 인스턴스가 생성된 후에 추가적인 로직을 수행할 때 사용합니다.

3. beforeMount

시점: 컴포넌트가 마운트되기 직전, 즉 DOM에 처음 추가되기 전입니다. 특징: 아직 렌더링된 DOM 요소는 없지만, 템플릿이 컴파일된 상태입니다. 용도: 초기 렌더링 전에 DOM을 준비해야 할 때 사용합니다.

4. mounted

시점: 컴포넌트가 마운트된 후, 즉 DOM에 추가된 후 호출됩니다. 특징: DOM에 접근할 수 있으며, 외부 라이브러리나 API 요청 등을 사용할 수 있습니다. 용도: DOM을 직접 조작하거나, 외부 API에서 데이터를 가져오는 등의 작업에 적합합니다.

5. beforeUpdate

시점: 데이터가 변경되어 DOM 업데이트가 일어나기 직전에 호출됩니다. 특징: DOM은 아직 업데이트되지 않았습니다. 용도: DOM 업데이트 전에 필요한 작업을 처리할 수 있습니다. 예를 들어, 특정 데이터 변경에 따른 처리가 필요할 때 사용합니다.

6. updated

시점: 데이터가 변경되어 DOM이 업데이트된 후 호출됩니다. 특징: DOM이 업데이트된 후에 호출되므로, DOM이 완전히 반영된 상태에서 작업을 진행할 수 있습니다. 용도: DOM 변경 후 후속 작업이나 애니메이션 등을 처리할 때 사용됩니다.

7. beforeUnmount

시점: 컴포넌트가 파괴되기 직전에 호출됩니다. 특징: 컴포넌트가 사라지기 전 상태에서 호출되므로, 자원을 해제하거나 리소스를 정리할 때 사용합니다. 용도: 타이머나 이벤트 리스너 제거 등의 작업에 적합합니다.

8. unmounted

시점: 컴포넌트가 파괴된 후, 즉 DOM에서 완전히 제거된 후 호출됩니다. 특징: 컴포넌트가 완전히 사라졌으므로 더 이상 상태나 DOM을 변경할 수 없습니다. 용도: 정리 작업을 하거나, 남아 있는 이벤트 리스너나 인터벌 등을 제거하는 데 사용됩니다.

beforeUpdate vs updated

beforeUpdate와 updated는 모두 데이터 변경 후 호출되는 생명주기 훅입니다. 차이점은 바로 "DOM 업데이트 직전"과 "DOM 업데이트 직후"의 시점 차이입니다.

beforeUpdate: 시점: 데이터가 변경되었지만, DOM이 아직 업데이트되기 전에 호출됩니다. 특징: 데이터 변경 사항이 UI에 반영되기 전에 호출됩니다. 용도: 이 훅에서 데이터 변경이 이루어지면 DOM에 반영되지 않기 때문에 필요한 추가 작업을 할 수 없습니다. 예를 들어, UI에서 데이터 변경을 보고 무엇을 해야 하는지 결정을 내릴 수 있지만, 그 시점에서는 DOM에 반영되지 않았기 때문에 상태 변화가 즉시 반영되지 않습니다.

updated: 시점: 데이터가 변경되고, DOM이 이미 업데이트된 후에 호출됩니다. 특징: 데이터 변경 사항이 UI에 반영된 후 호출됩니다. 용도: DOM 업데이트 이후의 작업을 처리할 수 있습니다. 예를 들어, 애니메이션을 실행하거나, 업데이트된 DOM을 기반으로 추가적인 로직을 수행할 수 있습니다.

1. 전역 컴포넌트 등록

모든 컴포넌트에서 별도의 import 없이 사용할 수 있음. Vue 애플리케이션 전역에 등록되므로 컴포넌트를 사용하지 않아도 로드됨. 보통 공용 컴포넌트(예: Modal, Button, Navbar)에 사용.

//main.js
import "./assets/css/index.css";

import { createApp } from "vue";
import App from "./App.vue";
import First from "./components/First.vue";

const app = createApp(App);
//전역 컴포넌트 등록 방법
app.component("First", First);

app.mount("#app");

<script>
import First from "./components/First.vue";

export default {
  data() {
    return {};
  },
};
</script>
<template>
  <h1 className="text-3xl font-bold underline">Hello world!</h1>
  <First />
</template>

2. 지역 컴포넌트 등록

특정 컴포넌트 내부에서만 사용 가능. Vue 컴포넌트 내의 components 옵션으로 등록. 성능 최적화 가능. 각 컴포넌트에서만 사용 가능하므로 네이밍 충돌 방지. 매번 import 및 components에 등록 필요.

<script>
import First from "./components/First.vue";

export default {
  name:"App",
  components:{
    First
  },
  data() {
    return {};
  },
};
</script>
<template>
  <h1 className="text-3xl font-bold underline">Hello world!</h1>
  <First />
</template>

Scoped

Scoped 스타일의 작동 원리

Vue는 scoped 스타일을 자동으로 컴파일하여 각 컴포넌트의 DOM 요소에 고유한 특성(selector attribute) 을 추가합니다. 다음과 같이 스타일을 정의하면

<template>
  <div class="example">Hello</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

컴파일 후 HTML은 다음과 같이 변환됩니다

<div class="example" data-v-12345> <!-- 고유 데이터 속성 추가 -->
  Hello
</div>

따라서, 이 스타일은 다른 컴포넌트의 example 클래스에 영향을 주지 않습니다.

Scoped와 자식 컴포넌트

부모 컴포넌트의 scoped 스타일은 자식 컴포넌트의 루트 요소에도 영향을 줄 수 있습니다. 영향을 주지 않으려면 자식 컴포넌트를 다른 요소로 감싸야합니다.

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<style scoped>
div {
  color: red;
}
</style>

자식 컴포넌트의 루트 요소가 div인 경우, 부모의 스타일이 자식 컴포넌트에도 적용됩니다.

<!-- ChildComponent.vue -->
<template>
  <div>I'm a child component</div>
</template>

Scoped와 속성

컴포넌트에서 속성을 설정하면, 해당 속성은 컴포넌트의 루트 요소에만 적용됩니다. props 속성으로 데이터를 전달받을 수 있고, props로 받지 않는 속성만 root요소에 붙습니다. 만약 컴포넌트에 루트 요소가 없으면 속성이 적용되지 않습니다. v:bind로 string아닌 다른 타입으로 전달 가능합니다.

<template>
  <MyComponent id="unique-id" class="custom-class" />
</template>

<div id="unique-id" class="custom-class" data-v-12345></div>

계산된 속성은 Vue의 데이터 변경에 기반하여 자동으로 업데이트되는 읽기 전용 속성입니다.

경우에 따라 읽기-쓰기 속성으로도 활용할 수 있습니다.

데이터에 기반해서 가공처리를 할 때 사용하고, 연산비용이 높지 않아 Vue에서 권장하는 방법입니다.

데이터가 바뀌면 캐싱을 풀고 다시 계산합니다.

<script>
export default {
  data() {
    return {
      firstName: "Jane",
      lastName: "Doe",
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};
</script>

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

fullName은 캐싱되며, firstName 또는 lastName이 변경될 때만 다시 계산됩니다.

계산된 속성에 getter와 setter를 정의하여, 데이터를 양방향으로 바인딩할 수 있습니다.

<script>
export default {
  data() {
    return {
      firstName: "John",
      lastName: "Smith",
    };
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(newValue) {
        const parts = newValue.split(" ");
        this.firstName = parts[0] || "";
        this.lastName = parts[1] || "";
      },
    },
  },
};
</script>

<template>
  <div>
    <input v-model="fullName" />
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
  </div>
</template>

사용자 입력에 따라 firstName과 lastName을 자동으로 업데이트할 수 있습니다.

일반적으로 v-on 디렉티브는 단축 문법으로 @ 기호를 사용합니다. v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용합니다.

<button @click="count++">1 추가</button>
<p>숫자 값은: {{ count }}</p>

이벤트 객체 접근하기

$event를 사용하여 메서드에 전달하거나 인라인 화살표 함수를 사용할 수 있습니다.

<!-- 특수한 키워드인 $event 사용 -->
<button @click="warn('아직 양식을 제출할 수 없습니다.', $event)">
  제출하기
</button>

<!-- 인라인 화살표 함수 사용 -->
<button @click="(event) => warn('아직 양식을 제출할 수 없습니다.', event)">
  제출하기
</button>


function warn(message, event) {
  // 이제 네이티브 이벤트 객체에 접근할 수 있습니다.
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

이벤트 수식어

v-on은 점(.)으로 시작하는 지시적 접미사인 이벤트 수식어를 제공합니다.

<!-- 클릭 이벤트 전파가 중지됩니다. -->
<a @click.stop="doThis"></a>

<!-- submit 이벤트가 더 이상 페이지 리로드하지 않습니다. -->
<form @submit.prevent="onSubmit"></form>

<!-- 수식어를 연결할 수 있습니다. -->
<a @click.stop.prevent="doThat"></a>

<!-- 이벤트에 핸들러 없이 수식어만 사용할 수 있습니다. -->
<form @submit.prevent></form>

<!-- event.target이 엘리먼트 자신일 경우에만 핸들러가 실행됩니다. -->
<!-- 예를 들어 자식 엘리먼트에서 클릭 액션이 있으면 핸들러가 실행되지 않습니다. -->
<div @click.self="doThat">...</div>

<!-- 이벤트 리스너를 추가할 때 캡처 모드 사용           -->
<!-- 내부 엘리먼트에서 클릭 이벤트 핸들러가 실행되기 전에, -->
<!-- 여기에서 먼저 핸들러가 실행됩니다.                -->
<div @click.capture="doThis">...</div>

<!-- 클릭 이벤트는 단 한 번만 실행됩니다. -->
<a @click.once="doThis"></a>

<!-- 핸들러 내 `event.preventDefault()`가 포함되었더라도 -->
<!-- 스크롤 이벤트의 기본 동작(스크롤)이 발생합니다.        -->
<div @scroll.passive="onScroll">...</div>

입력키 수식어

키보드 이벤트를 수신할 때, 특정 키를 확인해야 하는 경우가 많기 때문에, 키 수식어를 지원합니다:

<!-- `key`가 `Enter`일 때만 `submit`을 호출합니다 -->
<input @keyup.enter="submit" />

<!-- $event.key가 'PageDown'일 경우에만 호출됩니다 -->
<input @keyup.page-down="onPageDown" />

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">시작하기</div>

<!-- exact -->
<!-- Ctrl과 함께 Alt 또는 Shift를 누른 상태에서도 클릭하면 실행됩니다. -->
<button @click.ctrl="onClick">A</button>

<!-- 오직 Ctrl만 누른 상태에서 클릭해야 실행됩니다. -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 시스템 입력키를 누르지 않고 클릭해야지만 실행됩니다. -->
<button @click.exact="onClick">A</button>

마우스 버튼 수식어

특정 마우스 버튼에 의해 이벤트가 트리거 되도록 제한하고 싶을 때 사용합니다. .left .right .middle

https://school.programmers.co.kr/learn/courses/30/lessons/81301 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다.

다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다.

1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요.

정답 코드

function solution(s) {
  const numbers = {
    0: "zero",
    1: "one",
    2: "two",
    3: "three",
    4: "four",
    5: "five",
    6: "six",
    7: "seven",
    8: "eight",
    9: "nine",
  };
  let word = "";
  let result = "";
  for (let i = 0; i < s.length; i++) {
    word += s[i];
    if (!isNaN(Number(word))) {
      result += word;
      word = "";
    } else {
      for (key in numbers) {
        if (word === numbers[key]) {
          result += key;
          word = "";
          break;
        }
      }
    }
  }

  return Number(result);
}

//"one4seveneight"    1478

해설

1. 영단어 표를 객체로 선언해줍니다.
2. word = 객체에 단어가 포함되어있는지 확인하기 위함 result = 결과 반환용
3. 매개변수로 받은 s를 반복하면서 word에 추가해줍니다.
4. 추가한 후, 만약 word가 숫자라면 result에 추가하고 word를 초기화합니다. !isNaN(Number(word)) => 만약 숫자가 아닌 알파벳이라면 Number(word)가 NaN이므로 false
5. 만약 알파벳이라면 word가 선언한 numbers 객체의 값(numbers[key])과 일치하는 것이 있는지 확인합니다.
6. 일치하는 것이 있다면 result에 key를 추가합니다.
7. 일치하는 것이 없다면 다시 반복문을 진행합니다.
8. 반복문이 끝난 후 string 형태의 result를 숫자로 바꿔 반환합니다.

https://school.programmers.co.kr/learn/courses/30/lessons/68644 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요.

정답 코드

function solution(numbers) {
  const set = new Set();
  for (let i = 0; i < numbers.length; i++) {
    for (let j = i + 1; j < numbers.length; j++) {
      set.add(numbers[i] + numbers[j]);
    }
  }
  return Array.from(set).sort((a, b) => a - b);
}

// [2,1,3,4,1] => [2,3,4,5,6,7]

해설

1. 두 수를 더해서 만들 수 있는 수를 반환해야 하므로 중복이 없는 set을 선언해줍니다.
2. 숫자를 더하면서 set에 추가합니다. (2+1=3, 2+3=5, 2+4=6, 2+1=3(이미 set에 있으므로 추가X))
3. set을 오름차순 정렬한 후, 배열로 바꿔 반환합니다.

https://school.programmers.co.kr/learn/courses/30/lessons/68935 자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution 함수를 완성해주세요.

정답 코드

function solution(n) {
  const str = n.toString(3);
  let reversed = "";
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }
  return parseInt(reversed, 3);
}

해설

1. n을 toString(3)으로 3진법으로 바꿔준다. (str = '1200')
2. 3진법으로 바꾼 것을 뒤에서부터 reversed에 추가한다. (reversed = '0012')
3. parseInt(reversed, 3)를 이용하여 reversed를 3진법에서 10진법으로 바꿔준다.

https://school.programmers.co.kr/learn/courses/30/lessons/12982

S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다.

물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다.

부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물품을 지원할 수 있는지 return 하도록 solution 함수를 완성해주세요.

정답 코드

function solution(d, budget) {
  d.sort((a, b) => a - b);
  let rest = budget;
  let cnt = 0;
  for (let i = 0; i < d.length; i++) {
    if (rest < d[i]) break;
    rest = rest - d[i];
    cnt++;
  }
  return cnt;
}

// d = [1,3,2,5,4]  budget = 9   result = 3

해설

1. 최대한 많은 부서에 지원해야 하므로 d를 오름차순으로 정렬한다.
2. 오름차순으로 정렬한 d를 첫 번째 인덱스부터 순서대로 rest와 비교한다.
3. rest가 더 크다면 rest 에서 d[i]를 빼고 cnt를 1 증가시킨다.
4. rest와 비교하여 d[i]가 더 크다면 반복문을 종료한다.
5. cnt 반환

양방향 데이터 바인딩을 처리하는 디렉티브입니다.

v-model로 폼 요소 제어하기

input

<script>
export default {
  data() {
    return {
      userId: "test",
    };
  },
};
</script>

<template>
  <div>
    <label>ID</label>
    <input type="text" v-model="userId" />
  </div>
</template>

textarea

<script>
export default {
  data() {
    return {
      directiveName: "v-model",
      str: "여러 줄 바꿈\n텍스트에어리어",
    };
  },
};
</script>

<template>
  <div>
    <h1>{{ directiveName }}</h1>
    <textarea v-model="str" />
  </div>
</template>

select

<script>
export default {
  data() {
    return {
      food: "바나나",
    };
  },
};
</script>

<template>
  <div>
    <label>ID</label>
    <select v-model="food">
      <option value="사과">사과</option>
      <option value="바나나">바나나</option>
      <option value="멜론">멜론</option>
    </select>
  </div>
</template>

checkbox

<script>
export default {
  data() {
    return {
      checked: true,
    };
  },
};
</script>

<template>
  <div>
    <input type="checkbox" v-model="checked" />
  </div>
</template>

checkbox는 체크가 되었을 때의 값과 안되었을때의 값을 따로 지정할 수도 있습니다.

<script>
export default {
  data() {
    return {
      checked: "참",
    };
  },
};
</script>

<template>
  <div>
    <input
      type="checkbox"
      v-model="checked"
      true-value="참"
      false-value="거짓"
    />
    {{ checked }}
  </div>
</template>

여러개의 checkbox

<script>
export default {
  data() {
    return {
      checked: [],
    };
  },
};
</script>

<template>
  <div>
    <label
      ><input type="checkbox" v-model="checked" value="사과" /> 사과
    </label>
    <label
      ><input type="checkbox" v-model="checked" value="바나나" />바나나</label
    >
    <label><input type="checkbox" v-model="checked" value="멜론" />멜론</label>
    <p>{{ checked }}</p>
  </div>
</template>

radio

<script>
export default {
  data() {
    return {
      checked: "",
    };
  },
};
</script>


<template>
  <div>
    <label><input type="radio" v-model="checked" value="사과" /> 사과 </label>
    <label><input type="radio" v-model="checked" value="바나나" />바나나</label>
    <label><input type="radio" v-model="checked" value="멜론" />멜론</label>
    <p>{{ checked }}</p>
  </div>
</template>

1. 기본 SFC에서 사용

Scoped: 스타일이 현재 컴포넌트에서만 적용됩니다.

<style scoped>
.example {
  color: red;
}
</style>

2. Style 태그에서 파일 Import

스타일 파일을 style 태그 내에서 import 할 수 있으며, 이 import도 scoped에 영향을 받습니다.

<style scoped>
@import './styles.css'; /* 해당 스타일이 scoped 내에서만 적용 */
</style>

3. Main에서 Import (전역으로)

main.js에서 스타일을 import하면 전역으로 적용됩니다.

4. 인라인 스타일

스타일 속성에 직접 값을 입력합니다.

<template>
  <div :style="{ color: textColor }">Hello</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red'
    };
  }
};
</script>

v-bind를 사용한 스타일: v-bind로 스타일을 바인딩할 때는 카멜 케이스를 사용합니다.

<template>
  <div :style="{ backgroundColor: backgroundColor, fontSize: fontSize }">Hello</div>
</template>

배열 스타일 바인딩: 여러 스타일 객체를 배열로 묶어 바인딩할 수 있습니다.

<template>
  <div :style="[styleObject1, styleObject2]">Hello</div>
</template>

<script>
export default {
  data() {
    return {
      styleObject1: { color: 'blue' },
      styleObject2: { fontSize: '20px' }
    };
  }
};
</script>

5. 클래스 바인딩

v-bind:class를 사용하여 동적으로 클래스 이름을 바인딩할 수 있습니다.

<template>
  <div :class="{ active: isActive, 'text-red': isRed }">Hello</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isRed: false
    };
  }
};
</script>

CSS 프레임워크와 Styled Componets를 이용해서 스타일할 수 있습니다.

6. Tailwind CSS, BootstrapVue

7. Vue Styled Components

Vue의 SFC(Single File Component)는 Vue의 독자적인 구성 방식으로, HTML, JavaScript, CSS를 한 파일 안에서 작성하는 시스템입니다.

<template>
  <!-- Vue 컴포넌트의 HTML 구조 -->
  <div class="app">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      title: "Vue SFC 기본 구조",
    };
  },
};
</script>

<style>
/* Vue 컴포넌트의 스타일 */
.app {
  text-align: center;
  color: #42b983;
}
</style>

• template Vue 컴포넌트의 HTML 구조를 정의합니다. 반드시 한 개의 최상위 루트 요소가 있어야 합니다.
• script Vue의 로직과 데이터, 메서드 등을 정의합니다. 기본적으로 export default를 사용하며, Vue 컴포넌트로 내보냅니다.
• style Vue 컴포넌트의 CSS를 정의합니다. scoped 속성을 추가하면 해당 컴포넌트의 스타일에만 적용됩니다.

옵션 API(Options API)

옵션 API는 data, methods, computed, watch, props, components, emits 등 다양한 옵션을 통해 컴포넌트를 구성하는 방식입니다. 옵션 API의 핵심은 컴포넌트의 설정을 객체 형식으로 정의하는 것입니다. 이 방식은 코드가 명확하고 이해하기 쉽지만, 상태 관리가 복잡해지면 코드가 다소 길어질 수 있습니다. 그러나 Vue 3에서 제공하는 Composition API와 비교할 때, 옵션 API는 더 직관적이고 학습 곡선이 낮습니다.

Vue 필수 문법

1. 데이터 정의하기

data 속성은 컴포넌트의 상태를 정의하는 객체입니다. 이 객체의 프로퍼티는 컴포넌트에서 사용할 수 있는 데이터가 됩니다.

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  }
});

2. 데이터 보간

데이터 보간은 템플릿에서 데이터를 표시하는 방법입니다. 중괄호({{ }})를 사용하여 데이터를 출력할 수 있습니다.

<div id="app">
  <h1>{{ message }}</h1>
  <p>Count: {{ count }}</p>
  <button @click="count++">Increase Count</button>
</div>

3. 디렉티브

v-html, v-text

HTML, 텍스트를 안전하게 출력합니다.

data() {
  return {
    htmlContent: '<strong>This is bold text</strong>'
    rawText: '<h1>This will not be rendered</h1>'
  };
}


<div v-html="htmlContent"></div>
<div v-text="message"></div>

v-pre

내용을 출력하기 전에 컴파일하지 않도록 합니다.

data() {
  return {
    rawText: '<h1>This will not be rendered</h1>'
  };
}

<pre v-pre>{{ rawText }}</pre>

v-bind

HTML 속성에 데이터를 바인딩합니다.

data() {
  return {
    imageSrc: 'path/to/image.jpg'
  };
}

<img v-bind:src="imageSrc" alt="Dynamic Image">
<--축약 가능-->
<img :src="imageSrc" alt="Dynamic Image">
<-- 속성과 변수 이름이 같을 경우 -->
<img :src alt="Dynamic Image">

5. v-if, v-else-if, v-else

조건에 따라 요소를 렌더링합니다.

<div v-if="count > 0">Count is positive</div>
<div v-else-if="count < 0">Count is negative</div>
<div v-else>Count is zero</div>

6. v-show

조건에 따라 요소의 표시 여부를 결정합니다. (CSS display 속성 사용)

data() {
  return {
    isVisible: true
  };
}

<div v-show="isVisible">This is visible</div>

7. v-cloak

Vue가 컴파일될 때까지 해당 요소를 숨깁니다.

<div v-cloak>{{ message }}</div>

<style>
[v-cloak] { display: none; }
</style>

8. v-for

리스트를 반복하여 렌더링합니다.

data() {
  return {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  };
}

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

뷰는 사용자 인터페이스(UI, User Interface)를 만드는 데 사용하는 자바스크립트 기반 오픈소스 프로그레시브 프레임워크입니다. 프로그레시브 프레임워크란 이미 다른 사양으로 개발된 웹 애플리케이션에서 일부분만 ‘점진적으로(progressive)’ 적용할 수 있도록 모듈화하고 유연한 구조를 갖춘 프레임워크를 의미합니다

Vue는 주로 웹페이지를 쉽고 빠르게 제작하기 위해 사용합니다.

MVVM

뷰는 MVVM 아키텍처 패턴을 따릅니다. MVVM 아키텍처 패턴은 데이터를 보여주는 뷰(view) 영역과 데이터를 처리하는 모델(model) 사 이에 데이터를 중개하는 뷰 모델(view model) 계층을 두어 UI와 데이터 처리 로직의 상호 의존 성을 줄이는 아키텍처 패턴을 말합니다.

양방향바인딩

뷰는 데이터의 바인딩이 양방향 바인딩입니다. 예를 들어서 리액트에서는 상태를 정의하고, 상태를 이벤트와 연결해서 직접 값을 바꿔야 하는 단방향 바인딩입니다. 뷰는 양방향 바인딩이기 때문에 생성한 데이터를 연결해주기만 하면 끝입니다.

<div id="app">
  <input v-model="message" placeholder="Type something">
  <p>The message is: {{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    }
  });
</script> 

필수 익스텐션

일반적으로 vue 확장자 파일은 비주얼 스튜디오 코드가 인식하지 못합니다. 그래서 아래와 같은 익스텐션을 필수로 설치해야 합니다.

Vue 애플리케이션 만들기

CDN으로 설치하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <h1>{{count}}</h1>
      <button @click="increment">증가</button>
    </div>
    <script>
      const { createApp } = Vue;
      createApp({
        data() {
          return {
            message: "Hello, World",
            count: 0,
          };
        },
        methods: {
          increment() {
            this.count += 1;
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>

vite로 설치하기

npm create vite@latest .

Vue로 설치하기 (공식 홈페이지 권장)

npm create vue@latest .

✔ Package name: … vues
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › No

React Router는 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위한 라이브러리입니다. 이를 통해 URL을 기반으로 화면을 렌더링하고, SPA(Single Page Application)에서 라우트 간 전환을 부드럽게 처리할 수 있습니다.

React Router는 라우팅을 설정하는 BrowserRouter 컴포넌트와 Route, Link 등의 컴포넌트를 활용합니다.

//main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./css/index.css";
import { BrowserRouter } from "react-router";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

//App.tsx
import React from "react";
import { Routes, Route } from "react-router-dom";

function App() {
  return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
  );
}
export default App;

중첩 라우팅

부모 라우트는 자동으로 자식 라우트에 포함됩니다. /dashboard /dashboard/settings 로 접근할 수 있습니다.

<Routes>
  <Route path="dashboard" element={<Dashboard />}>
    <Route index element={<Home />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

Outlet을 사용하여 부모 라우트에서 자식 라우트를 렌더링할 수 있습니다.

import { Outlet } from "react-router";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

레이아웃 라우팅

공통 레이아웃을 가지는 라우트를 그룹화하여 관리합니다. path를 작성하지 않으면 URL에 segment가 추가되지 않습니다. / /contact /projects /projects/123 /projects/123/edit

<Routes>
  <Route element={<MarketingLayout />}>
    <Route index element={<MarketingHome />} />
    <Route path="contact" element={<Contact />} />
  </Route>

  <Route path="projects">
    <Route index element={<ProjectsHome />} />
    <Route element={<ProjectsLayout />}>
      <Route path=":pid" element={<Project />} />
      <Route path=":pid/edit" element={<EditProject />} />
    </Route>
  </Route>
</Routes>

Index

부모의 기본 경로(path="/")에서 렌더링되는 기본 자식 라우트입니다. index 속성을 사용합니다.

<Routes>
  <Route path="/" element={<MainLayout />}>
    <Route index element={<Home />} /> {/* 기본 페이지 */}
    <Route path="about" element={<About />} />
  </Route>
</Routes>

Route Prefixes

element 속성을 작성하지 않으면 레이아웃을 추가하지 않고 segment를 추가합니다.

<Routes>
  <Route path="/dashboard" >
    <Route path="settings" element={<Settings />} />
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>

Dynamic Segments

경로에 동적으로 변경 가능한 변수를 사용합니다. /users/123

<Routes>
  <Route path="/users/:userId" element={<UserProfile />} />
</Routes>

Splats

경로의 나머지 모든 부분을 지정합니다.

<Routes>
  <Route path="/files/*" element={<FileViewer />} />
</Routes>

Linking

Link와 NavLink를 사용하여 페이지 간 이동이 가능합니다. NavLink는 현재 활성화 된 경로에 특정 클래스나 스타일을 추가할 수 있습니다.

<NavLink
  to="/"
  className={({ isActive }) =>
    isActive ? "active" : ""
  }
>
  Home
</NavLink>

<Link to="/concerts/salt-lake-city">Concerts</Link>

리액트에서 데이터 통신을 할 때는 axios 라이브러리나 fetch API를 사용하여 처리합니다. 여러가지 편의 기능은 axios 라이브러리가 더 뛰어나지만, 별도의 라이브러리를 설치해서 사용해야 한다는 단점이 있습니다.

Fetch API GET

Fetch API는 브라우저 내장 HTTP 요청 라이브러리로, 최신 웹 표준입니다.

import { useEffect, useState } from 'react';

export default function Fetch1() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    fetch('http://localhost:3001/posts')
      .then((res) => {
        if (!res.ok) {
          throw Error('Could not fetch the data for that resource');
        }
        return res.json();
      })
      .then((data) => {
        setPosts(data);
      });
  }, []);
  return <pre>{JSON.stringify(posts, null, 2)}</pre>;
}

Fetch API Post, Put, Patch, Delete

export default function FetchCURD() {

  const postHandler = async () => {
    try {
      const res = await fetch('http://localhost:3001/posts', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id: '3', title: 'a title', views: 100 }),
      });

      if (!res.ok) {
        throw new Error('Failed to post');
      }

      const data = await res.json();
      console.log(data);
    } catch (e) {
      console.log(e);
    }
  };


  const deleteHandler = async () => {
    try {
      const res = await fetch('http://localhost:3001/posts/3', {
        method: 'DELETE',
      });

      if (!res.ok) {
        throw new Error('Failed to delete');
      }

      const data = await res.json();
      console.log(data);
    } catch (e) {
      console.log(e);
    }
  };


  const putHandler = async () => {
    try {
      const res = await fetch('http://localhost:3001/posts/1', {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ title: 'a new title', views: 200 }),
      });

      if (!res.ok) {
        throw new Error('Failed to put');
      }

      const data = await res.json();
      console.log(data);
    } catch (e) {
      console.log(e);
    }
  };


  const patchHandler = async () => {
    try {
      const res = await fetch('http://localhost:3001/posts/1', {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ title: 'a patch title' }),
      });

      if (!res.ok) {
        throw new Error('Failed to patch');
      }

      const data = await res.json();
      console.log(data);
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <>
      <button onClick={postHandler}>POST</button>
      <button onClick={deleteHandler}>DELETE</button>
      <button onClick={putHandler}>PUT</button>
      <button onClick={patchHandler}>PATCH</button>
    </>
  );
}

Axios

Axios는 HTTP 요청을 처리하기 위한 서드파티 라이브러리입니다. 요청과 응답 데이터를 자동 변환합니다.

import axios from 'axios';
import { useEffect, useState } from 'react';

export default function Axios1() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    axios
      .get('http://localhost:3001/posts')
      .then(({ status, statusText, data }) => {
        console.log(status, statusText, data);
        setPosts(data);
      });
  }, []);

  return <pre>{JSON.stringify(posts, null, 2)}</pre>;
}

Axios Post, Put, Patch, Delete

import axios from 'axios';

export default function AxiosCRUD() {
  const postHandler = async () => {
    try {
      const res = await axios.post('http://localhost:3001/posts', {
        id: '3',
        title: 'a title',
        views: 100,
      });

      console.log(res.data);
    } catch (e) {
      console.log(e);
    }
  };

  const deleteHandler = async () => {
    try {
      const res = await axios.delete('http://localhost:3001/posts/3');
      console.log(res.data);
    } catch (e) {
      console.log(e);
    }
  };

  const putHandler = async () => {
    try {
      const res = await axios.put('http://localhost:3001/posts/1', {
        title: 'a new title',
        views: 500,
      });

      console.log(res.data);
    } catch (e) {
      console.log(e);
    }
  };

  const patchHandler = async () => {
    try {
      const res = await axios.patch('http://localhost:3001/posts/1', {
        title: 'a patch title',
      });

      console.log(res.data);
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <>
      <button onClick={postHandler}>POST</button>
      <button onClick={deleteHandler}>DELETE</button>
      <button onClick={putHandler}>PUT</button>
      <button onClick={patchHandler}>PATCH</button>
    </>
  );
}

axios.create

axios.create() 메서드를 사용하여 기본 구성 옵션을 설정하고 재사용 가능한 Axios 인스턴스를 만드는 방법입니다. 이를 사용하면 여러 컴포넌트나 파일에서 HTTP 요청을 효율적으로 관리할 수 있습니다.

import axios from "axios";

export const axiosInstance = axios.create({
  baseURL: `https://api.themoviedb.org/3/movie`,
  headers: {
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3Nzk1Y2EwNDE0MTE0NzM3MGNmZmFkZjFjOTc2ZWRkNCIsIm5iZiI6MTczMzI5MTIzOS44Miwic3ViIjoiNjc0ZmVjZTc0NDg0N2U5N2RmZjQwM2YwIiwic2NvcGVzIjpbImFwaV9yZWFkIl0sInZlcnNpb24iOjF9.DjLrcmHH_hv2Y9c_Qj_N3lqwNNLcxsv5yThiGFgkARQ",
  },
});

export const getNowPlaying = async () => {
  try {
    const { data } = await axiosInstance.get(
      `/now_playing?language=en-US&page=1`
    );
    return data;
  } catch (error) {
    throw new Error("API 호출을 실패했습니다.");
  }
};

export const getUpcoming = async () => {
  try {
    const { data } = await axiosInstance.get(
      `/upcoming?language=en-US&page=1`
    );
    return data;
  } catch (error) {
    throw new Error("API 호출을 실패했습니다.");
  }
};

export const getTopRated = async () => {
  try {
    const { data } = await axiosInstance.get(
      `/top_rated?language=en-US&page=1`
    );
    return data;
  } catch (error) {
    throw new Error("API 호출을 실패했습니다.");
  }
};