git stash, 이미 올라간 node_modules 처리, Vue-props,

1. 깃 stash 

깃 stashing은 작업 중에 깃의 변동사항으로 pull을 받거나 갑자기 push를 할 경우에 내가 현재 작업하고 있는 내용을 커밋하는게 아니고 로컬에 잠시 저장하는 기능이다.

에디터에서도 stash기능을 지원해준다. stash를 할때는 메세지를 입력하게 되어있고, 나중에 꺼내올때 이 메시지를 기준으로 꺼내온다.

git stash //로컬에 저장
git stash pop //저장된거 꺼내기
git stash list // stash에 저장된 목록 보기

stash를 한 후에 git status를 보면 기존에 작업하고 있던 값들이 보이지 않을 것이고, pop을 하면 보일 것이다.

2. 이미 깃에 노드 모듈이 올라가있는 경우.

윈도우, 맥-리눅스 포함하여, 노드 모듈이 다르다. 운영체제 환경에따라서 노드 모듈이 다르기때문에

프로젝트에 사용된 노드 모듈이 윈도우 환경으로 설정되어있는 경우 맥이나 리눅스에서 동작하지 않는다. 

이런경우 노드 모듈을 지웠다가 npm insatall를 통해서 다시 설치해야한다.

이런 경우 이미 git ignore에 뒤 늦게 파일을 올려도 이미 깃에 올라가있기 때문에 노드 모듈이 걸러지지 않는다.

로컬-원격저장소- git ignore 3박자를 일치시켜주어야 이런문제를 거를 수 있기때문에, 브런치 다시 따고 애초에 노드 모듈을 git ignore에

명시해서 원격저장소로 올린다. 그러면 해결됨.

3. Vue에서  여러 props처리

컴포넌트 한개에서 두개이상의 화면을 보여주고 싶을때, 들어오는 값이 무엇이냐에 따라 화면을 달리 보여주면된다.

들어오는 값을 props로 보내주면 해결된다.

<자식컴포넌트>

<template>
 <button class="cancle-button" @click="onClickCancle" :style="propStyle">
 	<img :src="propsImg" >
 </button>
</template>

<script>
 ..생략
props : ['propsImg','propsHeader','propsTitle','content','propStyle'],
 ..생략
 
 methods : {
        onClickOk(){
            this.$emit('onClick-value');
        }
</script>

속성을 props로 바로 사용하고 싶을때는 콜론(:)을 이용한다. 

<부모컴포넌트>

 <template>
 	<popup-notice ref="PopupNotice" 
 				  v-if="isCheckPrivacy" 
 				  v-on:onClick-value="handleCancle" //자식컴포넌트로부터 이벤트받을때 이용
 				  :propsImg="privacySrc"     //자식 프롭스 바로 이용하고자 할때 : 이용
 				  v-bind:content="typePrivacy"> //props로 값 넘기고 싶을때 이용
    </popup-notice>
 </template>
 
 <script>
 (...생략)
  components: {
    PopupNotice,
  },
    data() {
    return {
      typePrivacy:"privacy",
      typeTerms : "terms"
  
    }
  },
  </script>

자식컴포넌트에서는 props를 배열에 명시해주고, 그 프롭스만을 이용해서 정보를 부모컴포넌트로 받는다.

부모컴포넌트는 Component에 자식컴포넌트를 등록하고 html부분에 작성한다.

4. $emit

자식컴포넌트에서 부모컴포넌트로 값을 전달해주고 싶을때는 $emit을 이용한다. 다만 내가 자식컴포넌트로 등록한 컴포넌트만

이벤트를 받을 수 있다.

자식컴포넌트가 <child-component>라 하면, 자식컴포넌트에서 $emit으로 이벤트를 부모에게 전달해준다하면,

부모컴포넌트에서 부모컴포넌트의 태그에서는 이벤트를 받을 수가 없다.

자식컴포넌트에서 이벤트를 받아야한다.

예)

<부모컴포넌트>

<template>
	<div v-on:generate-event="handleEvent"></div>
    <child-component ref="childComponent" v-on:generate-event="handleEvent"></child-component>
</template>

<script>
components:{childComponent},
(...생략)
</script>

div태그는 이벤트를 받을수없다.

child-component는 이벤트를 받을 수 있다. 실제로 함수 실행시켜 로그 찍어보면 알 수 있다.