1. 다시 돌아온 배경 해명(?)
기존에 안드로이드 스튜디오를 깔다가 무한 오류가 발생하여 잠깐 멈추고, TypeScript로 잠시 넘어갔었다. 그런데 운명의 장난인지 뭔지는 모르겠지만, 창업팀 내부적으로 우선 개발을 시작하기로 하여서 갑자기 앱 개발의 우선순위가 올라가게 되었다. 또한, 시간을 두고 멀리서 보니 무한 오류의 해결책이 어느 정도 생각이 나서(+해결할 용기와 오기가 생겨서) 다시 앱 만드는 강의를 들으면서 앱을 만들기로 결정했다.
그런데 여전히 문제가 있었으니 바로 '환경설정'이었다.
필자는 포맷하는 방법을 잘 몰라서 전체적으로 밀고 새로 까는 옵션은 고려하지 않았다. 기존의 환경을 최대한 살리면서 오류를 해결하고 싶었던 것도 한몫 했다. 그래서 엄청난 시행착오를 겪은 결과, 다음과 같은 방법으로 해결했다.
1) 환경설정 오류 해결한 프로세스
1. 기존 설치 파일 모두 삭제(Android studio, project 파일, SDK 파일 등)
2. 강사님의 Git에서 필요한부분 복제(기존에는 powershell 명령어로 설치했었다.)
3. 새로운 폴더에 맞게 환경변수와 폴더 재설정
4. Node.js 버전 다운그레이드
5. Android studio 다시 세팅
6. npx react-native run-android로 실행
nvm까지 받아서 node.js의 버전까지 다운그레이드했다.
2) Node.js 버전 다운그레이드하기
0. nvm-setup.exe 파일로 nvm 설치
1. nvm list available : 버전 검색
2. nvm install [버전] : 해당 버전 설치
3. nvm list : 현재 설치된 버전들 확인
4. nvm use [버전] : 사용하고 싶은 버전 지명
이렇게 하면 버전을 안정적인 버전으로 낮춰서 오류를 해결할 수 있다.
npx react-native run-android로 실행하면 BUILD SUCCESSFUL이 드디어!! 뜬다!
드디어 개발할 수 있는 환경이 세팅되었다. (눈물)
2. 본격적으로 개발 시작하기!
View = div
Text = span
라고 생각하면 되지만 100% 정확하게 일치하는 것은 아니다.
<div>Hello world!</div>
<View>Hello wrold!</View>로 하면 안 된다.
text는 항상 text로 감싸줘야 한다.
<View><Text>Hello world!</Text></View>
이런 사소한 차이점들이 있기 때문에 100% 일치한다고 생각하면 안 된다.
하나의 파일에 여러 개의 Component가 들어가는 것은 좋은 코딩 방식이 아니다.
다른 파일로 분리하는 것이 좋다.
Displayname은 바꿀 수 있지만, 그냥 Name은 바꾸기가 정말 어렵다.
1) Dev Menu
메트로에서 d를 누르면 dev 메뉴가 나온다.
거기에서 Debug를 누르면 localhost:8081이 뜨면서 아래와 같은 페이지가 나온다.
F12를 눌러서 보면 간단한 디버깅을 할 수 있도록 만들어놨다.
하지만, 기능상 한계가 많아서 Flipper를 사용한다.
Flipper 때문에 에러가 많이 난다고 해서 깔까 말까 고민했지만 어차피 맞을 매라면 미리 맞는 게 좋다고 생각해서 설치하기로 했다.
2) Flipper
플리퍼는 여기서 받으면 된다.
Extensible mobile app debugger | Flipper
Tools Mobile development Flipper aims to be your number one companion for mobile app development on iOS and Android. Therefore, we provide a bunch of useful tools including a log viewer, interactive layout inspector, and network inspector. Learn more Plugi
fbflipper.com
여기까지 하고 나니까 생각났다.
여기서 동작하지 않고 멈춰서 플리퍼는 켜보지도 못했었던 기억이 났다.
순간 고민하다가 간단하게만 해결해 보기로 결정했다.
시간 잡아먹으면 바로 GG 예정
조금 검색을 해보니, 최신 버전 말고 이전 버전을 다운로드하면 된다고 한다.
https://github.com/facebook/flipper/releases/download/v0.190.0/Flipper-win.zip
다운로드한 후 압축을 푸니까 실행이 되긴 했다.
하지만 벌써 뭔가 에러가 생겨서 느낌이 싸하긴 하다.
뭔가 쓰고 싶지 않아 지는 욕구가 폭발한다.
OpenSSL을 설치해야 한다고 해서 홈페이지에 들어가 봤다.
<설치를 원하는 분은 아래 내용을 무시하고 쭉 내려가서 "choco install openssl" 부분을 보면 좋다.>
바로 창을 닫아버리고 싶은 디자인이다.
https://slproweb.com/products/Win32OpenSSL.html
Win32/Win64 OpenSSL Installer for Windows - Shining Light Productions
Minimum system requirements: Windows XP or later 32MB RAM 200MHz CPU 30MB hard drive space Recommended system requirements: Windows XP or later 128MB RAM 500MHz CPU 300MB hard drive space November 30, 2023 - OpenSSL 3.2 is available. Users should currently
slproweb.com
찾다 보니 여기서 설치하면 된다고 한다.
정말 최악의 디자인을 넘어서 설치를 하긴 했는데
욕만 잔뜩 했는데 돈까지 내라고...?
어림없다.
체크를 풀고 Finish
환경 변수 path에 추가한다.
<환경변수 설정하는 방법>
https://coder-chobo.tistory.com/39
0038. 실전 FE 개발 배우기1 - 리액트, 윈도우-안드로이드 환경 설정하기(Feat. 안드로이드 스튜디오
이번에 필자가 듣는 강의는 이거다. 인프런의 배달앱 클론코딩 [with React Native]이다. 섹션 0. 강의 소개 1강. 리액트 네이티브 시작하기 React Native Learn once, Write anywhere : 한번 배워서 여러 군데 써먹
coder-chobo.tistory.com
환경변수 설정까지 하니까 에러가 사라졌다!
하지만 업데이트를 하라고 한다.
업데이트하면 무한로딩에 빠질 텐데.. 난관이다.
왼쪽하단을 눌러 업데이트버전을 다운로드하고 실행하니까 되긴 됐다!
Watchman은 iOS라서 그냥 깔지 않기로 한다.
이외에도 뭔가 계속 뜨긴 한다.
이 정도는 그냥 무시해 보기로 한다.
choco install openssl
훨씬 더 쉽게 설치하는 방법이 있었다.
choco가 있다는 가정 하에 관리자 권한으로 powershell에 위의 명령어를 치면 된다.
필자는 굳이 어려운 길을 간 것이다.
젠장
설치가 되면 파워쉘이 openssl을 치면 아래의 내용이 나온다.
만일, 내용이 나오지 않으면 파워쉘을 껐다 켠 다음에 시도해 보자.
이... 이런
재부팅을 하고 나니 에러가 발생하고 있었다.
socket 얘기가 나오는 거 보니까 flipper 관련된 에러 같다.
역시 건들지 말았어야 했나..
뭔가 연결이 된 거 같긴 하다.
최신 버전으로 깔면 문제가 해결된다고 했는데 최신 버전도 계속 socket 문제가 발생했다.
그런데 생각지도 못하게 문제가 해결됐다.
껐다 켜니까 되네..
notice가 계속 뜨긴 하는데, 그래도 안드로이드 스튜디오가 정상적으로 실행됐다.
하지만 아래와 같은 오류가 발생했다.
Plugin 'React DevTools' is unavailable
Device plugin 'React DevTools' is not supported by the selected device 'sdk_gphone_x86' (Android).
진짜 때려치우고 싶은 생각이 굴뚝같았다.
more > add plugin > react-devtools를 install 한다.
Enable Plugin을 하면 왼쪽에 플러그인이 추가된다!
그리고 Layout에 들어가서 마우스를 갖다 대면 해당 화면이 보라색으로 표시되면서 무엇이 걸리는지를 알려준다.
진짜 눈물 날 것 같다.
UI 복잡해지고 에러가 많아질 때 CSS 조절하거나 에러를 잡을 수 있다.
복잡해질수록 결국 Flipper로 가게 된다고 한다.
flipper-plugin-async-storage-advanced
flipper-plugin-redux-debugger이 두 개의 플러그인은 추천
그리고 아래의 명령어 실행
npm i react-native-flipper redux-flipper rn-flipper-async-storage-advanced @react-native-async-storage/async-storage
필연적인 에러 발생
챗GPT에게 달려갔다.
npm i react-native-flipper redux-flipper rn-flipper-async-storage-advanced @react-native-async-storage/async-storage --legacy-peer-deps필자는 종속성을 무시하고 설치하는 길을 택했다.
여러 옵션이 있었지만, flipper 때문에 패키지 버전을 조정할 수는 없다고 판단했기 때문에 그냥 설치를 해버렸다.
해석 : 정상적으로 설치되었지만 어디서 언제 에러가 튀어나올지 모름
해석 2 : 난 몰루~
강의를 듣다 보니 강사분도 force를 붙여서 설치하라고 권장하셨다.
원래는 권장하지 않지만, 에러가 많이 난다고 한다 ^_^
아무튼 설치가 완료되었으니 이제 플리퍼를 쓸 수 있을 것 같다.
포기하지 않은 나 자신이 대단하다!
