Join.vue

1. setup 동작 (데이터생성)
   : 필요한 모든것을 준비함. 제일 먼저
2. v-model 연결된 부분 동작 (연동)
3. reactive는 object가 되어야함
   : const state = reactive({userid:'aaa'});
   3-1. High Level
   : 값만을 (Sting)만을 사용할때
   : 가볍게 쓸수있다. 깊이있는 컨트롤이 어렵다 ( 포커스이동 안됨 )
   3-2. string으로 만들어 넣으면 출력은 되는데 입력은 감지가 안됨
   : object가 아니면 변화감지를 못한다.
4. ref는 오브젝트 X
   4-1. Low Level
   : const userid = ref('www') => 'www'의 값은 의미가 없어짐
   = const userid = (object HTMLInputElement)
   = const userid = (<input type="text" ref="userid" v-model="state.userid" />)
5. focus 사용 할때
   5-1. ref 걸어준다
   : <input type="text" ref="userid" v-model="state.userid" />
   = v-model이 걸린 state.userid의 값은 일단 의미를 잃는다.
   5-2. setup에 ref를 정의한다
   : const userid = ref('www')
   = ref의 값인 'www'도 의미를 잃는다.
   5-3. focus() 사용
   : userid.value.focus();
   = ref가 걸린 태그(<input type="text" ref="userid" v-model="state.userid" />)의 value 부분에 focus를 준다.
   

---

Board.vue

+ BoardContent.vue

1. 번호 클릭시 이동
   1-1. 클릭이벤트 생성
   : <td @click="handleBoardContent(tmp.no)">{{tmp.no}}</td>
   1-2. Router import
   : import { useRouter } from 'vue-router';
   : const router = useRouter();
   1-3. 클릭이벤트 메소드
   : name:"BoardContent" 라는 페이지로 이동하는데
   : query:{no:no} query는 저런 모양으로 던짐

 const handleBoardContent = (no) => {
            console.log(no);
            // 127.0.0.1:3000/boardcontent?no=2
            router.push({name:"BoardContent", query:{no:no}});
        }

BoardContent.vue

1. query를 받기위한 route 설정
   : router 아님 route
   1-1. import { useRoute } from 'vue-router';
   1-2. const route = useRoute();
2. query 받기

const state = reactive({
            no : route.query.no
        })

3. http://localhost:8080/#/boardcontent?no=2
   : 이런 형태의 주소로 페이지가 넘어감