코드 기록장

토익하느라 포트폴리오 마무리를 잠시 미루다가 다시 실행시켜보니 redirect 실행이 안되면서 에러가 발생했다.

게다가 에러 내용이 낯선 에러가 아니라 봤었던 에러였는데 이 에러가 왜 발생했지? 라는 생각이 들었고 결론은, 해결하긴 했지만 원래 잘 동작하던 코드를 고치는 계기가 됐다.

고치고보니 사실 원래 이렇게 작성했어야 했던 건가? 라는 생각이 들었다.

반복문이 없어져서 코드가 더 빠르고 효율적으로 된건가, 잘 고친 것 같기도 하다.

에러 내용

[ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

이게 무슨 에러냐면 한 페이지에 두 가지 요청을 보낼 때 발생하는 에러로, 나는 이미 alter 구현할 때 많이 만났던 에러다.

로그인을 하려는데 로그인이 안되면서 에러가 발생하고 서버가 멈추는 상황이 발생했고 처음에 나는 저번에 alter 구현하려고 설정하면서 수정된 코드 때문인가 싶어서 그 쪽을 계속 살펴봤으나 아닌 것 같았다.

redierct 문제인가 싶어서(콘솔에 저 에러 밑에 express 에러가 떴었기 때문) redirect만 테스트를 해봤는데 redierct는 잘 됐고 따라서 express 문제는 아니었다.

이 때 순간적으로, alter 구현하면서 ajax를 사용하게됐고 그 때문인지는 몰라도 이 이후부터 버튼을 한번만 눌렀음에도 두 번 요청이 되는 상태를 발견했던 기억이 떠올랐다.

요청이 두 번 되면 같은 페이지에 두 가지 요청을 보내게 되니까 이런 에러가 뜰 수 있겠다 싶었고 프론트엔드에서 ajax를 원래 쓰던 axios로 바꿨지만 소용이 없었다.

해결

다시 백엔드 코드로 돌아와서 로그인 코드를 보고 있는데 문득 반복문 코드가 눈에 밟혔다.

로그인 할 때 find 안에서 forEach가 돌아가면서 일치하는 id, password를 찾는 구조인데, 이 코드를 보고 있자니 find만 써도 되지 않나? 라는 생각이 들었고 반복문을 없앴더니 해결됐다.

 결론적으로 반복문을 쓰면서 redirect를 여러 번 요청하게 되는 것 때문에 저 에러가 떴던 것 같은데 원래는 잘 돌아가는 코드였는데 왜 갑자기 에러가 났는 지는 모르겠지만 반복문을 덜어냈으니 코드가 더 깔끔해진 것 같아서 괜찮은 것 같다.

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

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

내가 올랑상점을 구현하면서 가장 오래 붙잡고 있었고, 제일 골치거리였던 게 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만 두 번째다. 

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

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