WIL(Weekly I Learned)_210404

4주차일기장 미니프로젝트

리액트 네이티브 심화과정 실습 (Navigator/Components)

심화강의 그리고 기본강의에 아직도 정리되지 않은 개념과 기본기가 너무 많지만,
시간관계상 바로 들어갔다. 우선 StackNavigator, TabNavigator 개념과 Components 요소들을 더욱 활용하게 되면서 이해도가 많이 올라갔다.
헷갈렸던 부분이 스택네비게이터와 탭네비게이터를 연결해서 연동하는 과정이 어려웠는데, 결국 쉽게 정리하면 스택네비게이터에는 맨처음보이게 되는 부분과, 꺼내서 쓸 수 있는 페이지를 넣어두는 것. 그리고 기존에 있는 내용들을 state관리를 통해 초기화해서 새로운 스택으로 활용이 가능한 점을 알았다. 아직 초기화 되는 부분을 명확히 구현을 못해보았지만 그 외의 부분은 명확하게 구현하는 것으로 많은 이해를 얻었다. 그다음 TabNav 같은 경우 하단에 고정으로 픽스시킬 메뉴들을 구현하는 것인데, Icon을 적용하는 과정 중 Ionicons 아이콘 카테고리(애플과 안드로이드 모두 사용가능한 아이콘 모음)중 사용가능한 아이콘이 많지 않아서 (혹은 못하거나) 불편 혹은 어려움을 겪었다.

클론코딩 (당근마켓) 스타트

우선 인원은 RN맴버 두명, NODE맴버 3명으로 총인원 5명으로 구성되어 팀 작업을 시작했다.
아래 노션링크를 통하여 업무를 분배하고 나는 구현해 본 적이 없던 로그인 기능을

(https://www.notion.so/_clone-831e9dc759714a06867d6cb349c7540a)

구현해보기로 했다. 일단 튜토리얼 가이드대로 차근차근 정리하면서 붙혀넣었기 때문에 시작은 어려움이 없었고, 잘풀려서 재미있었다.(하라는대로 적용하면 되니깐)
그리고 api를 연결하는 과정에서 막다른길에 다다랐다.
아래는 파이어 베이스를 활용했던 코드인데, 아직 자바스크립트도 미숙한 상태에서
외부 링크를 연결하는 로직을 짜는 것은 내게 너무나도 어려운 과업이었다.
결국 튜터님께 부탁해서

export async function registration(nickName, email, password) {
    try {
        console.log(nickName, email, password)
        await firebase.auth().createUserWithEmailAndPassword(email, password);
        const currentUser = firebase.auth().currentUser;
        console.log(currentUser)
        Alert.alert("회원가입 성공!")
    } catch (err) {
        Alert.alert("무슨 문제가 있는 것 같아요! => ", err.message);
    }
}

튜터님으로부터 받은 api call 예시

const fetchFollowRequestListApi = () =>
  axios.get(HOST + `/api/follows/requested-list/`,
    {
      headers: { Authorization: `Bearer ${token}` },
    }
  );


const approveAllFollowsApi = (payload) =>
  axios.post(HOST + `/api/follows/approve-all/`,
    payload,
    {
      headers: { Authorization: `Bearer ${token}` },
    }
  );

문제는 봐도 이해가 잘 가지 않았던 부분이다.
경로 설정을 하는 것은 이해가 갔으나, 변수를 어떻게 설정해서 출력하고 뽑아내고 해줘야할 지 앞이 깜깜했다. 그래서 튜터님이 다시 정리해서 보내주셨는데

axios.get(someUrl).then((res) => {
  console.log(res);
  const data = res.data; 
});

아래와 같이 보내주셔서 우선

export async function registration(nickName, email, password) {
    try {
        axios.get(url).then(nickName, email, password)
        console.log(nickName, email, password)
        const currentUser = nickName.currentUser;
        const currentUser = email.currentUser;
        const currentUser = password.currentUser;

        console.log(currentUser)
        Alert.alert("회원가입 성공!")
    } catch (err) {
        Alert.alert("무슨 문제가 있는 것 같아요! => ", err.message);
    }
}

위와 같이 정리해보았다. 하지만 currentUser값에 내가 원하는대로 변수가 다 포함이 되었는지가 불명확한 점이 있어서 좀더 알아보고 보완해봐야 할 거 같다.
이번 api를 주고 받는 과정에 대하여 이해도가 높아지다면 큰 성장을 이룰 것 같다. (내피셜)