Vue Side_Project

Vue설치

• Vue create vue-covid-tracker
  : 이렇게 프로젝트를 생성한다.

• Vue add tailwind 로 tailwind설치한다.

Vue 구조

• index > App > Header > Home/About

• index는 라우터 부분을 컨트롤 한다.

• views폴더 안에 있는 Home.vue는 페이지 안쪽을 담당

• Components폴더 안에 있는 파일을 Header.vue로 바꾸고 이부분을 컴포넌트로 사용하여 home부분보다 위에 Header부분으로 사용한다.

• App.vue가 전체적인 페이지를 담당하고 App.vue에서 import를 해주고
  export의 components에 header를 그리고 템플릿 부분에 Header컴포넌트를 바인딩 처리해준다.

    <template>
      <Header />
      <router-view/>
    </template>
  
    <script> 
    import Header from '@/components/Header'
  
    export default{
      components:{
        Header,
      },
    }
    </script>

CSS_TailWind

• 전체적인 css를 관리해주는
  Tailwind.config.js파일에서

    module.exports = {
      purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
      darkMode: false, // or 'media' or 'class'
      theme: {
        extend: {},
        container:{
          center:true,
          padding: '2rem',
        }
      },
      variants: {
        extend: {},
      },
      plugins: [],
    }

  이런식으로 App.vue에서 class=“container”를 사용한 다음
  container에 전역으로 포스 css를 넣어준다.
  그리고 이제 본격적으로 꾸며주기 위한 css를 넣어주고 header부터 꾸며준다.

• API / Icons
  https://documenter.getpostman.com/view/10808728/SzS8rjbc#00030720-fae3-4c72-8aea-ad01ba17adf8
  API관련 정보와 키를 가져온다.

• https://cdnjs.com/libraries?q=font

  		<I class=“fa fa-virus>
  
  	Icon을 사용하려면 link를 임포트하고 이런식으로 사용해준다.

Method

•  <button v-on:click='change'>
   클릭을 저런식으로도 사용하고
   <button type=“button” @click=“”>
   이렇게도 사용하는데 두가지인것같다.

•        Methods:{
          this.$emit('get-country')
      }
      여기서 emit은 이벤트 통신방법 중 하나이다.
    

  : Home.vue에서 컴포넌트에 props를 보낼때나 이벤트를 보낼때
  이벤트는 @get-country=“getCountryData”
  기본적인 state들은 :countries=“countries”/> 이렇게 써준다.

Computed

•   export default {
     name: 'Sub',
     props: {},
     watch: {},
     computed: {
         computedCount(){
             console.log('computed');
             return this.countComputed;
         }
     },
     data() {
         return {
             countMethods: 0,
             countComputed: 0,
         }
     },
     created: function () {
     },
     methods: {
         methodsCount(){
             console.log('methods');
             return this.countMethods;
         }
     },

  }
  

•       computed: {
         computedCount(){
     		console.log('computed');
     		return this.countComputed;

  }
  },

     computed - count: {{computedCount}}<br>
   

  : computed와 methods와의 차이점

  1. template에서 호출시 ()를 적지 않아야 된다.

  2. return 값이 반드시 존재해야한다.

  3. 파라메터를 받을 수 없다.

     computed - template내부에 선언된 computed중에서 해당 함수와 연결된 값이 바뀔 때만 해당 함수만을 실행한다.
     methods -그런거 모르겠고 template내부에 선언된 methods중에서 update라이프사이클이 동작한(=아무 변수나 바뀐)다면 함수를 모두 실행한다.

Project Reviews

• 유저가 브라우저를 열면 html파일을 제일 먼저 보는데
  여기 구조에서도 public의 index.html파일이 있고
  그안에 body태그안에 라우터를 통하여 컴포넌트와 페이지들이 들어간다.
  html파일이 먼저 보여지고 그다음 App.vue가 켜진다.

• main>index>App>Home>…components

• main은 app 과router를 실행시켜준다.

• 라우터폴더 안에 index.js는 말 그대로 라우터를 관리한다.

• App에서는 페이지 관련된 각각의 views 페이지로된 컴포넌트들을 관리하고 바인딩해준다.

• Home에서는 일단 바인딩해주는 템플릿태그 안에서 Home페이지에 뿌려줄 컴포넌트들을 import해서
  써주고 버튼같은 부분들도 구현하여 이벤트를 걸어준다.

• script태그 안에 export default부터는

  name:Home
  //사용할 이름을 써주고
  Components:{
  DataTitle,
  //여기도 사용할 컴포넌트를 써주고
  },
  data(){
   Return{
   //여기에는 관리할 state 들을 초기화 시켜둔다.
   }
  },
  Methods:{
   Async fetchCovidData(){
      const res = await fetch(``)
   },
  async created(){
      const data = await this.fetchCovidData()
  
      this.dataDate = data.Date
      this.stats = data.Global
      this.countries = data.Countries
      this.loading = false
  
  }

  : 여기에선 여러가지 fetch함수나 메소드등등 다양하게 쓴다.

Views Pages / Components

• 중요
  
  this.$emit('get-country', country)
  (‘함수이름’,넘겨줄인자)
  Emit은 이벤트버스 이벤트 통신방법이다.
  부모로 값을 넘겨주어 부모 이벤트를 실행시킬때
  주로 사용한다.
  

• 일단 header는 App.vue에서 컴포넌트를 따로 만들어 전역으로 사용될수있게 분리하여 App.vue에서 Import해주었다.

• 1)Home.vue
  Header
  DataTitle
  DataBoxes
  CountrySelect
Home.vue 안에
  순서대로 컴포넌트가 col형태로 분리되어 있으며,
  일단 템플릿태그안에 UI 바인딩되는 부분을 메인태그로 감싸서 여러 컴포넌트로 채워놨고
  그 밑에 버튼을 두었다.
  그리고 그 메인 태그에 v-if조건을 두어 로딩이되었을경우 보여지게끔 해두었고 로딩전에는
  밑에 따로 메인 태그에 v-else로 fetching data.. 하면서 로딩화면을 띄우게 해두었다.
  그리고 메소드로 가서 fetch함수를 이용하여 데이터를 불러오고 리턴해주어 다른 컴포넌트들에 props로 뿌려준다.

• 2)DataTitle.vue
  : 여기에서는 국가이름과 데이터를 가져온 시간을 알려주는데 {{timestamp}}를 사용한다.
  그러려면 momet를 사용하는데 일단 moment를 import 해주고 computed를 통해서 timestamp를 써준다.

  Computed:{
      timestamp: function(){
          return moment(this.dataDate)
         .format(‘MMM Do YYYY, h:mm:ss a’)
   }
  }

  이런식으로 사용해준다.

• 3)DataBoxes
  2개의 데이터박스를 만들어서 확진자와 사망자를 분리하고 stats이라는 props데이터를 가져오는데
  가져온 데이터를 뿌려줄때 숫자에 컴마를 추가하고싶은 경우에는

  numberWithCommas(x){
               return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
          }
  이 메소드를 사용해준다.
  예)12345,133,34235,24234,3200
  
  {{numberWithCommas(stats.NewConfirmed)}}
  ㄴ>템플릿엔 이렇게 적어준다.

• 4).CountrySelect.vue
  셀렉트박스를 컨트롤해준다.
  일단 home에서 국가에대한 데이터를 props로 받아와서
  템플릿태그안에 select 태그에 v-model=“selected” 를 사용하여 셀렉트 박스를 만든후
  option태그를 사용하고 그 안에 v-for를 이용하여 국가에대한 데이터를 받아와서
  다 뿌려준다.
  그리고 value=“country.ID”를 이용하여 ID에 해당하는 셀렉트된 국가를 보여준다.

  {{country.Country}}

  그리고 data()부분에서는 selected: 0으로 초기화해두고
  메소드부분에서 onchange이벤트를 이용하여 국가가 변경됐을때 호출되면서 셀렉한 국가를 fnid() 함수를 이용하여 찾아낸 후 그 아이템에 ID를 부여하고 셀렉된 국가를
  this.$emit('get-country', country)
  Emit 이벤트 버스를 이용하여 ID부여된 국가를 부모에게 준다.
  그러면 Home에서 해당하는 Props를받고 함수를 실행시켜 데이터를 변경해주고 다시 셀렉된 국가에 대한 정보를 뿌려준다.

• 5.) clear버튼
  버튼의 함수에서는 다시 fetch함수를 불러와서 클리어할 부분의 state값을 다시 set해준다.
  그리고 v-if조건을 주어 국가를 지정했을때 버튼이 보이게끔 해두었다.