M Project 개발일지(6)

🍎 2021.03.18-03.19 🍎

드디어 백엔드(Django)와 프론트엔드(React-native) 연결 성공했다 🎉
SignUpScreen 이랑 SignInScreen 가지고 한달을 끙끙댔다니

내 TODO리스트에 드디어 [회원가입/로그인 서버 연결] 체크박스가 사라졌다!

axios vs fetch

• 처음엔 fetch를 사용했다가 axios로 바꿈
• 지금은 어플리케이션 용으로 개발하지만 나중에 웹 모바일 버전을 생각해서도 그렇고 전반적으로 fetch는 쓰지 않는 게 좋다고 조언을 들었다.
• 처음에 감도 잡히지 않고 뭔가 비슷하게 짰는데 아무 response도 돌아오지 않거나 error 나거나 둘 중에 하나여서 매우 속상.

하지만 이제 어떻게 하는지 완전 감 잡았다

react-native 회원가입 : axios (POST)

const handleSubmit = () => {
        axios.post(url, info, {
            headers: {'Accept' : 'application/json',
            'Content-type' : 'application/json'}
        }).then((res) => {
            console.log(res.data);
          }).then(()=>{
              navigation.goBack()
            }).catch((err) => {
            console.log("ERROR", err.res);
          })
    }

• info의 경우 위에 useState를 이용해서 회원가입에 필요한 데이터들을 설정해 두었다. (username, password, check_inputChange, secureTextEntry 등)
• axios.post 성공 시 돌아오는 response를 살펴보면 data에 내가 보낸 유저 정보들이 들어가 있었다.
• 그리고 회원가입 성공 시 다시 로그인화면으로 돌아가도록!

회원가입 시 onChange vs onChangeText

• 이게 잘못 사용되어서 target에 아무 값도 들어가지 않고 null 만 무한정 뜨는 상황이 생겼던 것. - 피드백 받기 전에는 뭐가 문제인지도 몰랐다..
• https://stackoverrun.com/ko/q/12203533
  • onChange > RN에서는 e.nativeEvent 사용 ⭐️
  • onChangeText > e.target.value 없이도 값 변경 가능
• onChange를 사용하고 내부 실행 함수 작성 시 e.nativeEvent를 사용해 console.log 를 찍어보았더니 내가 얻고자 하는 사용자 입력 정보는 e.nativeEvent.text 로 얻을 수 있음을 파악할 수 있었다.

const handlePasswordChange = e => {
        setInfo({
            ...info,
            password: e.nativeEvent.text
        });
    }

(이런 식으로....!)

Todo List ✅

• 로그인 (axios.put) 구현 (해결완료!)
• 로그인 성공 시 메인페이지로 넘어가는 것 구현
• 메인페이지 구조 다듬기

드디어 로그인/회원가입에서 벗어나 메인페이지로 들어간다는 게 믿기지 않는다
💞 너 무 행 복 해 흑 흑 💞