[Node.js, Vue.js, Ajax] -삽질기록- Vue.js alert 넣기

 

 

원래는 패치 내용을 따로 포스팅 할 계획이 없었으나 해결이 안되다보니 기록이라도 남기려 작성하게 됐다.

 

그 김에 앞으로 패치 관련 포스팅은 이 카테고리에서 하도록 하겠다.

 

 

---

 

 

내가 올랑상점을 구현하면서 가장 오래 붙잡고 있었고, 제일 골치거리였던 게 alert라서 패치할 때도 가장 먼저 선택했건만, 역시나 해결하지 못했다.

 

앞으로도 많은 에러와 기능 구현을 맞닥뜨리게 될텐데 끝까지 해결해보기 위해 부끄럽지만 이렇게 기록을 남기기로 한다.

 

 

---

 

 

 

해결했다고 착각했던 이유

 

이유가 참 부끄럽지만, 테스트를 잘못했기 때문이었다.

 

ajax로 코드를 작성해서 로그인할 때 일부러 틀린 아이디/비번을 입력했고 alert가 잘 나왔다.

 

그 당시 components 코드

 methods : {
        login() {
                    jQuery.ajax({
                        url: "http://localhost:3000/login",
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        data: ({
                            id : this.id,
                            password : this.password }),
                        error : function () {
                            alert("이미 존재하는 아이디 입니다.");
                        } 
                    });
                }

 

그래서 아. 되는구나! 했으나 다음날 쿠키 관련 기능 때문에 로그인을 해야해서 제대로 된 아이디랑 비번을 입력했더니 그 때도 alert 창이 뜨는 것이었다.

 

alert 창이 뜨고 로그인이 되긴하나 제대로 입력했을 때는 alert 창이 뜨면 안되니까, 몇 시간 동안 구글링해서 문제를 알아냈다.

 

알고보니 엄청 흔한 ajax 데이터타입 문제였다.

 

그러니까 주고받은 데이터타입이 달라서 무조건 에러가 났던 것이다.

 

그래서 아래와 같이 코드를 고치니까 에러가 없어졌다.

 

 methods : {
        login() {
                    jQuery.ajax({
                        url: "http://localhost:3000/login",
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        data: JSON.stringify({
                            id : this.id,
                            password : this.password }),
                        error : function () {
                            alert("이미 존재하는 아이디 입니다.");
                        } 
                    });
                }

 

근데 이제 문제는 잘못된 아이디/비번을 입력해도 성공처리 된다는 것이다.

 

 

 

강제 에러 발생시키기

 

그래서 나는 강제로 에러를 발생시켜 alert 창을 띄우려 했다.

 

1. res.status(400) 코드를 작성해봐도 아예 먹히지 않았다.

 

2. res.send로 변수를 전달해 받은 변수가 특정 값이면 alert를 띄워라 도 안됐다. 아니 그전에 send를 쓰면 무조건 서버가 다운되어버린다. render도 마찬가지.

 

3. throw new Error() 는 그냥 쓰면 서버가 다운되어버리고 try~catch로 감싸면 catch때문에 에러가 처리됐다고 보는 지 에러 로그만 출력할 뿐 뷰로 전달되진 않는듯했다.

 

4. next() 솔직히 이게 제일 가능성 있다고 생각했다. 에러가 발생하면 처리를 다음 함수에게 맡기는 방식인데, 에러는 나는데(alert 창도 뜸) 다음 함수로 안 넘어가서 실패했다. 왜 안 넘어가지는 지는 지금까지도 모르겠다. 다음 함수를 로그인 페이지 띄우는 함수로 해놨고 alert 창도 뜨고 로그인 페이지도 띄우면 괜찮을 거라고 생각했는데, 흠.

 

5. ajax가 아닌 axios로 다시 시도해보기 도 해봤으나 여전히 axios는 then이든 error에서 값이 받아지지 않았다.

 

 

+물론 success 상태에서 값을 받아 alert를 띄우는 것도 해봤는데 안됐다.

 

 

결론

 

삽질 기록은 alert만 두 번째다. 

 

첫 번째 삽질 기록과 두 번째 삽질기록에서 겹치는 건 거의 없어서 여러 시도를 해봤다는 거에 일단 의의를 두기로 했다...

 

언젠가 해결하는 그 날이 온다면 더욱 좋겠지만.