210324 ~ 28_ TIL / 프로젝트 홈

24일

1. 프로젝트 홈 인원수 , 상태 표시
2. 프로젝트 만들기 폼 만드는 중 ~ !

25 할 일

1. firebase 연동
2. firebase 회원가입

파이어 베이스 + redux, redux saga 적용해보려하고하는데 잘안된다 wjr

26 - 휴식

27일

로그인 api 연결
redux-saga를 통하여 요청을 보낸다
axios는 JavaScript 객체를 'JSON'으로 직렬화(serialize)

. application/x-www-form-urlencoded 포멧 대신 데이터를 보내려면 다음 옵션 중 하나를 사용할 수 있습니다.

https://이듬.run/axios/guide/form-format.html#브라우저

axios.post 에 form 데이터를 넣는 방법

axios.post 는 그냥 사용하면 form 데이터 형식을 사용할 수 없다. 그래서 new FormData()를 이용해서 form 형식으로 데이터를 보내야 한다.

기존에 데이터에 post 형식으로 데이터를 보내는 방법

form 형식으로 데이터를 전송하고 제어하기 위해서 는 아래와 같이 사용을 한다.

let form =new FormData()
form.append('id',this.userID)
form.append('pwd',this.userPass)

axios.post(`http://localhost:8000/api/auth`, form)
  .then( response => {
    console.log('response : ', JSON.stringify(response, null, 2))
  }).catch( error => {
    console.log('failed', error)
  })

axios.post 방식은 심플하지만 기본 설정을 잘 해줘야 한다. 암호화 기능을 사용하려면 defaults세팅에서 헤매는 일이 많을 수 있다.

예를 들어 headers에 토큰을 저장해서 암호화 접근 방식을 사용한다는 점 또한 대표적인 기능 중에 하나고, 토큰에 의해서 접속할 수 있은 권한을 제어 하는 기능 또한 같은 맹락이라고 할수 있다

querystring을 사용해서 로그인 하는 방법을 추천한다. 이 방법은 new FomData()로 하는 방식보다 훨씬 간단하다. 줄을 줄일수도 있다

Axios.post(
    `/user/login`,
    qs.stringify({ id, pw })
).then(data  => {
commit("LOGIN", data);
});

출처:

https://forteleaf.tistory.com/entry/axiospost-에-form-데이터를-넣기

[부들잎의 이것저것]

https://이듬.run/axios/guide/form-format.html#브라우저

28 - 휴식