Client/ReactJS & React-Native 6

android) test용 apk 만들기.

구글스토어 등록 전, 테스트용 apk를 만들어보자. 프로젝트 터미널에서 다음과 같이 입력한다. react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle 만약 index.js가 시작위치가 아니면, --entry-file index.js를 본인에 맞게 수정해야한다. info Writing bundle output to:, android/app/src/main/assets/index.android.bundle info Done writing bundle output info Copying 115 asset files inf..

ios) mac M1에서 npm run ios 실패시 build 에러

https://reactnative.dev/docs/environment-setup 먼저 공식문서에 따라 mac os - ios 기본적인 설치를 마친다. npm run ios ios 시뮬레이터는 작동하나 앱 빌드가 실패한다. Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. ... ** BUILD FAILED ** 뭐 어쩌라는건지.... 2021 맥북프로 M1칩을 사용하다보니 제약이 많은 것 같아 이런 방법을 시도해봤다. 결과는 성공!! 프로젝트 내 ios 폴더로 진입. sudo arch -x86_64 gem install ffi Intel 기반 설치를 진행해야한다. 설치과 완료되면 다시 아래..

adb) 안드로이드 에뮬레이터 [TypeError: Network request failed].

RN에서 백엔드로 fetch 또는 axios로 데이터를 요청할 때 에러가 발생한다. 1. fetch의 URL을 localhost가 아닌 ip로 입력해준다. fetch('http://127.0.0.1:4000', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json', }, redirect: 'follow', }) 2. android/app/src/main/AndroidManifest.xml 에 코드를 추가한다 android:usesCleartextTraffic="true" 3. adb 안드로이드 에뮬레이터에 백엔드 서버포트를 매핑해준다. 에뮬레이터가 실행된 상태에서 터미널에 아래와 같이 입력한다...

React에서 formData로 텍스트와 이미지 전송하기

백엔드에서만 파일전송을 구현한다면 multer와 enc-type만 지정하면 됐었다. 프론트를 React로, 백엔드를 NodeJS로 포트를 나눠 구현하다보니 파일 전송조차도 쉽지는 않았다. 백엔드 개발자가 프론트엔드를 공부하다보니, 리액트가 아니라 그냥 자바스크립트를 활용하는 경우가 많았다... 너무 부족하지만 프론트에 시간을 쏟는게 아까워 나중을 기약하고 넘어갔다. 어쨌든 오늘은 프론트에서 서버로 파일을 어떻게 넘기는지, 내가 구현했던 방법을 작성하겠다. return ( 사진 추가하기 {imgPreview === '' ? null : } 추가하기 ); 먼저 폼을 구현했다. const [toDo, setToDo] = useState(""); const [image, setImage] = useState()..

React)DB에서 가져온 정보 렌더링하기. useState 비동기화 문제.

리듀서를 사용해 DB에서 테이블 정보를 가져왔다. 해당 정보들을 useState 훅을 사용해 state에 저장했는데, 내 state는 비어있었다. 비동기 작업으로 이루어지는 setState라서 한박자 느리게 적용된다고 한다. useEffect 훅을 함께 사용해야한다고 하는데, 나는 멍청하게 setState를 디펜던시 인자로 사용하고 있었다. useEffect(()=>{ getAllMemo() },[]) useEffect(()=>{ getAllMemo() },[getAllMemo]) useEffect(()=>{ getAllMemo() },[setMemo]) useEffect를 공부하며 깨달은 사실. 1. 디펜던시 인자를 빈 배열로 설정하면, 처음 렌더링 될 때만 작동한다. 2. 디펜던시 인자를 작성하면 해..