Vue.js로 웹페이지 리빌드하기 - (11) api 작업 완료.

이 글을 쓰는 시점에서, api 연결 작업이 완료 된 상태입니다.

이 포스팅은, 그간 있었던 일에 대한 기록입니다.

 

 

1. 키워드를 등록 한 후, 생방송 정보 습득 버튼을 누르면 추가된 키워드 정보는 습득해오지 않는 점.

>> vuex의 문제..라기보단 특성이 문제더군요.

기본적으로 웹 페이지 접속 시, 화면 리스트들을 전부 습득해오는 형태로 되어있어서...

바뀐 정보들에 대한 새로고침이, 버튼을 눌러 router를 통해 넘어가도 되지않는 그런 문제.

 

DB 정보를 받아오는 파트가 

1 - 트위터 계정 & 키워드 리스트

2 - 생방송 정보습득 후 그 정보를 보여주기 위한 리스트

3 - 2의 정보에서 알림을 위한 정보를 (진)등록 후, 그 등록 내용을 보여주기 위한 리스트

기본 상태에서 추가 갱신 제거를 할 경우, vuex정보도 같이 수정함으로서 갱신 된 것 처럼 보이게 하는데,

1번은 현 상태로도 문제가 없으나, 

2번의 경우 1번의 변화에 따라 결과값이 변경 되어야하는데, 가장 최초의 1번 상태로 습득한 정보를 유지하게 되어,

2번이 최신화 되지 않는 문제가 발생.

3번 역시, 2번에서 신규 정보 등록을 하면 3번도 갱신되어야함에도 갱신이 안되는 문제가 존재했습니다.

 

 

우선은, 

2번에서 신규 정보 등록시 3번리스트에도 추가하여 3번(등록 내용확인) 화면에 들어갈 때 2번의 추가 결과물도 볼 수 있도록 수정. 

1번에 종속된 2번 리스트의 경우 임시로 새로고침 버튼을 달아주었으나,

애초에 vuex가 처음부터 리스트를 습득하는게 아닌, 외부에서 vuex에 매번 넣어주거나 

아예 이 페이지는 vuex를 배제하는 방법으로 수정하는것이 좋다고 생각드네요.

(그렇게 하게 되면 메뉴 누를때마다 api 호출을 2회하게 되지만, 매번 새로고침 누르는것보단 나은거같기도 하네요.)

 

스샷이 있었으면 더 설명이 편했을텐데, 며칠 쉬어버리는 바람에 부랴부랴 작업한다고 정신이 없었습니다...

 

 

2. 추가 버튼 눌렀을 시, 빈 항목 추가되는 문제

>> 객체들의 이름이 맞지않는 문제였습니다.

단순하지만, 이름을 통일하지 않으면 이런 문제가 발생하는구나 라는걸 새삼 깨닫았네요.

 

            const liveObj = {
                id: this.id,
                broadcastTitle:this.title,
                broadcastContext:this.context,
                broadcastTag:this.tag,
                broadcastDate:this.bcDate,
                tweetAccount:this.tweetAccount,
                source:this.bcSource
            }
            
            // 버그가 있었을 때 
            
            const liveObj = {
                id: this.id,
                title:this.title,
                context:this.context,
                tag:this.tag,
                broadcastDate:this.bcDate,
                tweetAccount:this.tweetAccount,
                source:this.bcSource
            }
            
            // 버그 수정 후

버그가 있었을 때 상태는, api의 오브젝트에 맞춘 이름이었습니다.

이게 화면상의 항목명과 불일치하여, 일부분만 삽입 된 형태의 빈항목에 생성되는 것이었죠..

api는 가급적이면 안건들려고 했지만, 통일을 하는게 좋다고 판단하여 api의 자바소스를 수정했습니다.

(api쪽 오브젝트 변수명들 수정)