1. VSC & Github 연동 및 vue 셋팅

1. github에 new repository 추가

--> HTTP 경로 복사  https://github.com/leebom21/yeonstargram.git

GitHub - leebom21/yeonstargram

 

 

2. iterm 에서 프로젝트 경로 지정 및 프로젝트 추가

 

https://iterm2.com/

iTerm2 - macOS Terminal Replacement

cd workspace
vue create "프로젝트명"  //yeonstargram-vue

- 그 후 기능체크는 본인이 사용할 것들로 체크하면 됨.

 

 단축키 Tip 

- iterm에 나온대로 cd yeonstargram-vue(프로젝트명) 로 해당 경로 들어간 후 

code .

을 누르면 VSC가 해당 파일경로로 켜짐

 

---

# 같은 컴포넌트 사용 시 출력값을 다르게 하고싶을 때 & 변경된 값으로 value를 변경하는법

//Home.vue

<Input :value.sync="id" type="text" placeHolder="전화번호, 사용자 이름 또는 이메일" />
<Input :value.sync="pw" type="password" placeHolder="비밀번호" />


//데이터에 빈값을 넣어놓고 
data() {
    return {
      id: "",
      pw: "",
    };
  },

- id,pw는 빈값으로 넣어두고 아래 자식 컴포넌트에서 담아 올려주는 값을 해당 데이터에 각각 넣어줌

:value(담아서 올려준 값).sync = "id"(들어갈 그릇)

 

- type, placeHolder 같은 경우에는 string으로 들어가기 때문에 v-bind(:)를 사용하지 않아도 된다

 

//Input 컴포넌트

<template>
  <div>
    <input
      v-model="data"
      :type="type"
      :placeholder="placeHolder"
      :value="value"
    />
  </div>
</template>


//script
export default {
  name: "Input",
  props: ["type", "placeHolder", "value"],
  computed: {
    data: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("update:value", value);
      },
    },
  },
};

- 처음 들어왔을 때 get을 실행하고 값이 변경되는경우 set으로 실행하여 변경된 값을 부모에게 보내줌

 

 

# 클릭시 경로이동 해야하는경우

<div @click="login">로그인<div>

 // script
login() {
   this.$router.push("/main");
},


+ 참고)
this.$route.query 는 뒤에 bid="",params="" 값이 바뀌거나 해야할때 작성하면 되고
단순 경로 이동일때는 this.$router를 사용하면 된다!

 

# axios

https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

 

#  get과  post의 사용 구분

CRUD (Create Read Update Delete.) 

get = Read 

post =Create, Update , Delete 

보안이슈로 인해 함부로 볼수 없게 만들어야하는 부분들은 post로 작업 필요.

- 대부분의 api 실행 코드는 created 안에서 호출

- axios 작성 방법은 상단 링크는 통해 참고

 

해당 코드는 대부분 아래 스크립트 부분이 먼저 실행되고 그에따라 HTML 을 뿌려주는 순서대로 진행된다.

ㄱ러나,

beforeCreate는 3-2-1 의 순으로 뿌려주게 됨.

created는 2-3-1

 

++ vue life cycle 참고 링크

https://v3.ko.vuejs.org/api/options-lifecycle-hooks.html#mounted

라이프사이클 훅 | Vue.js