시험을 치르면서 만난 에러들..
저번주 목요일에 드디어 마지막 ha를 봤다..
web을 구현하는 문제였는데, 지금까지 배운거만 열심히 했으면 엄청
어렵거나 한건 아니었던것 같다.. 나는 아침 9시에 시작해서 점심먹고..
저녁은 거르고.. ㅋㅋㅋㅋ 서버쪽은 무리없이 진짜 빨리 해결해서 오옷
나 좀 짱인듯?? 하면서 풀었는데.. 클라이언트쪽에서 시간이 오래걸렸다..
밤 10시 ~ 11시 사이에 테스트케이스는 다 통과하였고, 이제 기능구현이 문제였는데
cors오류에서 많이 헤맸다. 요청 보내는 프론트쪽 주소와 백엔드쪽 주소가
다를경우 cors가 발생하는걸로 알고 있다. 브라우저상에서는 보안상의 이유로
막아놓는걸로 기억하고 있었당.
처음에 express로 이미 다 cors설정까지 완료하고 구현했으나 이런
문제가 발생해서 많이 당황했다.. header쪽에도 허용메소드라든가 허용 오리진도
문제가 없는것 같은데 https였던 origin 주소를 http로 바꿔주니 바로 해결되었다..??
오리진 'http://localhost:3000'의 'https://localhost:4000/signin'에서 XMLHttpRequest에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 사전 프리플라잇 요청에 대한 응답이 액세스 제어 검사를 통과하지 못함: 'Access-Control-Allow-Origin' 헤더에는 제공된 오리진과 같지 않은 'https://localhost:3000' 값이 있습니다.
대략 이런 내용인데, 그냥 에러를 해석한 내용 그대로 오리진값을 https가
아닌 http로 바꿔주니 오류가 해결이 되었다. 에러 내용대로 내가 cors설정값에서 허용해준
origin 주소가 달라서 에러가 났던것 같다!
역시 에러 확인을 제대로 하는게 제일 빠르게 해결하는 방법같다.
그러니까 내 로컬 주소는 http 이런 형식인데 내가 cors오류를 제거하려고 처음에 설정한
cors origin값에 https라고 써서 에러가 났던것 같다.
그 외에는.. 회원가입기능을 만들때 axios를 사용하였고, 유저정보를 db로부터 받아와서 새로 생성할
id가 기존 db에 존재하는 id값에 없으면 회원가입이 가능하게 만들었고,
history를 사용하여 다시 로그인페이지로 이동하게 하였는데.. 한가지 간과한게
회원가입기능에는 같은 이메일주소가 있을시 '이미 존재하는 id입니다.'라는 에러메시지를 보내줘야 하는데,
아무것도 설정을 해주지않았다. 그래서 서버쪽에서 만든 controller부분과 잘 합이 안됐던것 같고,
그래서 에러가 났던것 같다.
계속해서 요청데이터값을 찾을수 없습니다. 라는 에러가 떠서 catch값으로 에러를 따로 잡아줬더니 바로 해결되었다.
또 마지막부분으로는 테스트케이스에 좀 낚인 기분도 있는데.. btn className 이름을 잘못보고 계속해서
btn까지 포함해서 클래스명을 작성했던것 같다.. 하.. 에러 찾으면 참 어이가 없는게 많은것도 있다..
그렇게해서 12시 좀 넘어서 기능구현까지 마무리했던것 같다..
HA 끝! 이제는 프로젝트야..!
ha 나름 어려웠지만? 너무 재밌었고 그래도 끝까지 포기하지않으니
어찌저찌 다 풀긴 했다. 그렇게 새벽에 시연영상까지 찍고 너무 배고파서 라면 끓여먹었당 히히히
지금까지 총 3번의 ha를 거쳤는데 역시 마지막 ha이다보니 호락호락하지는 않았고... 우여곡절끝에 잘 끝내긴해서 뭐..
기분은 좋았고.. 한층 더 성장한 기분이었다. 이제 프로젝트를 들어가는데, 사실 아직도 많이 좀 두렵다? ㅋㅋㅋ
하.. 재밌어 짜릿해.. 하지만.. 공부를 하면 할수록 내가 모르는게 더 많아지고, 쉬워보이는것 같아도 파고들면 또
어렵다.. 잘할수있겠지.. ㅎㅎㅎ? 마지막 수료하는날까지 열심히하고. 이번 첫번째 프로젝트를 통해서는
지금까지 배웠던걸 복습한다는 생각으로 진행해야겠다. ㅎㅎ
화이팅하즈아~
