Vue3기능과 formData

1.formData에 배열넣기

  async function 에이피명({a}) {
    const formData = new FormData();
    for (let i=0; i<a.length; i++) {
      formData.append("a[]", a[i]);
      //배열이 아닐때 []제거, [i]제거
      //append 뒤에는 (name, value)로 들어감
    }
    const response = await realFetch("에이피아이주소", {
      body: formData,
    });
    
    if (response?.status == 200) {
      try {
        const data = await response.json();

        return {
          status: response.status,
          data: data,
        };
      } catch (err) {}
    }

    return {
      status: response.status,
      data: null,
    };
  }
  
  
  /*
  	a가 필수사항이 아닐경우 a=null로 넣고
    하단에 if문으로 null이아닐경우에 대한 사항을 적어야한다.
    
    +++함수를 적을때 매개변수에 대한 if문도 중요하지만 반환되는 값에 대해서도 꼭 확인하여
    조건문을 작성해야함
  	
  */

2. vue3 defineEmits

해당 컴포넌트에서 emit('emit명')을 쓸때 그 컴포넌트에 const emit = defineEmits(["emit명"]); 을 정의해야함

3. Object.prototype.hasOwnProperty.call

매개변수로는 string,  Symbol  이 들어감

-hasOwnProperty()메서드는 개체가 지정된 속성을 자체 속성으로 가지고 있는지 여부를 나타내는 bool 반환합니다(상속하는 것과 반대).

-어떤 객체에 원하는 프로퍼티가 있는지 확인하는 가장 확실한 방법

-인스턴스에서는 사용할 수 없고 객체에서 사용가능

// 다른 객체의 hasOwnProperty를 사용하여 객체의 프로퍼티 유무를 확인
({}).hasOwnProperty.call(객체명, '프로퍼티명'); // true

// Object에 있는 hasOwnProperty를 사용
Object.prototype.hasOwnProperty.call(obj, '프로퍼티명'); // true

도움받은곳 : https://dev.to/aman_singh/what-s-the-deal-with-object-prototype-hasownproperty-call-4mbj

3.try - catch

1) 예외(에러)를 받아 처리하는 try ~ catch 문

2) try는 예외발생의 감지 대상을 감싸는 목적으로 사용

3)catch는 발생한 예외상황의 처리를 위한 목적으로 사용

-에러가 발생하면 스크립트가 중단되고 콘솔에 에러가 출력된다. 그러나 try..catch 문법을 사용하면 스크립트가 죽는 걸 방지하고, 에러를 ‘잡아서(catch)’  처리할 수 있다. 

try {

  // 코드...

} catch (err) {

  // 에러 핸들링

}

/* try..catch는 오직 런타임 에러에만 동작합니다.
try..catch는 유효한 코드에서 발생하는 에러만 처리할 수 있습니다.
이런 에러를 ‘런타임 에러(runtime error)’ 혹은 '예외(exception)'라고 부릅니다.

try..catch는 동기적으로 동작합니다.
따라서 익명함수 안에서 발생한 예외는 try..catch 에서 잡을 수 없으므로
try..catch 안에 익명함수를 쓰면안돼고 익혐함수 안에 try..catch 를 써야한다.
/*

도움받은곳 : https://ko.javascript.info/try-catch

4.vue computed

computed는 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해줌

- 직접 코드에 적는것보다 가독성이 좋음

- 컴퓨티드 속성은 인자를 받지 않는다.

HTTP 통신과 같이 컴퓨팅 리소스가 많이 필요한 로직을 정의하지 않는다.

+ http통신 중 하나인 api의 경우 watch , methods에 넣는것이 적합하다.

도움받은곳 : https://joshua1988.github.io/vue-camp/syntax/computed.html

5.vue watch

watch 속성은 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message: function(value, oldValue) {
      console.log(value);
    }
  }
})

//위 코드는 message라는 데이터에 watch 속성을 지정한 코드입니다.
//message의 데이터가 변할 때마다 watch 속성에 정의한 message 함수가 실행되면서 콘솔에 변한 데이터를 출력합니다.


watch(message, (value,oldValue) => {
  //이렇게 쓸수도 있음
  console.log(value);
}

도움받은곳 : https://joshua1988.github.io/vue-camp/syntax/watch.html

반응형

 

6.vue3

1) vue setup

vue2에서 template ,script ,style을 한꺼번에 작업할 수 있는 SFC(싱글 파일 컴포넌트)형식으로 쓰였다.

컴포넌트 모듈을 객체형태로 선언하며 props, data, methods, 라이플사이클, computed, watch등을 객체의 속성과 메서드로 정의하여 사용하였다.

 

vue3에서  Composition API 를 제공하며 컴포넌트 객체에 setup 함수를 사용할수 있다.

-setup 함수는 컴포넌트 인스턴스가 생성되기 전에 실행

-this를 통해서 setup안에 data, computed등에 접근할 수없다

 

1.ref를 사용해서 반응형 변수로 data를 사용 

 - const 변수명 = ref(false); //bool,string,number,{},[] 모두가능

2.자바스크립트 함수로 methods 대체

 

const 함수명 = () => {
  //실행할코드
}

3.라이프사이클 함수는 라이프사이클 훅 함수로 대체

- onMouted(() => console.log('mounted'));

2) props

const props = defineProps({
  데이터명: {
    type: Number,
  },
});

const { 데이터명 } = toRefs(props);

/*
ref()로 정의한 함수를 전달하려는 경우에 toRef()로 사용하나
여러 props를 쓸경우 객체가 되어야 하므로 toRefs()를 사용함
*/

 

3) 경로

import 컴포넌트명 from '../../폴더명/파일명' // 상대경로
import 컴포넌트명 from '@/폴더명/파일명'	 // 절대경로 = ~/폴더명/파일명 으로 써도 무방하다

// 절대경로를 지정하는 문자를 따로 지정할 수도 있지만 보통의 @,~ 를 이용한다