Developer_kade

• vue에서 인스턴스의 생명 주기를 말해준다.
• 인스턴스 생성, 마운트, 업데이트 등 특정 작업이 일어나기 전, 혹은 후에 어떠한 이벤트를 줄 수 있다.
  • beforeCreate()
    • 인스턴스가 생성되기 전에 어떤 동작을 실행 할 수 있다.
  • created()
    • 인스턴스가 생성된 후 어떤 동작을 실행 할 수 있다.
  • beforeMount()
    • 인스턴스가 html로 렌더링 되기 전에 어떤 동작을 실행할 수 있다.
  • mounted()
    
    • 인스턴스가 html로 렌더링 된 후에 어떤 동작을 실행할 수 있다.
    • 보통 이 부분에서 비동기로 데이터를 가져오는 작업을 한다.
  • beforeUpdate()
    • 바인딩 된 데이터가 변경되면서 업데이트가 일어나기 전에 어떤 동작을 실행할 수 있다.
    • ex) input태그에 입력시 정규식 체크
  • updated()
    • 바인딩된 데이터가 변경되고 업데이트가 일어난 후에 어떤 동작을 실행할 수 있다.
  • beforeUnmount()
    • 해당 인스턴스의 종료전에 어떤 동작을 실행할 수 있다.
  • unmounted()
    • 해당 인스턴스의 종료 이후에 어떤 동작을 실행할 수 있다.
• 위의 코드는 모두 export default {}안에 작성해서 훅을 걸어줄 수 있다.

• vue에서 모달창이 열린다거나 어떤 버튼이 보이고 사라지고 할때 자연스럽게 애니메이션 혹은 트랜지션을 줄때 유용하게 사용이 가능하다.

• <transition name="트랜지션 명">
  	<h1>내용</h1>
  </transition>
  
  <style>
  /* 트랜지션 시작 시 */
  .트랜지션 명-enter-from { 애니메이션 동작 전 상태 }
  .트랜지션 명-enter-active { 애니메이션 동작 중 상태 }
  .트랜지션 명-enter-to { 애니메이션 동작 후 상태 }
  
  /* 트랜지션 종료 시 */
  .트랜지션 명-leave-from { 애니메이션 동작 전 상태 }
  .트랜지션 명-leave-active { 애니메이션 동작 중 상태 }
  .트랜지션 명-leave-to { 애니메이션 동작 후 상태 }
  </style>

• 트랜지션을 주고싶은 컴포넌트 혹은 내용을 transition태그로 감싼 후 name값을 주고 style에서 시작(enter)시 애니메이션과 종료(leave)시 애니메이션을 정의해주면 된다.

• script부분 구조

  • <script>
    import '??' from '??'
    
    export default {
    	name : '???',
        data() {
        	return {
            	?? : ??
            }
        },
        methods : {
        	??() {
            	??
            }
        },
        components : {
        	??,
        },
        LifeCycleHook...
    }
    </script>

• 데이터 바인딩
  • 데이터 보관함

  • <script>
    export default {
    	name : 'App',
        data() {
        	return {
            	testData : 10,
                mainColor : 'color : red'
            }
        }
    }
    </script>

  • 데이터 사용

  • <h1 :style="mainColor">{{testData}}</h1>

• 반복문

  • <div v-for="i in data" :key="i"></div>

  • 자바스크립트 for...in 문과 같으며 i부분에 변수를 두개까지 할당 가능
  • 변수 두개 할당시 첫번째 변수는 실제 데이터, 두번째 변수는 인덱스 값이다.
  • :key는 일반적으로 인덱스값을 잡아줌
• 조건문

  • <div v-if="true">이 부분은 보이는 부분</div>
    <div v-if="false">이 부분은 안보이는 부분</div>
    <div v-if="물론 변수 사용 가능"></div>

  • <div v-if="num === 1"></div>
    <div v-else-if="num === 2"></div>
    <div v-else="num === 1"></div>

• 이벤트

  • <div @click="클릭했을때 일어날 이벤트내용 혹은 함수 호출"></div>

• 함수

  • ...
    methods: {
    	함수명(매개변수 명) {
        	실행 코드
        }
    }
    ...

  • ex) 클릭이벤트 실행시 작동해야 하는 코드가 길때 사용하고 기타 등등이 있다.
• Component

  • <template>
    	<h1>component 부분 마크업</h1>
    </template>
    
    <script>
    <!-- vue 코드 작성 부분 -->
    
    export default {
    	...
    }
    </script>
    
    <style scoped> <!-- 해당 컴포넌트에만 유효한 스타일을 적용하고싶으면 scoped를 style옆에 붙여주자 -->
    <!-- 스타일 적용 부분 -->
    </style>

  • 컴포넌트 파일 내부 구조는 위와 같이 작성하면 되고 파일 이름은 관례상 PascalCase를 사용해주는것이 일반적이다.
  • ex) Menu.vue

  • <template>
    	<Menu/>
        <Menu></Menu>
    </template>
    
    <script>
    import Menu from './Menu.vue'
    
    export default {
    	component : {
        	Menu,
        }
    }
    </script>
    
    <style>
    
    </style>

  • 컴포넌트 사용
    • 1. 해당 컴포넌트 파일을 import해온다.
    • 2. 컴포넌트에 import해온 파일을 등록해 준다.
    • 3. template부분에서 등록해놓은 컴포넌트를 태그 형식으로 사용할 수 있다. 
• 컴포넌트간 데이터 통신
  • 부모요소에서 자식요소로 데이터를 보내는방법

  • <template>
    
    <Menu :menuNumber="menuNumber"/>
    
    </template>
    
    <script>
    export default {
    	data() {
        	return {
            	menuNumber : 1
            }
        }
    }
    </script>

  • 자식요소에서 부모요소에게 데이터를 받는 방법

  • <template>
    	{{menuNumber}}
    </template>
    
    <script>
    export default {
    	name: 'Menu'
    	props: {
        	menuNumber : Number
        }
    }
    </script>

  • 자식요소가 부모에게 데이터 변경을 요청하는 방법

  • <!-- 자식 컴포넌트 -->
    <template>
    	<button @click="$emit('eventName')"></button>
    </template>
    
    <script>
    export default {
    	name: 'Menu',
    	props: {
        	menuNumber : Number
        }
    }
    </script>
    
    <!-- 부모 컴포넌트 -->
    <template>
    	<Menu @eventName="menuBtnClick"/>
    </template>
    
    <script>
    export default {
    	name: 'Menu',
    	methods : {
        	menuBtnClick() {
    			alert('메뉴를 클릭했네요??')
            }
        }
    }
    </script>

  • 위와 같은 방법으로 특정 데이터를 변경 혹은 함수를 호출해서 이벤트 처리가 가능하다.
• input Data 가져오기

  • <template>
      <div>
        <input @input="show1 = $event.target.value" type="text"/>
        <input @input="changeShow" type="text" />
        <input v-model="show3" type="text">
        <p>{{ show1 }}</p>
        <p>{{ show2 }}</p>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          show1: "",
          show2: "",
          show3: "",
        };
      },
      methods: {
        changeShow(e) {
          this.show2 = e.target.value;
        },
      },
    };
    </script>

  • $event.target.value : 이벤트가 발생했을때 이벤트 타겟의 값을 가져올 수 있다.
  • v-model : $event.target.value와 같음 / input에 데이터 입력시 show3의 값이 바뀜
• watcher
  • 데이터의 변경을 감지하고 변경이 일어났을때 어떠한 동작을 할 지 정의할 수 있다.

  • <template>
      <div>
        <input type="text" v-model="text" />
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          text: "",
        };
      },
      watch: {
        text(a) {
          alert(a + "변경");
        },
      },
    };
    </script>

• NodeJs설치
  • npm으로 설치하기 때문에 무조건 설치 해야 됨
• npm install -g @vue/cli
  • 글로벌로 vue cli설치
• vue create [프로젝트 명]
  • 위의 명령어를 통해 프로젝트 생성 가능
• npm run serve
  • 터미널에서 해당 프로젝트 디렉토리로 이동 후 위의 명령어 입력시 서버 기동
• vscode extention
  • vetur, vue3 snippets, html css support 추가로 더 필요한게 있다면 설치

앞의 글에서 조건 문중 IF문을 알아봤는데 이번에는 다른 조건문 두 가지에 대해 이야기해보려 한다.

먼저 Switch Case문 이다.

switch(조건) {
	case 조건확인:
    	수행 내용
        break;
}

if문에서 조건을 여러 개 주려면 else if를 사용했었는데 switch case문으로 조금 더 간결하게 표현을 할 수 있다.

먼저 switch옆에 조건을 넣어준다. 그 뒤 case옆에 조건의 수행 결과를 입력해주면 되는데 코드로 확인해 보자.

//else if 를 사용
const a = 1
const b = 2

if(a > b) {
	console.log('a가 b보다 큽니다.')
} else if (a < b) {
	console.log('a보다 b가 큽니다.')
}

//switch case 를 사용
switch(a > b) {
	case true:
    	console.log('a가 b보다 큽니다')
        break
    case false:
    	console.log('a보다 b가 큽니다.')
        break
}

switch case문의 주의할 점이 하나 있다.

각각의 case의 마지막에 꼭 break를 써줘야 한다 그렇지 않으면 의도한 결과와 다른 결과가 나올 것이다.

이제 마지막으로 삼항 연산자(Ternary operator)에 대해 알아보자

const a = 1
const b = 2

console.log(a > b ? 'a is big':'b is big')

삼항 연산자의 코드이다.

물음표(?) 앞의 내용이 조건이고 저부분이 True인 경우 콜론(:)으로 구분된 곳 중에 왼쪽이 출력되고 False인 경우 오른쪽이 출력이 된다.

삼항 연산자는 후에 또 이야기할 일이 있을 듯 하니 이 정도로 간단하게 보고 다음으로 넘어가겠다.

if문은 JavaScript의 제어문의 종류 중 하나입니다.

영어의 뜻 그대로 만약 ~하다면 ~내용을 수행해라 라는 제어문입니다.

if (조건) {
	실행 내용
}

기본적으로 위와 같은 문법으로 사용이 가능한데 상세히 살펴보면

제일 앞에 if문을 사용하겠다고 말을 해줍니다.

그 뒤에 소괄호 ()안에 조건을 명시해 주는데 이 소괄호 안의 조건이 true인 경우에 중괄호 {} 안의 내용을 수행해 줍니다.

만약 소괄호 안의 조건이 false라면 중괄호 안의 내용은 무시되고 다음 코드로 진행이 됩니다.

조건문은 if / if, else / if, if else, else 와같이 세 가지 표현이 가능합니다.

if만 사용할 경우 조건을 하나만 걸어둘수 있지만 else if를 사용하면 여러 개의 조건

그리고 마지막에 else를 사용할경우 else 위의 모든 if문의 조건이 만족하지 않을 때 수행할 내용을 입력할 수 있습니다.

if(조건1) {
	수행
} else if (조건2) {
	조건1이 만족하지 않고 조건2에 만족한다면 수행
} else {
	조건1과 조건2 모두 만족하지 않으면 수행
}

위와 같이 else if를 여러번 사용해 조건을 추가해서 실행 내용을 정할 수 있고 모두 만족하지 않는 경우 else의 내용을 수행하도록 코드를 작성할 수 있습니다.

간단한 예시와 함께 마무리를 하겠습니다.

const a = 1
const b = 2

if(a > b) {
	console.log('a가 b보다 큽니다.')
} else if (a === b) {
	console.log('a와 b가 같습니다.')
} else if (a > 100) {
	console.log('a가 100보다 큽니다.')
} else if (b > 100) {
	console.log('b가 100보다 큽니다.')
} else {
	console.log('a가 b보다 작습니다.')
}

조건문 part2에서 뵙겠습니다.

프로그래밍에서 변수란 데이터 저장을 위해 사용하는 메모리 공간을 식별하기 위해 붙인 이름을 말합니다.

10 + 10

위와 같은 코드를 작성했다고 가정했을 때 10 + 10이라는 수식의 답을 담을 수 있는 메모리가 필요합니다.

그 메모리의 주소와 연결해주는 역할을 변수가 하는것이고

var a = 10 + 10;

위와 같이 선언을 해줄 수 있습니다.

10 + 10의 코드를 어딘가의 메모리에 담아주고 코드가 담긴 메모리의 주소의 식별자를  a라고 선언해줍니다.

다른 언어와 다르게 변수의 타입을 지정해 주지 않아도 JavaScript가 String인지 Number인지 등을 판단하여 자동으로 타입을 지정해 주기 때문에 프로그래머가 변수의 타입을 지정해주지 않아도 됩니다.

JavaScript는 ES6이전에는 위에 작성한 코드와 같이 var로 변수를 선언했습니다.

하지만 중복 선언이 가능하다거나 스코프의 개념이 다른 언어와 다른점 등이 불편한 사항중 하나였기에 ES6에서 새로 변수를 선언하는 방법을 정했습니다.

먼저 Const(상수)로 선언을 하는 방법인데 다른 언어의 상수와는 조금 다른 개념일수도 있습니다.

const는 선언과 동시에 값이 할당되어야 하며 수정이 불가능 합니다. 코드를 보면

//선언먼저 한 후에 값의 할당이 불가능 합니다.
const a;
a = 1;

//코드의 재선언 혹은 재할달이 불가능 합니다.
const a = 1;
//100줄의 코드를 썼다고 가정
const a = 2;
a = 2;

위와 같이 선언후에 할당한다거나, 재선언 혹은 재할당이 가능하지 않습니다.

코드를 작성하다보면 변수의 이름 혹은 의도치 않은 재할당을 할수도 있는데 const같은 경우에는 이를 방지해 줍니다.

const box = document.querySelector('.box');
const onClick = e => console.log('hi');

위와 같이 html의 element를 가져온다거나 function을 정의할때 많이 사용합니다.

그렇다면 값이 수정되어야 하는 경우에는 var를 써야 될까요?

아닙니다. const와 같이 나온 let이라는 변수 선언 방법이 있습니다.

//선언후 값의 할당이 가능
let a;
a = 1;

//선언과 할당을 동시에 할 수 있음
let b = 1;

//값의 재 할당이 가능
a = 2;

위와 같이 선언후 할당, 값의 재할당 등이 가능합니다. let은 보통

for(let i = 0; i < 10; i++) {
	console.log(i)
}

이런식으로 i가 계속 변해야하는 경우에 사용을 하면 됩니다,

하지만 const와 let모두 재선언은 불가능 하다는 점을 기억해야 합니다.

//var
var a = 1;
var a = 2;

//const,let
const a = 1;
const a = 2;
let a = 1;
let a = 2;

var은 같은 변수명으로 재선언이 가능하지만 const와 let은 불가능 합니다.

나중에 설명할 스코프에서도 정말 큰 차이가 있습니다.

지금까지 변수에 대한 설명 이였습니다. 감사합니다.