Vue로 각종처리하면서 찾아봤던 것들의 정리입니다.
실제로 Front-End 작업을 경험할 수 있었어서 좋았으나 처음 계획했던 React.js를 포기는 아쉬움이 남습니다.
Vue와 좀더 친해지면 다시 React를 만나봐야겠습니다.
CDN(content delivery network)
Bootstrap, Vue.js, axios, jQuery를 사용했습니다.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
자바스크립트에서 Vue의 Method호출
Vue앱명.메소드명()로 접근, 호출합니다.
var sample = new Vue({
el: '#sample'
},
methods: {
sampleMethod: function (e) {
console.log("Vue->Sample->sampleMethod")
}
}
});
<button type="button"
onclick="sample.sampleMethod()"
class="btn btn-primary"
id="sampleButton">Click</button>
Json의 데이터를 forEach로 접근
Uncaught TypeError: .forEach is not a function 의 에러가 발생해서 대응한 내용입니다.
//샘플JSON
var gfriend = { 'sowon':'1995-12-07', 'yerin':'1996-08-19', 'eunha':'1997-05-30',
'yuju':'1997-10-04', 'sinbi':'1998-06-03', 'umji':'1998-08-19'};
//forEach로 접근하는 경우 에러발생
//Uncaught TypeError: gfriend.forEach is not a function
gfriend.forEach(function (value,key) {
console.log(key +"님의 생일은 " + value +" 입니다.");
});
//에러없이 잘 접근됩니다.
Object.keys(gfriend).forEach(function (key) {
console.log(key + "님의 생일은 " + gfriend[key] + "입니다.");
});
폼(Form)의 유효성체크(Validation)
v-if, v-for, v-model
폼의 각 항목에 v-model를 설정, this.v-model설정명 으로 접근합니다.
var loginForm = new Vue({
el: '#loginForm',
data: {
email: null,
password: null,
errors: [],
},
methods: {
onSubmit: function (e) {
this.errors = [];
if (!this.email) {
this.errors.push('메일어드레스를 입력해주세요.');
}
if (!this.password) {
this.errors.push('패스워드를 입력해주세요.');
}
if (!this.errors.length) {
//로그인 폼 송신
}
}
}
});
<form id="loginForm" method="post">
<p v-if="errors.length">
<b>아래의 내용을 확인해주세요.</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<div class="mb-3">
<label for="email" class="col-form-label">메일어드레스:</label>
<input type="text" v-model="email" class="form-control" id="email" />
</div>
<div class="mb-3">
<label for="password" class="col-form-label">패스워드:</label>
<input type="password" v-model="password" class="form-control" id="password" />
</div>
</form>
<button type="button" onclick="loginForm.onSubmit()" class="btn btn-primary" id="loginButton">
LOGIN
</button>
폼(Form) Post송신
FormData, JSON.stringify, axios
FormData에 폼의 각 항목을 담아, 오브젝트(키,값)로 변환, 최종적으로 JSON형식으로 변환해서 axios를 이용해 송신
var loginForm = new Vue({
el: '#loginForm',
data: {
email: null,
password: null,
errors: [],
},
methods: {
onSubmit: function (e) {
this.errors = [];
if (!this.email) {
this.errors.push('메일어드레스를 입력해주세요.');
}
if (!this.password) {
this.errors.push('패스워드를 입력해주세요.');
}
if (!this.errors.length) {
this.sendPost();
}
},
async sendPost() {
var formData = new FormData();
formData.append('email', this.email);
formData.append('password', this.password);
var object = {};
formData.forEach(function (value, key) {
object[key] = value;
});
var json = JSON.stringify(object);
var url = 'http://URL/api/login';
await axios.post(url, json, {
headers: {
'Content-Type': 'application/json',
}
}).then(res => {
this.errors.push(res);
this.success = true;
}).catch((err) => {
Object.keys(err.response.data.errors).forEach(function (key) {
this.errors.push(err.response.data.errors[key]);
}, this);
this.success = false;
});
}
}
});
무한스크롤 (Infinity Scroll)
mounted, axios, v-for
contents배열을 v-for로 출력하도록 HTML을 작성하고 mounted, scroll이벤트로 axios를 이용해 외부데이터를 취득해 contents를 갱신
(테스트를 위해 같은 컨텐츠를 계속 가져오도록 했지만 실제에서는 페이징등 조건을 바꿔가며 가져오도록 처리)
<div class="content-container-list" id="vueContentList">
<div class="card" v-for="(value,key) in contents">
<div class="card-body">
<h5 class="card-title">!{{ value.Title }}</h5>
</div>
</div>
</div><script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
vueContentList.getContents();
}
});
</script>var vueContentList = new Vue({
el: '#vueContentList',
data: {
contents: []
},
methods: {
async getContents() {
var url = 'http://URL/api/getcontents'
await axios.get(url).then(x => {
if (this.contents.length) {
x.data.Contents.forEach(function (content) {
this.contents.push(content)
}, this)
} else {
this.contents = x.data.Contents
}
})
}
},
mounted() {
this.getContents()
}
});
이렇게 열심히 연구를 하고 ASP.NET Core WebAPI와 연동처리도 마쳤는데
1. axios로 폼(Form)데이터를 Json으로 변환해서 송신한 경우 폼의 각 항목의 순서가 제멋데로 알파벳 순서로 바뀌어 버리는 문제
2. ASP.NET Core WebAPI+JWT(JSON Web Token)의 로그인처리
를 해결하지 못하고 시간적인 여유도 없어 ASP.NET Core MVC로 변경해야 할것 같습니다.
