반응형

1. 다운로드 버튼 클릭 이벤트 

$("#excelDownload").click(function () {
    let filename = "testFile.csv";
    getCSV(filename);
  });

 

2. CSV 생성 함수 

function getCSV(filename) {
  var csv = [];
  var row = [];
  
  //1열에는 컬럼명
  row.push(
    "열 제목1",
    "열 제목2",
    "열 제목3",
  );
  
  csv.push(row.join(","));

//chartDataList는 데이터 배열
    $.each(chartDataList, function (index, data) {
    row = [];
    row.push(
      data.d1,
      data.d2,
      data.d3
    );
    csv.push(row.join(","));
  });

  downloadCSV(csv.join("\n"), filename);
  
  }

3. CSV 다운로드 함수

function downloadCSV(csv, filename) {
  var csvFile;
  var downloadLink;

  //한글 처리를 해주기 위해 BOM 추가하기
  const BOM = "\uFEFF";
  csv = BOM + csv;

  csvFile = new Blob([csv], { type: "text/csv" });
  downloadLink = document.createElement("a");
  downloadLink.download = filename;
  downloadLink.href = window.URL.createObjectURL(csvFile);
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);
  downloadLink.click();
}
반응형
반응형

if(data.aa== "1" && data.bb = "2"){

alert("dfdf");

}

 

= 하나를 빼먹었다.

대입이 아니라 비교연산자를 넣어야지

 

if(data.aa== "1" && data.bb == "2"){

alert("dfdf");

}

반응형
반응형
Error in as.POSIXct.numeric(tsv$date, format = "%Y%m%d") : 'origin'이 반드시 주어져야 합니다

숫자가 character 타입이라 그렇다

숫자를 날짜로 변경할 땐

숫자를 character 타입으로 변경하고 나서 날짜 타입으로 변경하자~! 

tsv$date <- as.character(tsv$date)

음~ 해결~

반응형
반응형

 

육식주의를 옹호하고
아무 의식없이 고기를 먹는 사람들을 논리와 팩트로 후드려 패서 순살이 되게 한다.


너무 굉장한 내용들이 많아서 걍 옮겨왔음.


  • 육류와 유제품의 생산과 소비로 인해 일어나는 일

1. 잔인함

  • 대량 생산 체제 자체가 인간성을 말살시키도록 설계되어 있다.
    공장식 축산업에서 동물들은 몸을 제대로 움직이지도 못하는 밀집사육으로 인해 엄청난 스트레스를 받고, 관리자들이 동물을 학대하고 구타한다.
  • 단시간 내에 최소 비용으로 최대 이윤을 남기는 게 목적인 비즈니스의 세계에서 동물 한 마리를 죽이는 시간은 짧을수록, 비용은 적을수록 좋기 마련이다. 전기 충격이나 순간적인 고열로 죽이는 경우도 잔인하긴 매한가지. 살상 공정 이후에도 의식이 남아 있는 동물이 컨베이어벨트에 매달려 목에서 피를 철철 흘리는 일도 허다하다. 생각해보면 인도적인 도살이란 말 자체가 형용모순이다.

 

2. 오염

  • 소고기 1킬로그램을 얻기 위해서 물 약 1만 5천리터가 소비된다. 가축들이 배출하는 분뇨와 폐수는 필요한 퇴비량의 수 배 이상을 쓰고도 남아돌 만큼 엄청난 양이다.



3. 탄소배출

  • 축산업에서 배출하는 탄소량은 탄소 전체 배출량의 최소 18퍼센트 이상으로 추산한다. 비행기, 자동차, 기차, 선박 등 모든 교통수단을 합친 배출량(약 13퍼센트)보다 많다.
  • 메탄가스의 경우, 인간 활동에 의한 전체 배출량 중 축산업이 35퍼센트나 차지한다.



4. 산림파괴

  • 아마존에서 일어나는 산림 파괴의 약 91퍼센트가 가축 사료 재배를 위한 경작지 확보 때문이다.



5. 항생제

  • 미국 전체 항생제 판매량의 80퍼센트가 축산업에 쓰인다. 이 항생제는 사람에게 전달된다.

 

이 밖에도 많았음. 인상깊은 것만 적음.


사람들이 육식은 필요하다고 주장하며 내세우는 근거를 하나하나 반박하는데, 몰랐던 부분과 궁금한 점을 해소시켜줘서 좋았음.

"우리가 믿는 건 신도 아니고, 국가도 아니고, 가족, 친구, 학벌, 돈, 성공도 아냐. 
이 모든 것보다 더 근본적이고 광범위하게 퍼져있는 건 '세상은 안 변한다'는 믿음이야. 
어차피 나 혼자 애쓴다고 변하는 건 없으니 남들 따라 편하게 적당히 즐기다 가자는 주의, 복잡하고 골치 아픈 사회문제는 나에게 직접적으로 피해를 주지 않는 한 최대한 외면하는 태도, 뭔가 바꿔보려는 사람에게 '네가 얼마나 잘났길래'라며 멸시하는 반응, 모두 우리 사회에 깊이 뿌리내린 이 믿음에 기반하는 거야."

 

누군가 내 생활에 영향을 미치는 근본적인 변화를 진지하게 거론하기 시작하면, 깊은 회의와 적의를 숨김없이 드러낸다. 
가령, 비건처럼 인간-동물 관계를 재정립하려면 근본적인 변화가 요구되고, 
그 변화는 윤리적으로 아픈 곳을 건드리기도 한다. 그러니 곧바로 거부감을 표출하는 것이다.

 

'공장식 축산은 인류 역사상 최악의 범죄 중 하나'

 

"앞으로는 귀찮음이 내 행동의 원인이 되게 하지 말자"

 

생명을 가진 데다가 고통을 지각하는 동물을 우리가 이처럼 노예화하거나 상품화할 수 있는 근거는 무엇일까?
인간 우월주의를 들이대는 사람도 있다. 인간은 동물보다 우월하므로 동물 착취는 정당화된다는.
타당한 근거가 없는 말이다.
그저 인습적으로 허락 없이 착취할 뿐, 동물을 마음대로 해할 수 있는 천부권리는 그 어떤 인간에게도 주어지지 않았다.

 

덴마크, 독일, 스웨덴에서는 이미 '육류세'의 도입을 의회에서 검토하고 있다. 지구 온난화와 국민 건강 때문이다.
고기먹는 걸 규제한다고?  당신은 여전히 개인 영역 침해라고 버틸지 모른다.

의식 없는 식생활을 고수하겠다는 사람들이 존중하는 개인은 그들 자신뿐,
살고 싶은 동물의 선택은 왜 조금도 존중받지 못하는가? 

한 사회가 동물을 다루는 방식, 이들을 통해 식품을 생산하는 방식이 윤리와 공중보건과 지구 전체에 영향을 준다면, 이는 당연히 공적인 비판과 감시, 규제의 대상이 된다. 개별 사안만 보면 개인의 선택이라고 해도, 이것이 모여 전체적으로 끼치는 결과가 공공 영역의 안녕과 직결되기 때문이다.

 

과거에는 양모에 대한 낭만적인 이미지가 있었다. 
털만 깎아주면 양도 시원해서 좋고 서로 좋을 거라는 순진한 생각을 하고 있었다. 진실은 그게 아니었다. 
양모를 자르는 과정에서 양을 심하게 학대하는 장면들이 여러 번 포착되었다. 도살과 같은 논리다. 
수요가 많아지고 대량생산을 하다 보면, 시간당 단가를 맞춰야 하는 구조적인 문제 때문에 동물 학대는 필연이 된다. 

 

내가 진실을 이야기하는 한, 그리고 그 진실이 상대방의 습관을 건드리는 한, 모두가 편안할 방법은 없다. 진실 자체가 불편하기 때문이다.

 

어떤 동물은 극진히 사랑하지만 어떤 동물은 죽여도 그만인 태도를 '종차별주의(speciesism)이라고 부른다. 
인간 본위의 자의적인 분류 체계로 동물의 용도를 지정하는 것이다. 
개는 반려동물, 돼지는 식용, 붕어는 관상용... 한국은 심지어 같은 개도 애완용과 식용으로 나눈다. 
비슷한 예로, 자신의 어머니와 누이, 배우자, 애인, 딸은 극진히 존중하고 아끼면서 '업소 여성'은 막 다뤄도 된다고 생각하는 일부 남성들의 사고방식이 있다. 이는 오로지 분류자의 편의에 의한 분류일 뿐, 대상의 본질은 변함없다. 

 

'동물도 동물을 먹잖아'

인간의 윤리를 동물의 행동 생태에 기초하는 건 어리석은 일이다.
인간은 자연의 원리로 통용되는 약육강식의 '정글'에서 벗어난 '문명인'으로서 높은 수준의 윤리, 상호배려와 인간성을 이뤘음을 자랑으로 삼아왔다.

동물 착취를 정당화할 때는 인간의 우월함과 특별함을 들먹이다가, 야만적이고 비윤리적으로 행동하고 싶을 때는 "우리 역시 어쩔 수 없는 동물일 뿐" 이라며 책임을 내팽개치는 것은 편의주의적이고 비겁하며 앞뒤가 안 맞는 태도이다.

동물들은 먹을 만큼만 먹는다. 그 어떤 동물도 인간처럼 다른 동물을 공장 규모로 가두어두고 노예처럼 착취하지 않는다.

 

'인간은 원래 육식이다?'

인간의 몸은 육식동물보다 초식동물에 더 가깝다. 치아 가운데 90퍼센트가 어금니처럼 식물성 음식을 먹기 위한 맷돌형 치아이다. 송곳니조차 뭉툭해서 육식동물처럼 다른 동물들의 가죽과 근육조직을 물어뜯어내는 능력이 현저히 떨어진다.

구강 구조도 악어나 고양이류처럼 아래위로 씹도록 되어 있지 않고, 초식동물처럼 식물이나 곡식을 으깨고 갈아먹기 좋도록 상하좌우로 자유롭게 움직인다.

내장길이도 다르다. 육식동물은 사체가 몸 안에서 부패하면서 생기는 각종 독소와 노폐물 문제를 최소화하기 위해 장이 굉장이 짧다. 반면 초식동물은 이를 걱정할 필요가 없는 대신, 식물을 충분히 소화할 수 있도록 장이 세 배 이상 길다. 인간은 후자 쪽에 가깝다. 인간은 육식동물에게는 없지만 초식동물에게서는 발견되는 식물 분해 성분인 아밀라아제를 가지고 있다. 

 

'단백질은 어디서 구하냐?'

단백질은 채소, 곡류 등을 통해 얼마든지 섭취할 수 있다. 특히 콩 종류는 단백질 함유량에서 육류에 절대 뒤처지지 않는다. 
대두의 경우는 육류보다 두배는 더 많은 단백질을 함유하고 있다.


식물성 단백질만으로도 필수아미노산 및 비필수아미노산을 충분히 공급받을 수 있다. 
통곡물, 콩과 식물, 채소, 씨앗 및 견과류 등은 필수아미노산 및 비필수아미노산을 모두 가지고 있다. 

 

'어린이나 노인에게는 위험하다?'

영양학에서 세계적인 권위를 인정받는 미국영양학협회, 영국영양학협회, 호주영양학협회에서는 균형 잡힌 채식이 영양학적으로 적합하며, 전 연령 그리고 삶의 모든 단계(임신, 수유 단계를 모두 포함)에서 안전하다고 공식 발표했다.

 

인간은 다음과 같은 방법으로 소로부터 우유를 착취한다.

먼저 소를 강제로 임신시킨다. 한 손은 소의 항문을 통해 직장 안으로 집어 넣고, 한 손으론 성기 안으로 인공수정 관을 자궁 입구까지 억지로 밀어 넣는다. 이때 암소가 반항하지 못하도록 거치대에 결박시키는데, 외국에서는 일부 업자들이 이 장치를 '강간대'라고 불렀다.

어미 소에게는 기계를 부착해 매일 악착같이 우유를 짜내는데, 이 전 과정이 너무도 고통스럽고 스트레스가 커서 젖소는 원래 수명인 약 25년을 한참 밑도는 4~5년 만에, 자기 발로 설 힘도 없을 정도로 만신창이가 된다. 더 이상 착취할 것이 없으면 곧장 도살장으로 보내진다.

 

생선과 해산물은 문제없다?

유엔식량농업기구에 의하면 현재 세계 어장의 87퍼센트 이상이 남획 또는 고갈된 상태이다. 상어, 고래 등의 상위 포식자의 90퍼센트도 어업에 의해 사라졌다. 이대로 간다면, 30년 후에는 밥상에 생선이 오르지 못할 것이라는 연구 결과도 있다.

 

양식은 괜찮다?

양식이 마치 자가 발전하는 어류 생산 기계라고 착각하는 사람이 많다. 양식 생선의 사료가 뭐겠는가? 생선이다. 
혼획된 값싼 생선을 갈아서 생사료를 만든다. 특히 양식하는 생선들 중에 상당량을 차지하는 연어나 참치는 상위 포식자이기 때문에 많은 양의 생선 사료를 필요로 한다. 이렇다 보니 양식도 결국 야생, 즉 바다 생물에 의존하고 있다. 양식이 지속가능한 미래의 모델이라는 생각은 환상에 지나지 않는다. 




반응형
반응형

사용자 정의 component에서의 prop 정의

<template>
    <div>
    {{content}}
    <p>사용자 정의 Local Component</p>
    message1 is : {{message1}}<br>
    message2 is : {{message2}}
    </div>
</template>

<script>
    export default {
    name : 'LocalComponent',
    props :{
        message1 :{
            type: String,
            default : "값 없음"
        },
        message2 :{
            required : true
        }
    }
}
</script>

<style scoped>
div {
    width: 300px;
    border: solid;
    border-color: rgb(38, 138, 253);
    border-radius: 8px;
    padding: 8px;
    margin :0 auto;
  }

</style>

 

상위 component에서의 prop 전달

v-bind를 사용하여 부모의 데이터에 props를 동적으로 바인딩 할 수 있다. (동적 props)

<template>
  <div id="app">
    <myComponent></myComponent>
    <LocalComponent message1="전달한 prop1" message2="전달한 prop2"></LocalComponent>
    
    <input v-model="inputValue">
    input 내용 : {{inputValue}}

    <LocalComponent v-bind:message1="inputValue"></LocalComponent>

  </div>
</template>

<script>
import LocalComponent from './components/myLocalComponent'

export default{ 
  data(){
    return{
      inputValue : ''
    }
  },
  components : {LocalComponent}
  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

결과

반응형
반응형

vue 컴포넌트란? vue 인스턴스를 말한다

컴포넌트의 등록과 사용

  • 전역등록(Global Registration)
  • 지역등록(Local Registration)

전역 컴포넌트 등록

1. components 경로에 vue 파일 생성

 

2. myComponent.vue 내용작성

<template>
<div>
    {{content}}
    <p>사용자 정의 전역 컴포넌트</p>
</div>
</template>


<script>
export default {
    name : 'myComponent',
    data() {
        return{
            content : '짜란~'
        }
    }
}
</script>


<style scoped>
div {
    width: 300px;
    border: solid;
    border-color: rgb(253, 230, 202);
    border-radius: 8px;
    padding: 8px;
    margin :0 auto;
  }

  
</style>

 

3. main.js에 전역 등록

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false


import myComponent from './components/myComponent'
Vue.component(myComponent.name,myComponent)


new Vue({
  render: h => h(App),
}).$mount('#app')

 

4. 최상위 컴포넌트인 App.vue에서 해당 컴포넌트 사용

<template>
  <div id="app">
  
    <myComponent></myComponent>

  </div>
</template>

<script>
export default{ 
  data() {
    return {
    }
  }
}
</script>

 

결과

 


지역 컴포넌트 등록

1. components 경로에 vue 파일 생성

 

2. myLocalComponent.vue 내용 작성

<template>
    <div>
    {{content}}
    <p>사용자 정의 Local Component</p>
    </div>
</template>

<script>
    export default {
    name : 'LocalComponent',
    data() {
        return{
            content : '로컬~'
        }
    }
}
</script>

<style scoped>
div {
    width: 300px;
    border: solid;
    border-color: rgb(38, 138, 253);
    border-radius: 8px;
    padding: 8px;
    margin :0 auto;
  }

</style>

 

3. App.vue에서 import하여 사용

<template>
  <div id="app">
    <myComponent></myComponent>
    <LocalComponent></LocalComponent>

  </div>
</template>

<script>
//로컬component import
import LocalComponent from './components/myLocalComponent'

export default{ 
  components : {LocalComponent}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

결과

 


참고 링크

 

 

컴포넌트 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

 

 

[Vue.JS] Component 개념을 익히고 만들어보자!!

Vue.js의 기본 개념을 익히고 기본적인 Vue.js Component를 생성해 보자. Vue.js의 Component 개념은 Vue.js Framework에서도 중요한 부분을 차지하고 어떻게 Vue.js Component를 생성하느냐에 따라 Vue.js의 개발속도

kdydesign.github.io

 

반응형
반응형

싱글 파일 컴포넌트 방식으로 연습하였음

vue 버전 4.5.12


1. 데이터 표시

<template> <!--html 코드 -->
	<div id="app">
	1. 원숭이 : {{animal}} <br>
	2. 원숭이(v-text) : <p v-text="animal"></p>
	3. 원숭이(v-html) : <p v-html="animal"></p>
	</div>
</template>


<script> 
export default{ 
  data() {
    return {
      animal : "<h1>Monkey</h1>",
    }
  }
}
</script>


2. html 폼 타입 지정

<template> <!--html 코드 -->
  <div id="app">
    <a :href='url'>naver</a><br>
    <input :type='type1'><br>
    <input v-bind:type='type2'><br>
  </div>
</template>


<script> 
  export default{ 
    data() {
      return {
        type1 : 'text',
        type2 : 'checkbox',
        url : 'https://www.naver.com'
      }
    }
  }
</script>


3. 클래스 지정

<template> <!--html 코드 -->
  <div id="app">
   <p v-bind:class='class1'> 클래스 하나지정 </p>
   <p v-bind:class='[class1,class2]'> 다중 클래스 지정</p>
  </div>
</template>

<script> 
  export default{ 
    data() {
      return {
        class1:'Class1',
        class2:'Class2'
      }
    }
  }

</script>

4. html 입력 폼 생성 및 데이터 바인딩

<template> <!--html 코드 -->
  <div id="app">
  
<input v-model="input_value">
input 입력 내용 : {{input_value}}<br><br>


<textarea v-model="textarea_value"></textarea>
textarea 입력내용 : {{textarea_value}}<br><br>


<input type="checkbox" v-model="checkbox_value" value="checkbox1">
<input type="checkbox" v-model="checkbox_value" value="checkbox2">
<input type="checkbox" v-model="checkbox_value" value="checkbox3">
checkbox 선택 value : {{checkbox_value}}<br><br>


<input type="checkbox" v-model="checkbox_check" value="checkbox0">
checkbox 선택여부 : {{checkbox_check}}<br><br>


<input type="radio" v-model="radio_value" value="radio1">
<input type="radio" v-model="radio_value" value="radio2">
<input type="radio" v-model="radio_value" value="radio3">
radio value : {{radio_value}}<br><br>


<select v-model="select_value">
  <option selected>default</option>
  <option>value1</option>
  <option>value2</option>
</select>
select value : {{select_value}}<br><br>


  </div>
</template>

<script> 
  export default{ 
    data() {
      return {
        input_value: '코끼리',
        textarea_value:'textarea입니다',
        checkbox_value:[],
        checkbox_check:false,
        radio_value:'',
        select_value:''
      }
    }
 }

</script>


5. 메소드 생성

<template> <!--html 코드 -->
  <div id="app">
  
<button v-on:click="countUp"> 1씩 증가</button>
<p>{{count}}</p>

<button :disabled="click" v-on:click="oneClick">한 번만 클릭가능</button>
<br><br>


<button v-on:click="alertClick">알림창 </button>
  </div>
</template>

<script> 
  export default{ 
    data() {
      return {
        count:0,
        click:false
      }
    },
    methods :{
      countUp(){
        this.count++;
      },
      oneClick(){
        this.click=true;
      },
      alertClick(){
        alert("OK");
      }
    }
  }

</script>


6. 조건문 사용

<template> <!--html 코드 -->
  <div id="app">

<button v-bind:disabled="Case1" v-on:click="case1Click">case1</button>
<button v-bind:disabled="Case2" v-on:click="case2Click">case2</button>
<button v-bind:disabled="Case3" v-on:click="case3Click">case3</button>


<p v-if="Case1">Case1 </p>
<p v-else-if="Case2">Case2 </p>
<p v-else>Case3 </p>

  </div>
</template>

<script> 
  export default{ 
    data() {
      return {
       Case1 :false,
       Case2 :false,
       Case3 :false
      }
    },
    methods :{
      case1Click(){
        this.Case1 = true;
        this.Case2 = false;
        this.Case3 = false;
      },
      case2Click(){
        this.Case1 = false;
        this.Case2 = true;
        this.Case3 = false;
      },
      case3Click(){
        this.Case1 = false;
        this.Case2 = false;
        this.Case3 = true;
      }
    }
  }

</script>


7. 반복문을 통한 배열 출력

2.2.0 이상에서 v-for는 :key를 적어줘야 한다고 함.

적지 않으면

element in iteration expect to have v-bind key

에러가 남 

<template> <!--html 코드 -->
  <div id="app">

<p v-for="pick in arr" v-bind:key="pick">{{pick}}</p>

<p v-for="(key,value) in obj" v-bind:key="key"> {{key}} : {{value}}</p>

<p v-for="(item) in objArr" v-bind:key="item.name"> {{item.name}}, {{item.age}}, {{item.job}}</p>

<input type="text" v-model="textValue">
<button v-on:click="push(textValue)">저장</button><br>
배열 내용 : {{pushArr}}

  </div>
</template>

<script> 
  export default{ 
    data() {
      return {
       arr : ['짜장','짬뽕','탕수육'],
       obj: {'a':'1','b':'2','c':'3'},
       objArr : [{'name' : 'park', 'age' : '13','job':'student'},{'name' : 'lee', 'age' : '30', 'job' : 'teacher'}],
       pushArr : [],
       textValue :''
      }
    },
    methods :{
      push(textValue){
        this.pushArr.push(textValue);
      }
    }
  }

</script>

<style>

 


 

8. computed (데이터 변화 감지)

onchange와 메소드를 간편하게 결합시켜놓은 기능같다.

** 함수 내부의 프로퍼티가 변경되면 실행됨

** computed의 함수들은 항상 return 값이 있어야 함 

** 같은 기능을 하는 watch는 반환값이 없어도 됨.

<template>
  <div id="app">
    <input v-model.number="price" type="number">원 X 
    <input v-model.number="count" type="number">개
    <p> 합계 {{sum}}원 </p>
    <p> 세금포함 {{taxIncluded}} 원</p><br><br>

  </div>
</template>

<script>
export default{ 
  data() {
    return {
      price: 100,
      count:1
    }
  },

  computed:{
    sum:function(){
      return this.price * this.count;
    },
    taxIncluded:function(){
      return this.sum*1.08;
    }
  }
}
</script>

 


 

수식어

1) .lazy

입력 이벤트가 끝난 뒤 입력과 데이터를 동기화 함.

입력중일 땐 동기화가 안 된다는 말.

   <input v-model.number="message" type="number">
    message is : {{ message }}

입력 중 / 입력 후 

 

 

2)  .trim

input을 자동으로 trim

<input v-model.trim="message" >
 message is : {{ message }}

띄어쓰기가 아예 없어지는 건 아닌가 봄

 

3) .number

사용자 입력이 자동으로 숫자로 형변환 된다고 함.

type="number"를 사용하는 경우에도 HTML 입력 엘리먼트의 값은 항상 문자열을 반환하기 때문에 이것은 종종 유용하게 사용할 수 있습니다.  라고 함

<input v-model.number="message" type="number">
message is : {{ message }}

 

 


 

 

참고링크

 

폼 입력 바인딩 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

 

[Vue] Vue.js 기본 문법 총정리

최근 프로젝트에서 프론트엔드 Jquery, Ajax를 적극 활용해보며 프론트에 약간 관심이 생겨 Vue를 한번 공부해봤다. Vue에 대한 개념은 건너뛰고 문법만 딱 정리하고자 한다.  1. Vue 인스턴스 Vue.js로

cjw-awdsd.tistory.com

 

반응형
반응형

1. Node.js 설치

 

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

 


 

2. VUE CLI 전역설치

> npm install -g @vue/cli

-g  : 로컬 어디에서든 vue-cli를 요청할 수 있도록 함. 

안 된다면 vscode를 껐다 켜보자.

 

 

 


 

3. vue 프로젝트 만들기

> vue.cmd create [프로젝트명]

Please pick a preset 에서 방향키를 이용하여 두 가지 선택지중에 하나를 선택할 수 있는데

위쪽의 Default로 했다.

프로젝트의 node_modules경로에 Babel, ESLint 가 포함되어있는 걸 볼 수 있음.

Babel 자바스크립트 컴파일러.
최신버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에
Babel은 이 브라우저가 이해할 수 있는  구버전 문법으로 변환시켜줌.
ESLint 코딩 스타일 가이드를 따르지 않거나 문제가 있는 코드나 안티 패턴을 찾아 표시를 달아 놓는 도구

 

 

 


 

4. vue router 설치

> npm install vue-router --save

설치가 된 건가 안 된건가 모르겠넴

 

package-lock.json 파일에 router 내용이 추가된 것 확인

 

package.json 파일에 router 내용 추가된 것 확인


 

5. 프로젝트 실행

프로젝트 경로로 이동 > cd .\vue-form 
실행 > npm run serve

 

 

 


 

확인

브라우저 URL 탭에서 localhost:8080를 입력하여 이동하면

 

 


 

6. vetur 설치 (선택사항)

.vue 파일의 코드에 색을 입혀서 보기 편하게 만들어 준다고 함.

 

 


 

디렉터리 구조 확인

vscode에서 아까 생성한 vue 프로젝트 폴더를 연다.

 

* App.vue 가장 최상위 컴포넌트

* main.js : 가장 먼저 실행되는 javascript 파일. Vue 인스턴스를 생성한다. 

 


 

버전확인

> vue -V

이렇게 나온다면 

파워쉘이 아닌 cmd에서 해보면 된다.

+ 를 눌러서 cmd로 터미널을 만들어서 다시 입력해보면

으음~ 편안~


 

TEST

 

1. vue 이미지 지워보기

App.vue의 template 부분에서 img 소스를 지운다.

 

 

2. 원하는 text 로 변경

template 부분에서 helloworld를 지우고 넣어줌

App 컴포넌트를 사용하지 않아서 에러가 남

 script 부분에서도 지워주면 됨.

 


Vue 파일 구조 : 싱글파일 컴포넌트

  • vue에서 제공하는 컴포넌트라는 개념에 template과 CSS 스타일링을 합쳐놓은 것
  • .vue 파일내에서 template / script / style 부분으로 나뉜다.
  • 하나의 파일에 HTML과 JS, CSS 를 한꺼번에 작성할 수 있는 장점이 있다.

 

  • 싱글파일컴포넌트 아닌 경우 script 부분
new Vue({
	data: {
	aimal : 'monkey'
    }
})

 

  • 싱글파일컴포넌트인 경우 script 부분
export default {
    data(){
        return {
            animal: 'Monkey'
        }
    }
}

참고한 블로그

 

Vue Cli 초기 세팅

Vue CLI는 Vue 프로젝트를 개발할 수 있게 해주는 아주 유용한 도구이며, 여기서 CLI란 Command Line Interface의 약자로서 타이핑으로 명령어를 입력하여 원하는 바를 실행시키는 도구를 말한다. 윈도우

velog.io

 

반응형
반응형
select sysdate-1/24/60 from dual; //1분 전
select sysdate-1/24/30 from dual; //2분 전
select sysdate-1/24/12 from dual; //5분 전
select sysdate-1/24/6 from dual; //10분 전
select sysdate-10/24/60 from dual; //10분 전
select sysdate-1/144 from dual; //10분 전
select sysdate-30/1440 from dual; //30분 전
select sysdate-1/24 from dual; //1시간 전
시간
1/ 24/ 60


계산방법

하루는 1일 혹은 24시간 혹은 1440분이니까 각 단위에 맞춰서 계산

ex) 10/24/60  

1440분 ÷ 60 ÷ 24 × 10 하면 됨!

혹은

24시간 ÷ 24 × 10 = 10시간(600분)

600분 ÷ 60 하면 됨!

반응형
반응형

1. 연산식에서의 자동 타입 변환

서로 다른 타입의 피연산자가 있을 경우 두 연산자 중 크기가 큰 타입으로 자동변환된 후 연산을 수행한다.

double result = intValue + doubleValue;
//int타입 변수가 double값으로 변환된 후 연산

 

2. 정수 연산일 경우 int 타입을 기본으로 한다.

byte, char, short는 int 타입으로 변환된 후 연사이 수행되며, 연산의 결과도 int 타입이 된다.

 

3. char 타입의 연산 결과는 int 타입으로 산출

char ai = 'A';
int result = ai + 1;
char na = (char) result; // B 임

 

4. 부호 연산자(+, - )의 산출 타입은 int 

short s = 100;
int result = -s;

 

5. 비트 반전 연산자 산출 타입은 int

비트 반전 연산자는 정수타입 (byte, short, int, long)의 피연산자에만 사용됨

byte v1 = 10;
int v2 = ~v1;

 

6. 비트 반전 연산자의 산출값이 1을 더하면 부호가 반대인 정수를 얻을 수 있다.

byte v1 = 10;
int v2 = ~v1 + 1 //-10임

 

7. 산술 연산자 규칙

  • - 피연산자들이 모두 정수타입이고, int 타입(4byte)보다 크기가 작은 타입일 경우 모두 int 타입으로 변환 후 연산을 수행하며, 산출 타입은 int가 됨
  • - 피연산자들이 모두 정수타입이고, long 타입이 있을 경우 모두 long 타입으로 변환 후, 연산을 수행하며, 산출 타입은 long이 됨.
  • - 피연산자 중 실수타입(float, double)이 있을 경우, 크기가 큰 실수 타입으로 변환 후 연산을 수행하며, 연산의 산출 타입은 실수 타입이 됨.
  • ex) int + double -> double + double = double
  • - 즉 연산의 결과를 실수로 얻고 싶다면 피연산자 중 최소한 하나는 실수 타입이어야 한다.

 

int num1 = 10;
int num2 = 4;
int result1 = num1 / num2;		//result1 = 2
double result2 = num1 / num2;		//result2 = 2.0
double result3 = (double) num1 / num2 	//result3 = 2.5
반응형

'코딩 관련 > Java' 카테고리의 다른 글

[JAVA] excel 읽기  (1) 2021.08.23
[JAVA] txt파일 읽기 / 쓰기  (0) 2021.07.13
[JAVA] 변수 헷갈리는 내용 정리  (0) 2021.04.22
[JAVA] linux Shell 명령어 실행  (0) 2021.03.25
[JAVA] 콘솔 출력. System.out  (0) 2021.03.24

+ Recent posts