728x90
반응형
JS
- 문자열 자르기 -
KeyPoint
- replace()
들어가며
토이프로젝트 진행하면서 "이력"을 등록할 일이 있었다.
수정된 내용을 등록하는건데, "기존의 내용 >> 수정된 내용"의 형식으로 등록되게 하려고 했다.
하지만 모든 내용이 수정되는 것이 아니기때문에 수정된 내용만 등록되게 하려면 약간의 노가다가 필요했다.
수정화면 로직
> 수정 버튼 클릭
> 수정된 내용 확인
> 내용이 없으면 return 있으면 formData에 append
formData에 데이터를 넣기 전에 수정된 내용이 있는지부터 확인해야했다.
그래서 checkData()를 선언해서 그 안에서 조작하기로 했다.
> 수정 버튼 클릭 : @click="uptTask()"로 uptTask() 호출
<!-- 수정버튼 -->
<button @click="uptTask()">수정</button>uptTask() {
if(confirm('수정하시겠습니까?')){
this.$parent.$refs.taskRegist.mode = 'update'; // taskRegist의 mode 변경
this.dataSet(); // dataSet() 호출
this.hide(); // 이것 감추기
this.$parent.$refs.taskRegist.show(); // taskRegist 보이기
}
},
dataSet(){
var self = this;
var taskRegist = this.$parent.$refs.taskRegist;
taskRegist.oldTask = self.list; // 비교를 위해 list 전체 넣기
// 수정화면은 등록화면과 같은 js,jsp 파일을 쓰기때문에 하나하나 세팅
taskRegist.nttNo = self.list.nttNo;
taskRegist.nttSubj = self.list.nttSubj;
taskRegist.nttCtn = self.list.nttCtn;
if(self.list.status == '신규'){
// 등록할때는 '신규'가 default, 수정할때는 '진행중'이 default
taskRegist.status = '진행중';
} else {
taskRegist.status = self.list.status;
}
taskRegist.taskTrack = self.list.taskTrack;
taskRegist.taskPrior = self.list.taskPrior;
taskRegist.taskWorkerId = self.list.taskWorkerId;
taskRegist.taskDoneRatio = self.list.taskDoneRatio;
taskRegist.begDt = self.list.begDt;
taskRegist.endDt = self.list.endDt;
},
show() {
$(this.$el).show();
},
hide() {
$(this.$el).hide();
}
> 수정된 내용 확인(등록/수정 로직)
regist() { // 등록 or 저장
var self = this;
var formData = new FormData();
if(self.status != '신규' && self.taskDoneRatio == 0){
alert('진행중인 업무는 진행도가 0일 수 없습니다. 확인해주세요.');
return;
}
if(self.mode == 'update'){
var histCtn = self.checkData(); // 하단에 있음
if(histCtn == ""){
// histCtn의 초기값이 ""이므로 해당 값이면 수정된 내용이 없다는 말
alert('수정된 내용이 없습니다.');
return;
} else if (histCtn != ""){
// ""가 아니면 수정된 내용이 있다는 말
formData.append('histCtn', histCtn)
}
}
if(self.validate().pass == false)
return;
var txt = (self.mode == 'regist' ? '등록' : '저장');
if(confirm(txt + '하시겠습니까?')){
formData.append('nttSubj', self.nttSubj);
formData.append('nttCtn', self.nttCtn);
formData.append('parntNttNo', self.parntNttNo); // 초기값이 0이므로 굳이 mode에 따라 나눌 필요 x
formData.append('parntRegusrId', self.parntRegusrId); // 초기값이 ''이므로 굳이 mode에 따라 나눌 필요 x
formData.append('status', self.status); // mode와 관련없이 status값 전송
formData.append('taskTrack', self.taskTrack);
formData.append('taskPrior', self.taskPrior);
formData.append('taskWorkerId', self.taskWorkerId);
formData.append('taskDoneRatio', self.taskDoneRatio);
formData.append('begDt', self.begDt);
formData.append('endDt', self.endDt);
// 등록
if(self.mode == 'regist'){ // mode == regist
app.model.task.taskRegist(formData).then(function(){
alert('등록되었습니다.');
self.init();
self.hide();
self.$parent.$refs.taskList.init();
self.$parent.$refs.taskList.show();
});
} else { // mode == update(수정)
formData.append('nttNo', self.nttNo);
app.model.task.taskUpdate(formData).then(function(){
alert('수정되었습니다.');
self.init();
self.hide();
self.$parent.$refs.taskList.init();
self.$parent.$refs.taskList.show();
});
}
}
},
checkData() { // 수정내용 확인
var self = this;
var histCtn = "";
if(self.oldTask.nttSubj != self.nttSubj){
histCtn += "업무명 변경: " + self.oldTask.nttSubj + " >> " + self.nttSubj +"\r\n";
}
if(self.oldTask.taskTrack != self.taskTrack){
histCtn += "업무유형 변경: " + self.oldTask.taskTrack + " >> " + self.taskTrack +"\r\n";
}
if(self.oldTask.status != self.status){
histCtn += "업무상태 변경: " + self.oldTask.status + " >> " + self.status +"\r\n";
}
if(self.oldTask.taskPrior != self.taskPrior){
histCtn += "업무우선순위 변경: " + self.oldTask.taskPrior + " >> " + self.taskPrior +"\r\n";
}
if(self.oldTask.taskWorkerId != self.taskWorkerId){
histCtn += "업무담당자 변경: " + self.oldTask.taskWorkerId + " >> " + self.taskWorkerId +"\r\n";
}
if(self.oldTask.taskDoneRatio != self.taskDoneRatio){
histCtn += "업무진척도 변경: " + self.oldTask.taskDoneRatio + " >> " + self.taskDoneRatio +"\r\n";
}
if(self.oldTask.begDt != self.begDt){
histCtn += "업무시작일 변경: " + self.oldTask.begDt + " >> " + self.begDt +"\r\n";
}
if(self.oldTask.endDt != self.endDt){
histCtn += "업무종료일 변경: " + self.oldTask.endDt + " >> " + self.endDt +"\r\n";
}
if(self.oldTask.nttCtn != self.nttCtn){
histCtn += "업무내용 변경: " + self.oldTask.nttCtn + " >> " + self.nttCtn +"\r\n";
}
return histCtn;
}
컨트롤러, 서비스, SQL, DAO 다 작성하고 정상적으로 출력되는 것까지 확인했다.
그런데 한 가지 마음에 걸렸던 것이 수정된 내용의 맨 마지막에 존재할 수밖에 없는 "\r\n" 이었다.
전부 다 제거하는게 아닌 마지막 것만 지우는 방법은 뭐가 있을까.. 해서 찾아보니
.reaplace() 가 있었다.
return histCtn; 위에 histCtn.replace(/\r\n$/,'');를 적어주었더니 마지막 \r\n만 사라진 채로 데이터가 잘 들어가는 것을 확인했다.
.replace(/\r\n$/, '')
- / : 정규식의 시작과 끝
- \r\n : 제거하고자 하는 것(엔터)
- $ : 문자열의 마지막 >> 이것을 안 붙여주면 모든 \r\n이 '' 으로 바뀐다.
마치며
replace 함수는 알았지만 정규식은 잘 몰랐다.
이번 기회에 정규식도 더 알아봐야겠다.. (공부할게 또 늘었네)
End.
heisely's 괴발개발 개발일지
728x90
반응형
'Programming > JS' 카테고리의 다른 글
| [JS: Vue] v-for & v-bind (0) | 2022.04.05 |
|---|---|
| [JS: Vue] inline-template & refs (0) | 2022.03.21 |
| [JS: Vue] Vue와 Spring 데이터 통신 (0) | 2022.03.10 |
| [JS: Vue] Toggle로 Show/Hide 기능 구현 연습 (0) | 2022.03.07 |
| [JS: Vue] props 연습 (0) | 2022.03.07 |
