vue에서 axios 사용하기 1

저는 Vue.js와 Axios를 이렇게 사용합니다. #1. Axios 모듈화 - YouTube   

이 강의를 참고 하였습니다!!

 

먼저 간단한 서버를 만들고 거기에 로그인 요청과 글작성 요청을 보내어 받아오는 과정을 통해서 axios의 사용법을 익혀보려고 합니다.

 

먼저 서버에 로그인 요청이 왔다면 받아온 값들 (body안에있는 값)이 맞지 않다면 errors obj에 key value 값을 추가해주고. 

if문을 통해서 그 error obj의 key 값이 하나라도 존재 하는 경우 ( 값이 맞지 않는 경우에 해당 )

response로 401에러를 보내고 데이터로 error obj를 보내준다.

 

이 조건에 해당하지 않는다면 ( 아이디와 비밀번호가 일치한 경우) 200 상태코드를 보내고 token을 넣어 보내준다!!

이번에는 글 작성 코드이다. 마찬가지로 validationErrors라는 obj를 만들어 두고

받아온 title, 혹은 content값이 공백이라면 에러를 추가해준다. 두개다 적지 않은경우 2개의 error가 추가가 될 것이다.

마찬가지로 error의 key값이 하나 이상이라면 ( 공백으로 들어온 값이 있다면 ) 422 상태코드를 보내고 data에 발생한 에러 obj를 보낸다.

 

그렇지 않은 경우 200 상태코드를 보낸다.

 

먼저 간단하게 method를 통한 방법을 통해 만들어보고 점점 고쳐나가보자

 

로그인 버튼을 클릭하면 userid값과 password값을 서버에 보내는 코드이다.

여기서 이렇게 직접 axios를 사용하는 경우에는 문제점이 있다.

서버의 주소가 하드코딩이 되어있기 때문에 만약 서버의 주소가 바뀌는 경우 예를 들어 local에서 develop으로 바뀌는 경우라고 가정한다면 일일이 저 주소를 build할 때마다 바꿔주어야 한다.

 

또한 토큰을 받아와서 무상태 인증을 하는 경우에 axios의 3번째 파라메터에 헤더값에 토큰을 넣어 보내주어야 한다. 이 경우에도 필요한 경우에는 적어주어야하고 필요하지 않은 경우에는 안적어주는 등 손이 많이가게된다. 또 하나라도 수정해야한다면 적어두었던 모든 걸 일일이 찾아가서 고쳐야하게 될것이다..

 

이러한 문제점을 해결하기 위해서 axios instance를 만들고 그걸 가져와서 사용한다!!

이를 만들어보자

먼저 src안에 api라는 폴더를 만들고 http.js파일을 생성해주자

이렇게 인스턴스를 하나 생성해주자 옵션에 baseUrl을 넣어주면 앞으로 저 instance를 통해서 보내는 모든 요청은 다 저 URL로 보내진다. 따라서 앞으로 url이 변경된다면 이 http.js안에 있는 baseUrl옵션 값만 바꾸면 되는 것이다.

 

로그인 모듈을 만들어주기 위해서 api아래에 auth.js파일을 만들자. 이건 인증에 관련된 모듈을 넣어두기 위함이다.

이렇게 간단히 만들어 둔 뒤 method에 있던 것을 이걸로 바꿔주도록하자.

 

이렇게 해도 아까 전과 같이 돌아가는 것을 확인할 수 있다.

게시글 작성또한 마찬가지로 이렇게 만들어 보도록하자

board.js파일을 api폴더 밑에 생성해주고, instance를 가져와서 서버에 받은 값을 요청보내보자

잘 작동이 되는 것을 확인할 수 있다!!

 

이렇게 axios를 별도의 모듈로 만들어 validation과 인증토큰을 한 곳에 모아 관리할 수 있는 기본코드를 만들어 보았다.

 

http.js에서 api서버를 환경변수 에 넣어서 local에서 실행시킬 때와 build할 때 서로 다른 주소를 가르키도록 만들어 보도록하자!!

 

먼저 파일을 두개 만들어주자

// 최상위 폴더에 .env.localhost
VUE_APP_API=http://localhost:3000

// 최상위 폴더에 .env.localhost
VUE_APP_API=http://TESTTESTTEST

 

그리고 package.json에 아래와 같이 --mode localhost --mode development를 추가해주자. 

localhost 모드인경우에는 .env.localhost를 읽어오고, development인 경우엔  .env.development를 읽어온다.

 

http에서도 아래와 같이 코드를 하드코딩이 아닌 환경변수에서 읽어오도록 바꾸어주었다.

이렇게 하면 전처럼 정상작동한다.

npm run build

 위 명령어를 실행한 뒤 생긴 dist폴더의 app.js에 들어가보면 build된 파일에는 환경변수가 development에 정의한 변수명으로 바뀌어 적용된 것을 확인할 수 있다.