Signup, Login 연결

https://github.com/HyojinPark1223/Helngers

1. 포스팅 개요

java spring boot의 security가 적용된 서버와 Vue 서버를 연결시키는 작업을 진행했다. 원인은 모르겠으나 security가 적용된 자바 서버는 일반적인 axios로 적동되지 않았고 연결이 되는 특정 샘플 뷰 코드를 찾아 그 코드를 분석해 기존 코드에 접목시켰다. 이 과정에서 나온 오류들을 기록하고 되새김해본다.

2. 어려움

1) 벡엔드와의 소통 문제

생각보다 벡엔드와 프론트엔드간의 입을 맞춰야할 부분들이 많았다.

일단, rest API

아무래도 벡엔드에서 API 만드는 작업이 사람도 바뀌고 하다보니 원래 약속되어 있던 주소랑 다른 주소로 나에게 넘겨졌다.

그래서 일일히 주소를 확인하고 그 주소에 맞춰야만 했다.

예를 들어,
/login 이라고 약속했다면
실제론
/api/login 이라고 되어있다거나

2) 특정 칼럼

회원가입에서 한동안 시간을 잡아먹었던 문제인데
샘플 코드에서는 정상적으로 API를 찾아서 post가 되던 친구가

내 코드로 와서 post하면 400대 에러가 발생했다.

• 샘플코드
  

• 우리코드
  

=> 해당 사항은 정해져 있는 칼럼들만을 데이터로 넘겨야 API에서 받아준다는 것을 알게되었다. 3. 개발과정에서 자세히

3. 개발과정

2-2)해결

백방으로 디버깅을 하던 중에 네트워크 창을 열 생각을 했다.

지난번 시큐리티 CORS 문제 때, 도움을 주시려 하던 분이 네트워크 창을 열어 빨간 400의 소스를 봤던게 기억 났기 때문이다.

(이 전까지는 Vue data창과 console로 체크를 했다)

그렇게 샘플 코드의 네트워크창과 내 코드의 네트워크 창의 다른점을 비교해보기 시작했다.

그러던 중
=> 스샷이 없네 ;

아무튼 그러던 중

Signup 버튼을 눌렀을 때, 넘기는 데이터가

샘플 코드는 : username, name, password

내 코드는 : username, email, password

이렇게 서로 달랐다.

그런데 어차피 클래스를 이용해 모든 칼럼들이 포함된 User인스턴스를 만들어 활용하고 있었기 때문에 상관 없으리라 생각했다.

문득 벡엔드에서 칼럼을 받는데 빡빡하다는 생각이 나 샘플 코드의 칼럼처럼 맞춰주었더니 성공.

4. 느낀점

먼저 넘겨줘야할 데이터의 칼럼을 벡엔드랑 프론트가 약속을 해야한다는 점을 새롭게 알았고

REST API 약속을 안지키면 얼마나 프론트엔드가 빡치는지 알게되었다.

또, 이번 샘플 코드를 공부하면서 단순히 vuex에 죄다 담아서 데이터를 활용하는게 아니라 model이라는 폴더와 service라는 폴더를 만들어 클래스를 이용하는 방법도 알게 되었다.

export default class User {
    constructor(username, password, name, role, id) {
        this.username = username;
        this.password = password;
        this.name = name;
        this.role = role;
        this.id = id;
    }
}

formData: new User('', '', ''),

=> 이렇게!
=> 매우 좋은 것 같다 내일부터는 먼저, login 상태 들고 다니기 그 다음 유효성 검사 개발