최고의 개발자 (목표)

const class 인 상태에서 non const class로 바뀌면 hot reload가 되지 않는다.

앱을 껐다가 다시 실행하면 된다.

Dart 패키지의 이름은 소문자와 _ (언더바)만 가능하다. 

소문자와 언더바를 제외한 다른 문자는 들어가면 안된다.

* 에러

Network error
..
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:162:14 in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:413:41 in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:391:6 in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:133:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:368:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:4 in flushedQueue

* 환경

react native expo + Django

* 해결

- backend에 settings.py 변경

  expo start를 했을 때 연결되는 expo ip주소를 넣어주면 된다.

ALLOWED_HOSTS = ['자신의 ip주소'] 
# ex) ALLOWED_HOSTS = ['192.168.0.12']

- backend 실행 시 코드

  자신의 ip:port 로 변경

python manage.py runserver 192.168.0.12:8080

- frontend axios 부분 코드

 button의 onPress 함수가 onPressLogin

const onPressLogin = async () => {
    if (id == "" || pw == "") {
      alert("아이디와 비밀번호를 입력해 주세요");
    } else {
      const data = {
        username: id,
        password: pw,
      };
      console.log(data);

      try {
        const response = await axios
          .post(`http://192.168.0.12:8080/api/v1/token`, data)
          .then(function async(response) {
            if (response.data["success"] == true) {
              setIdNum(response.data["id"]);
              alert("로그인되었습니다.");
              navigation.navigate("Home");
              setId("");
              setPw("");
            }
          })
          .catch(function (error) {
            alert("로그인 오류입니다.");
            //console.log(error.response.data);
            console.log(error);
            throw error;
          });
      } catch (error) {
        console.log(error);
        throw error;
      }
    }
  };

※ stackoverflow 참고

https://stackoverflow.com/questions/62031415/unhandled-promise-rejection-typeerror-network-request-failed-expo-node-backend

 keyboardAvoidingView 를 사용하면 화면에 있는 TextInput을 키보드가 가리지 않도록 화면을 알아서 조정해준다.

그런데 화면 조정 때문에 오히려 만들어놓은 css를 해쳐서 keyboardAvoidingView가 작동되지 않게 하고 싶었다.

그런데 keyboardAvoidingView 를 적용하지 않아도 알아서 화면이 조정되었다. 알고보니 default가 keyboardAvoidingView 가 적용되는 것으로 바뀌었던 것이다.

expo의 app.json으로 가서 android 부분에 아래 코드를 넣으면 된다.

"softwareKeyboardLayoutMode": "pan"

즉, android 부분의 코드는 아래와 같다.

"android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "softwareKeyboardLayoutMode": "pan"
    },

기본적으로 softwareKeyboardLayoutMode : resize 가 기본 값이며, pan 으로 바꿀 수 있다.

※ expo 공식 문서의 app.json 부분

https://docs.expo.dev/versions/latest/config/app/#softwarekeyboardlayoutmode

드디어 32일 스트릭을 완성해서 새싹 5단계를 달성했다!!!!!!!!

랭킹도 실버 2에서 실버 1로 올랐다!!!

감을 잃지 않도록 꾸준히 알고리즘을 풀어야겠다.