RestFul하게 작업하기_ 반응형 데이터
sprweb21_rest + vuerest.html 작업
당시에 리액트 작업해서 이만큼 복붙해두었다.
restful 형식
| @GetMapping | 읽기(전체/1개) |
| @PostMapping | 추가 insert() |
| @PutMapping | 수정 update() |
| @DeleteMapping | 삭제 delete() |
이동 url은 같다.
@mapping 형식만 달라진다. 이게 restful의 특징.
<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h2>회원정보</h2>
<table>
<thead>
<tr>
<th>번호</th><th>이름</th><th>주소</th><th>수정/삭제</th>
</tr>
</thead>
<tbody>
<tr v-for="member in members" :key="member.num">
<td>{{member.num}}</td><td>{{member.name}}</td><td>{{member.addr}}</td>
<td>
<button @click="selectMember(member)">수정</button>
<button @click="deleteMember(member.num)">삭제</button>
</td>
</tr>
</tbody>
</table>
<h2>회원 추가 또는 수정</h2>
<form @submit.prevent="saveMember">
<input v-model="memberForm.name" placeholder="이름입력" required><br/>
<input v-model="memberForm.addr" placeholder="주소입력" required><br/>
<button type="submit">회원 {{memberForm.num?'수정':'추가'}}</button>
<!-- num값에 따라서 수정/ 추가가 보이게함 -->
</form>
</div>
<script type="text/javascript">
const {createApp, ref, onMounted} = Vue;
createApp({
setup(){
const members = ref([]);
const memberForm = ref({num:null, name:'', addr:''});
//자료를 읽는 비동기 함수 작성
const fetchNumbers = async() => {
const response = await axios.get('/members');
members.value = response.data;//const members = ref([]);의 members에 자료를 넣어준다
};
// 화면에 출력된 정보를 받으면된다. 회원정보목록의 수정버튼을 누르면, 하단에 칸에 뜨게된다.
const selectMember = (member) => {
memberForm.value = {...member};
}
onMounted(fetchNumbers); //컴포넌트가 Mount되면 fetchNumbers 호출
return {members, memberForm, saveMember, deleteMember, selectMember};
}
}).mount('#app');
</script>
반응형 데이터란?
Vue.js에서 데이터 변경을 자동으로 추적하고 UI를 업데이트하는 방식을 설명하는 용어입니다. Vue.js의 반응형 시스템은 데이터의 상태 변화에 따라 UI를 자동으로 업데이트해주는 기능을 제공합니다.
Vue.js는 데이터를 ref 또는 reactive로 감싸서 "반응형"으로 만듭니다. 이 데이터가 변경되면 Vue는 자동으로 UI를 업데이트합니다. 예를 들어, members와 memberForm은 ref로 감싸져 있기 때문에 이들의 값이 변경되면 Vue가 이를 감지하고 관련된 UI를 다시 렌더링합니다.
ref의 사용
ref는 Vue의 Composition API에서 사용하는 함수로, 기본 데이터 타입(문자열, 숫자 등) 또는 객체를 감싸서 반응형으로 만들어 줍니다. ref로 감싸진 데이터는 .value 속성을 통해 접근하고 수정할 수 있습니다.
수정 및 삭제
버튼 및 포맷
<td>
<button @click="selectMember(member)">수정</button>
<button @click="deleteMember(member.num)">삭제</button>
</td>
<h2>회원 추가 또는 수정</h2>
<form @submit.prevent="saveMember">
<input v-model="memberForm.name" placeholder="이름입력" required><br/>
<input v-model="memberForm.addr" placeholder="주소입력" required><br/>
<button type="submit">회원 {{memberForm.num?'수정':'추가'}}</button>
<!-- num값에 따라서 수정/ 추가가 보이게함 -->
</form>num값이 있으면, 있는 자료 읽어오는 것이므로 수정.
num값이 없으면, 없는 것이므로 추가.
작동 함수
// 회원정보 저장 (수정 또는 추가)하는 비동기함수
const saveMember = async() => {
if(memberForm.value.num){
//memberForm.value.num값이 있으면 회원수정@Put
await axios.put(`/members/${memberForm.value.num}`, memberForm.value);
}else{
//memberForm.value.num값이 없으면 회원 추가@Post
await axios.post('/members', memberForm.value);
}
//위 작업 후 입력 자료 (폼) 지우기
memberForm.value={num:null, name:'', addr:''};
fetchNumbers(); //수정또는추가후 목록보기
};
// 회원 삭제 비동기 함수 @Delete
const deleteMember = async(num) => {
await axios.delete(`members/${num}`);
fetchNumbers(); //삭제 후 목록보기
};
// 화면에 출력된 정보를 받으면된다. 회원정보목록의 수정버튼을 누르면, 하단에 칸에 뜨게된다.
const selectMember = (member) => {
memberForm.value = {...member};
}
onMounted(fetchNumbers); //컴포넌트가 Mount되면 fetchNumbers 호출
return {members, memberForm, saveMember, deleteMember, selectMember};
}
++ robots.txt
++ 스크래핑 vs 크롤링
스크래핑
어느 1 페이지에 대한 정보만 빼가기
크롤링
사이트들을 넘나드며 원하는 페이지를 긁어온다
public 폴더
= static 과 동등한 위치의 폴더. 뷰파일들 모음.
(static 리액트 파일 폴더)