AI 웹개발반/HTML & CSS

[Vue] vue 기초2 및 alert 작성

째깍단 2023. 6. 30. 06:28

공식문서 보며 익히기라 되어있지만

유튜브 보면서 약간의 독학, 팀원들의 코드보면서 하나씩 찾아보며 적당~히 이해한 다음

공식 문서를 보기 시작했다..

 

 

 

vue 공식문서는 한글화가 잘 되어있어서 읽고 적용해보기 정말 용이하다!

 

구글링해보면 원하는 정보가 다른 js 프레임워크에 비해 적은 편이지만

직관적으로 코드를 쓸 수 있고, 부드러운 사용성을 제공하는 점에서 앞으로 점점 쓰는 사람들이 많아지지 않을까! 

 

 

팀 프로젝트에 조금이나마 도움이 되기 위해 차근차근 익혀나가고 있다

 

 

 

 

뷰 script의 기본 구성

 

->JS니까 카멜 표기법을 기본으로 사용한다 (시작 소문자 나머지 대문자)

 

 

 

<script>
    import Vue from 'venx' # 0

    export default {
    
        name : 'ComponentName', # 1)
        
        components: { # 2)
        },
        
        data: function() { # 3)
        },
        
        watch: { # 4)
        },
        
    	computed: { # 5)
        },
        
        methods : { # 6)
        }
    }

</script>

 

 

 

 

0) import

 

import 문은 맨 위에 모아서 작성!

import 할 모듈 혹은 {함수}, from 경로!

 

router, api 파일을 따로 작성할 경우 해당 위치에서 import해온다

 

 

 

1) name

 

vue 객체의 이름

작성은 선택!

 

 

 

 

2) componets

 

현재의 컴포넌트에서 다른 컴포넌트를 사용하고자 할 때 정의한다

 

import { VueEditor } from "vue2-editor";

export default {
  components: {
      VueEditor
  },
}

 

vue안에 넣을 것을 import해오고 components에 정의한다

이때 : 을 사용하여 key -value 값처럼 작성해준다!

 

 

 

 

route js와 연결해 새로운 기능을 만들어서 작성해줄 수도 있다.

 

// 1. 라우트 컴포넌트를 정의하세요.
// 아래 내용들은 다른 파일로부터 가져올 수 있습니다.
const foo = { template: '<div>foo</div>' }
const fooBar = { template: '<div>foobar</div>' }

// 2. 라우트를 정의하세요.
// Each route should map to a component. The "component" can
// 각 라우트는 반드시 컴포넌트와 매핑되어야 합니다.
// "component"는 `Vue.extend()`를 통해 만들어진
// 실제 컴포넌트 생성자이거나 컴포넌트 옵션 객체입니다.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/foobar', component: fooBar }
]

 

 

template에 component: '이름' 으로 작성한 것을 가져다 사용할 수도 있다

 

<foo-bar> </foo-bar>

-> 카멜로 표기한 컴포넌트를 template에 쓸 때는 케밥 표기법으로 쓴다

 

 

 

 

 

 

3) data

 

vue 객체 내부에서 사용하는 변수를 정의한다

data object, function타입 등으로 정의할 수 있다

 

message의 자리에 바로 보임!

 

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

 

<script>

export default {
  name: 'Test',

  data: function() {
    return {
       message : 'hello world!'
    }
  }
}
</script>

혹은


<script>

export default {
  name: 'Test',
  
  data: {
       message : 'hello world!'
  }
}
</script>

 

 

 

 

4) watch

 

watch는 vue 내부 요소 변화 혹은 router의 변화를 감지해준다

 

watch: {
    $route(to) {
        const feedID = to.params.feed.id
        this.$store.dispatch("FETCH_FEED_DETAIL", feedID);
        }
    ditto(newJeans) {
        console.log(newJeans);
    },
}

 

 

 

 

5) computed

 

data변수를 연산하는 경우 computed에서 함수 등을 정의하고 연산한다

템플릿에서 바로 연산할 수도 있지만 너무 복잡해보이므로 computed에서 하는 것이 일반적인 모양

 

<template>
  <div>
    <p>{{ message }}</p>  # hello_world 
    <p>{{ reverseText }}</p>  # dlrow_olleh
  </div>
</template>

<script>

export default {
  name: 'Test',

  data: function() {
    return {
       message : 'hello world!'
    }
  }
  computed: {
    reverseText() {
    return this.message.split("").reverse().join('');
    } 
  },
}
</script>

혹은

<template>
  <div>
    <p>{{ message.split('').reverse().join()}}</p>  # hello_world -> dlrow_olleh
  </div>
</template>

 

 

 

 

6) methods

 

vue의 내부 메서드를 정의한다. = 함수 등등을 자유롭게 정의하고 사용한다.

여기서 정의한 함수는 template에 바로 가져다 사용할 수 있다.

 

 

 

 

 

 

 

 

 

computed vs methods 차이점 

 

computed

 - 반드시 return 값 존재

 - 캐싱된 데이터만 사용

 - 연결된 data에 변화가 있을 때만 연산 값을 캐싱 후 다시 랜더링 

 - 매개변수를 받을 수 없음!

    = CUD 불가능 = READ에만 사용 = 데이터 변화 없음

 

methods

 - 호출할 때만 실행  = 랜더링을 할때 항상 메서드를 호출해야함

 - 매개변수 가능

   = CUD는 이쪽에서!

 

 

* 캐싱 : 값을 계산 후 잠시 저장해둠

 

 

 

 

 

이외 :

mounted()

create() 등등..

 

 

 

 

 

 

오늘 해본 Vue.js!

 

 

alert를 error에 따라서 다르게 띄워주기

 

 

async editFeed(){
  const feed_id = this.$route.params.feed_id; #feed_id를 받아온다
  try{
	  # edit요청을 위한 함수 정의 및 parameter 넣어주기
      const response = await fetchFeedEdit(feed_id, this.title, this.content);
      
      # 조건에 따라 alert 내용적어주기
      if(!this.title || this.title ==="" || !this.content || this.content==="") {
        alert("제목 혹은 글 내용이 없습니다! 내용을 입력해주세요")
        return(response.error)
      }

	  # 200 OK 성공할 경우 성공메세지와 작성완료해주기
      if(response.status === 200){
        alert(response.data.message);
        this.$router.push({name: "feed-detail", params: {feed_id: feed_id}});
      }
  }catch(error){
      # catch error로 에러 발생할 경우 이쪽으로 빠지도록 하기!
      # console.log(error);
      if(!this.title || this.title ==="" || !this.content || this.content==="") {
        alert("제목 혹은 글 내용이 없습니다! 내용을 입력해주세요")
        return(error.response) #error.response를 반환해주면 아래의 alert를 더 띄우지 않는다!
      }
      if(error.response.status === 405) {
      # 백엔드에서 405에러로 지정하여 405에러인 경우 금지어 alert이 뜨도록 변경
        alert('금지어가 포함되어 있습니다');
      }
      # 나머지 400 bad request는 모두 아래 alert
      else {alert("이상한 일이 발생했습니다. o_O");}
  }

 

주석을 적다보니 매우 길어졌는데

alert을 통해 사용자에게 성공 혹은 실패시 어떤 오류가 발생했는지 확실하게 알려줄 수 있다!

 

 

 

이때 주의할 점은 router에 try catch 문을 작성하지 않았는지 확인해야한다.

 

만약 router에 catch문을 작성해두었다면 콘솔창에는 에러가 발생하는 것이 보이지만,

아래 함수까지는 전달되지 않아 alert창이 아무것도 뜨지 않게 되기 때문!

 

 

저작자표시 동일조건 (새창열림)