[팀] 겸상 - Vue.js에서 textarea에 동적 메시지 값 데이터바인딩 처리

겸상 프로젝트 팀 회의에서 선택된 숟갈에게 각 숟갈의 닉네임이 포함된 단체 메시지를 발송하는 것에 대해 부정적인 의견이 모아졌다. 숟갈의 프라이버시를 침해할 수 있다는 것이 이유였다. 사실 숟갈이 선택될 때마다 textarea에 동적으로 default 메시지를-자동적으로-생성하는 기능을 구현하기 위해 꽤 애를 먹었기 때문에 그런 팀원들의 의견이 반갑지 않았다. 그래도 팀 내 다수의 의견이므로 이 기능을 빼기로 했고, 아쉬우니 블로그에는 남겨 두고자 이 글을 작성한다.

[그림 1]과 같이 함께할 숟갈이 모두 선택되면 textarea가 표시된다. textarea에는 사용자가 입력하지 않아도 default로 메모가 작성되어 있고 이 메모는 수정이나 삭제가 가능하다. 사실 여기까지의 구현은 매우 간단하다. 문제는 선택된 숟갈의 닉네임이 동적으로 반영되는 부분이다. 

[그림 1] 함께할 숟갈을 모두 선택하면 선택된 숟갈의 닉네임이 포함된 메시지가 자동 생성된다.

 

선택된 숟갈의 닉네임이 메시지에 동적으로 반영되도록 하는 기능을 구현하고 싶었는데 금방될 줄 알았다. 처음에는 선택된 숟갈의 변경을 감지하는 computed나 watch를 사용하면 되겠다고 생각했다. 그런 이 아이들은 textarea 안에 원하는 메시지는 만들어 주나 사용자가 삭제나 수정을 할 때 문제가 되었다. 양방향 데이터 바인딩이 곤란했기 때문이다. 여러 다른 시도와 고민 끝에 아래와 같이 코드를 작성하여 해결하였다. 아래 코드들은 해당 vue component 파일에서 관련 부분만 떼어내 정리한 것이다.

 

template부분

script의 data에 있는 babsangMessage 변수를 v-model로 바인딩했다. 

<textarea
    class="form-control"
    style="resize: none"
    id="exampleTextarea"
    rows="3"
    v-model="babsangMessage"
></textarea>

 

script부분

babsangMessage 변수에는 문자열을 '+'로 결합하였다. 백틱도 사용했었는데 원하는 결과가 나오지 않아 결국에 사용한 방식이다. 이 기능의 핵심은 checkedNickname 배열을 자바스크립트 내장 함수인 join을 사용해 함께할 숟갈들을 문자열로 변경하여 결합하는 것이다.

data() {
    return {
        babsang: 0,
        babsangMessage: '',
        selectedSpoons: [],
        checkedNickname: [],
        checkedEmail: [],
    };
},
methods: {
    writeMessage() {
        this.babsangMessage =
            '축하합니다 ^O^ ' +
            this.checkedNickname.join(', ') +
            '님은 ' +
            this.diningTableSpoons.dining_table_id +
            '번 밥상의 숟갈로 선정되셨습니다.';
    },
    doSelect(spoon) {
        if (this.selectedSpoons.length < this.diningTableSpoons.dining_count) {
            console.log('숟갈 선택');
            this.selectedSpoons.push(spoon);
            this.checkedEmail.push(spoon.email);
            this.checkedNickname.push(spoon.nickname);
            this.writeMessage();
        }
    },
},

 

원했던 대로 정상적으로 기능하는 코드들을 작성해 두고 보면 정말 별거 아니다. 하지만 이것을 얻기 위한 과정은 녹녹하지 않았다!