[JS] 문자열 자르기

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 괴발개발 개발일지