WIL(Weekly I Learned)_210411

미니 프로젝트

API

이번 프로젝트에서 핵심적으로 많이 느낀 점은 api 통신 방식이다.
기존 교육때 배운내용은 서버리스 (파이어베이스) 와 같은 것으로 통신하고 서버를 관리하는 것 까지 배웠는데, 백엔드 파트에서 작업해주는 것을 CRUD하는 부분을 많이 배우고 느꼈다.
제일 명확하게 개념 정리가 된부분의 로그인의 토큰 부분인데,
일반 홈페이지의 경우 header 부분에서 토큰을 관리하지만, 앱같은 경우 asyncstorage를 통해 관리하는 부분이 흥미로웠던 점이다. 하나 예시 코드를 작성하면

export async function login(id, password, navigation) {
  try {
    const result = await axios({
      method: 'post',
      url: host + '/auth',
      data: {
        id: id,
        password: password,
      },
    });

    if(result.data.msg == "success") {
      Alert.alert('로그인 성공!');
      console.log(result.data.token)
      await AsyncStorage.setItem('session', "Bearer" + result.data.token);
      navigation.push('TabNavigator');
    } else if (result.data.msg == "fail") {
      Alert.alert('로그인에 실패했습니다.');
    }
  } catch (err) {
    Alert.alert('무슨 문제가 있는 것 같아요! => ', err.message);
  }
}

위 코드는 데이터를 서버에 전송하는 함수로 여기서 구체적으로 눈여겨 보게 된 점이 함수를 사용하는 여러 과정 (지역변수, 매게변수, 호출 과정, 비동기처리) 등등인데 자바스크립트 언어에 대한 사전 교육이 많이 부족한 상태라 코드를 짜기 많이 힘들어 부끄럽지만 백엔드에 자바스크립트 개념을 잘 알고 있는 개발자에게 조언을 구해가며 겨우겨우 짜내었다. (일부는 아예 다 해준 것도 있다.) 이 과정을 통해 자바스크립트를 명확하게 공부할 필요성을 느껴 주말에 드림코딩 강좌를 통해 쭉 정리 해봤다. 차 후 자바스크립트 개념도 정리해서 올려야 겠다는 생각이 든다.
조금 이야기가 한쪽으로 샌 부분이 있으나, 내용을 보면
await AsyncStorage.setItem('session', "Bearer" + result.data.token);
이부분이 보일 것이다. 이 것이 토큰값을 session이라는 통에 넣어 관리 하는 것이고 그외에 통값의 변수를 달리하여 여러가지 정보를 휴대전화에 보관이 가능한 것을 알게되었다.
위 기능을 통해 다양한 기능을 구현해 볼 수 있도록 노력해야겠다.
(그리고 자바스크립트 언어도 하나씩 꾸준히)