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

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

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

axios.post(`http://localhost:8000/api/auth`, {
    headers: {
      'Content-type': 'application/x-www-form-urlencoded',
    },
    id : 'hong',
    pwd: '12345'
  }).then( response => {
    console.log('response', JSON.stringify(response, null, 2))
  }).catch( error => {
    console.log('failed', error)
  })

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);
});

uri scheme 를 통해서 다른 앱을 열려고 하지만, 앱이 없을 경우의 if 문을 작성하는 방법

상황

daumapp://을 통해서 지도앱을 열어서 위치를 검색하려고 하는데 앱이 없어서 다운받는 페이지로 이동

안드로이드

안드로이드 플레이스토어 접속 URL Scheme

market://details?id=[app id]
market://details?id=net.daum.android.map

브라우저를 통해서 설치시키고자하는 앱의 주소를 알 수 있다.
Play Store에서 다음맵을 검색하고, 앱을 눌러보면 상단에 https://play.google.com/store/apps/details?id=net.daum.android.map 와 같은 주소가 있다. 뒤에 id부분을 [app id] 부분에 추가하면 된다.

아이폰

애플 스토어의 URL Scheme

itms-apps://itunes.apple.com/app/[appName]/[appID]

개발자용 앱 URL Scheme

itms-apps://itunes.apple.com/developer/[developerName]/[developerID]

앱스토어는 브라우저에서 작동되는 사이트가 없으므로 구글링을 통해서 앱정보 페이지로 접속해야 합니다.

https://itunes.apple.com/kr/app/카카오맵-대한민국-no-1-지도앱/id304608425?mt=8

이런식의 주소를 찾을 수 있는데요. id304608425가 앱의 아이디입니다. 그럼 결과물은 아래과 앝은 형태가 됩니다.

items-apps://itunes.apple.com/app/id304608425

Javascript 코드

브라우저에서 기기 종류를 파악하는 코드

혹시 모를 안드로이드와, 아이폰 종류를 구분하기 위해서 아래의 코드를 작성했습니다.

getOS () {  
  let userAgent = window.navigator.userAgent  
  let platform = window.navigator.platform  
  let macosPlatforms = \['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'\]  
  let windowsPlatforms = \['Win32', 'Win64', 'Windows', 'WinCE'\]  
  let iosPlatforms = \['iPhone', 'iPad', 'iPod'\]  
  let os = null  
 if (macosPlatforms.indexOf(platform) !== -1) {  
    os = 'Mac OS'  
  } else if (iosPlatforms.indexOf(platform) !== -1) {  
    os = 'iOS'  
  } else if (windowsPlatforms.indexOf(platform) !== -1) {  
    os = 'Windows'  
  } else if (/Android/.test(userAgent)) {  
    os = 'Android'  
  } else if (!os && /Linux/.test(platform)) {  
    os = 'Linux'  
  }  
  return os  
}

URI 로 이동하는 function

goToUri (uri) {  
  window.location = uri // 앱이 있으면, 앱으로 이동. 없으면 다음줄 실행
  setTimeout( fucntion() => {  
    if (confirm('다음맵이 설치되어 있지 않습니다. 설치하시겠습니까')) {  
      if (this.os === 'Android') {  
        window.location = 'market://details?id=net.daum.android.map'  
  }  
      if (this.os === 'iOS') {  
        window.location = 'itms-apps:/itunes.apple.com/app/id304608425'  
  }  
    }  
  }, 100)  
}

Javascript 를 사용하다보면, 언젠가 한번은 직면하게 될 문제인 Null 과 Undefined입니다. 자바스크립을 처음 접할때는 둘다 같은 같은 null을 의미한다고 생각하고 넘어갔습니다만, 깊게 들어가보면 다르다는 것을 알 수 있습니다.,

Null

• 비어있거나 존재하지 않는값
• 할당해야 하는 값

let a = null;
console.log(a); // result : null

객체로 취급됩니다.

Undefined

• 변수가 선언 되었지만, 아무 값도 할당되지 않은 상태

let b;
console.log(b); // undefined

변수를 underfined로 설정할 수도 있습니다.

let c = underfined;
console.log(c); // undefined

var d = {};
console.log('d',d); // undefined

아무값도 할당되지 않은 상태라 값을 할당할 수 있지만 null은 아닙니다.