Developer_kade

• uri가 #이 붙은 상태로 시작한다.
  • kade.com/#/home
• #뒤에 있는 내용이 서버로 전달되지 않고 그렇기때문에 uri가 변했을때 서버가 아닌 vue의 router가 안전하게 읽어올 수 있다는 장점이 있다.

• import { createRouter, createWebHashHistory } from 'vue-router'
  
  const router = [];
  const router = createRouter({
    history: createWebHashHistory(),
    routes,
  })

  • history : createWebHashHistory()

• 흔히 보이는 구조이다 
  • kade.com/home
• vue를 이렇게 구성할 경우 서버가 /home의 요청을 가져가서 처리할수도 있기 때문에 서버가 있다면 hash mode를 쓰거나 ~~uri로 들어왔을때 어떻게 처리해라라고 서버에서 따로 한번 처리를 해줘야 할 수도 있다.

• import { createRouter, createWebHistory } from 'vue-router'
  
  const router = [];
  const router = createRouter({
    history: createWebHistory(),
    routes,
  })

  • history : createWebHistory()

• router를 등록하면서 beforeEnter속성을 추가해주면 해당 페이지로 이동하기 전 어떤 코드를 실행해 줄 수 있다.
  • ex) 로그인을 하지 않을 상태에서 마이페이지 접근

• const routes = [
  	{
      	path: '/mypage',
          component: MyPage,
          beforeEnter: (목적지, 출발 페이지) => {
          	// code...
              // to.fullPath -> 전체 경로
              // to.params.id -> id파라미터 값
              // return 값 : false 라우팅 중단
  			// return이 없는경우 라우팅 페이지로 간다.
          }
      }
  ]

   
• https://next.router.vuejs.org/ 참고

• const routes = [
    {
      path: '/detail/:id',
      component: Detail,
    },
  ]

• router.js에서 위와같이 설정을 해줘야 파라미터의 변수를 받아올 수 있으며 :(콜론)으로 시작해서 변수명을 적어주면 detail뒤에 들어온 값은 파라미터값으로 인식한다.

• <template>
  	{{$route.params.id}}
  <template>

• router.js에서 설정한 파라미터를 컴포넌트에서 받아오는 방법이다.
• params까지가 문법이고 뒤에 id는 파라미터 명이다.
  • 상단 코드를 보면 파라미터 key를 id라고 해줬기 때문에 id를 써준것이다.
  • 만약 asdf라고 했으면 $route.params.asdf라고 하면 된다.

• /detail/0/comment > 0번 게시물의 상세 내용과 댓글
• /detail/0/author > 0번 게시물의 상세 내용과 작성자 정보
• 위와 같이 만들어주고싶을때 사용할 수 있다.

• const routes = [
  	{
      	path: '/detail/:id',
          component: Detail,
          children: [
          	{
              	path: 'comment',
                  component: Comment
              },
              {
              	path: 'author',
                  component: Author
              }
          ]
      }
  ]

  • children에 path값을 정해줄때는 절대 /를 넣으면 안된다.
• 사용방법은 똑같이 Detail컴포넌트로 가서 <template>안에 <router-view>를 입력해주면 동작한다.
• $router.push('uri') : 코드 실행시 이동
• $router.go(숫자) : 1앞으로 한페이지 이동, -1 뒤로 한페이지 이동
• https://next.router.vuejs.org/ 참고

• 혹시 에러가 난다면 npm run serve해서 켜놨던 서버를 종료하고 재설치를 해보거나 yarn add를 쓰는것도 좋은 방법이다

• import { createWebHistory, createRouter } from "vue-router";
  
  const routes = [
    {
      path: "uri경로",
      component: import해온 컴포넌트,
    }
  ];
  
  const router = createRouter({
    history: createWebHistory(),
    routes,
  });
  
  export default router;

• 위의 코드를 router.js에 입력해주고 앞으로 만들 페이지들중 라우터에 등록하고 싶은 페이지가 있다면 router.js에 import 해 온후 path와 컴포넌트를 등록해준다.
  
  • path : www.sitename.com/이곳에 오는 값이 uri // uri의 값을 정하고 해당 uri가 입력되면 해당 컴포넌트를 보여주겠다는 의미이다.

• import router from './router'
  createApp(App).use(router).mount('#app')

• <template>
  	<h1>My Page</h1>
  	<router-view></router-view>
  </template>

• <router-view>를 사용한 부분에 라우터로 가져온 페이지를 보여줍니다.

• <template>
  	<router-link to="/write">글 작성</router-link>
      <a href="/write">글 작성</a>
  </template>

• 두가지 태그 모두 동일하게 동작합니다.

• beforeCreate()
  • 인스턴스가 생성되기 전에 어떤 동작을 실행 할 수 있다.
• created()
  • 인스턴스가 생성된 후 어떤 동작을 실행 할 수 있다.
• beforeMount()
  • 인스턴스가 html로 렌더링 되기 전에 어떤 동작을 실행할 수 있다.
• mounted()
  
  • 인스턴스가 html로 렌더링 된 후에 어떤 동작을 실행할 수 있다.
  • 보통 이 부분에서 비동기로 데이터를 가져오는 작업을 한다.
• beforeUpdate()
  • 바인딩 된 데이터가 변경되면서 업데이트가 일어나기 전에 어떤 동작을 실행할 수 있다.
  • ex) input태그에 입력시 정규식 체크
• updated()
  • 바인딩된 데이터가 변경되고 업데이트가 일어난 후에 어떤 동작을 실행할 수 있다.
• beforeUnmount()
  • 해당 인스턴스의 종료전에 어떤 동작을 실행할 수 있다.
• unmounted()
  • 해당 인스턴스의 종료 이후에 어떤 동작을 실행할 수 있다.

<transition name="트랜지션 명">
	<h1>내용</h1>
</transition>

<style>
/* 트랜지션 시작 시 */
.트랜지션 명-enter-from { 애니메이션 동작 전 상태 }
.트랜지션 명-enter-active { 애니메이션 동작 중 상태 }
.트랜지션 명-enter-to { 애니메이션 동작 후 상태 }

/* 트랜지션 종료 시 */
.트랜지션 명-leave-from { 애니메이션 동작 전 상태 }
.트랜지션 명-leave-active { 애니메이션 동작 중 상태 }
.트랜지션 명-leave-to { 애니메이션 동작 후 상태 }
</style>

• <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) 클릭이벤트 실행시 작동해야 하는 코드가 길때 사용하고 기타 등등이 있다.

• <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>

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

• <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의 값이 바뀜

• 데이터의 변경을 감지하고 변경이 일어났을때 어떠한 동작을 할 지 정의할 수 있다.

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

• npm으로 설치하기 때문에 무조건 설치 해야 됨

• 글로벌로 vue cli설치

• 위의 명령어를 통해 프로젝트 생성 가능

• 터미널에서 해당 프로젝트 디렉토리로 이동 후 위의 명령어 입력시 서버 기동

• vetur, vue3 snippets, html css support 추가로 더 필요한게 있다면 설치

• 현재 체크아웃된 커밋을 가리킨다.
• 항상 작업 트리의 가장 최근 커밋을 가리킨다.

• 로그를 확인할 수 있다.
• 현재까지의 커밋 기록 등을 볼 수 있는 명령어이다.

• ^을 브랜 치명 뒤에 붙일 경우 해당 커밋의 부모(즉, 커밋 트리에서 한 단계 전 이미지)를 찾아서 checkout 해준다.
• ^^두 개를 붙여 부모의 부모를 선택할 수도 있다.

• ^를 사용하면 한 단계씩 올라가지만 ~를 사용하면 여러 단계를 한 번에 이동할 수 있다.

• -f 옵션을 이용하면 브랜치를 특정 커밋에 직접적으로 재지정할 수 있다.

• 커밋하기 전으로 돌리는 작업
• 로컬에서 사용 가능(팀원들과 공유는 불가능)

• 현재 커밋과 반대되는 내용으로 새롭게 커밋을 해준다.
• 팀원들과 공유 가능