[React Native] Android 실기기 연결 후 빌드하기
2023. 2. 14. 23:58
Front-end/App
실기기 설정에 개발자모드로 변경 후, 개발자옵션 -> USB 디버깅 ON 로 맞춘다. 기기 연결 후 # 연결된 디바이스 리스트 확인 adb devices # 연결된 기기 포트로 타겟팅 변경 adb reverse tcp:8081 tcp:8081 # 실행 npm run android 포트 변경하는 쉘 명령어를 맨날 까먹어서 기록한다..
임시 변수명을 작명할 때 뭘로 선언할까? - foo, bar
2023. 2. 12. 17:10
Basic/etc
개발을 하다 보면 로직 검사를 위한 테스트 코드 작성을 하거나 어떠한 값을 확인하는 등 여러가지 이유로 임시 변수를 선언해 본 경험이 있을 것이다. 임시 변수 자체도 나름의 의미가 있는 변수가 될 수도 있지만 의미가 없는 변수여서 마땅한 네이밍을 정하기 어렵게 만들기도 한다. 그래서 네이밍을 test, temp 등의 변수를 두는 경우가 많다. 이도 나쁘진 않다고 보지만, foo나 bar와 같은 만국 공통으로 의미가 통하는 네이밍을 쓰는 것이 좋다고 생각한다. (우리나라로 치자면 '이름 = 홍길동' 같은... 자세한 내용은 밑에 나무위키 참고) https://namu.wiki/w/foo foo - 나무위키 프로그래밍 상에서 임시로 변수이름을 지정해줘야 할 때 주로 쓰이는 변수 이름이다. foo 외에 bar..
[React Native] 응용 프로그램이 예기치 않게 종료되었습니다. (Library not loaded: @rpath/hermes.framework/hermes)
2022. 11. 13. 12:22
Front-end/App
내 개인 맥북(19년 intel pro)으로 RN을 돌렸던 프로젝트 버전이 0.67이었고, 최근에 프로젝트가 생겨 0.70에 맞게 공식문서와 내 환경설정에 비교한 뒤 구동을 해보았다. 위 사진과 같이 되는 듯 싶었으나... 이런 식으로 네이티브 단에서 크러쉬 리포트를 뿜어내며 앱이 튕긴다. Termination Reason를 보면 어떤 사유로 일어났는지 잘 보여준다. 나같은 경우는 hermes 관련 에러가 일어났는데, Podfile을 보면... 관련 설정이 되어있고, 주석으로 설명되어있다. true를 false로 바꿔주고 다시 pod install 후 빌드하면 잘 된다! 추가로 크러쉬 리포트는 네이티브단 설정이 충돌이 나면서 발생하므로, 네이티브 설정을 중점적으로 확인하자. Xcode을 변경하였을 경우에..
[React Native] TextInput 패스워드 폼 적용하기
2022. 11. 7. 20:48
Front-end/App
웹에는 input type="password" 으로 타입에 있는 목록에 찾으면 됩니다. 그러나 RN은 type을 제공하지 않아 당황하여 찾고 있지만 공식문서 읽는 것이 힘들거나 구글링을 하고 있는 코더들과 맨날 까먹는 스스로를 위해 기록합니다. secureTextEntry를 집어넣으면 됩니다.. boolean값이라 그냥 넣으면 true로 적용이 됩니다. https://reactnative.dev/docs/textinput#securetextentry TextInput · React Native A foundational component for inputting text into the app via a keyboard. Props provide configurability for several feat..
nvm을 이용하여 node버전 변경하기
2022. 10. 31. 21:09
Basic/etc
brew가 깔려있다는 전제 하에 설명합니다. 1. nvm 설치 brew install nvm 2. 환경 변수 등록하여 터미널에 인식하기 1) zsh 터미널인 경우 vim ~/.zshenv 혹은 vim ~/.zprofile 2) bash 터미널인 경우 vim ~/.bash_profile 3. 아래 내용 추가하여 환경 변수 적용 export NVM_DIR="$HOME/.nvm" [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh" # This loads nvm [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_..
react-native-config로 .env 환경변수 설정하기
2022. 10. 26. 19:50
Front-end/App
환경변수를 관리하기 위해 .env를 적용할 수 있게 하는 라이브러리입니다. React와는 다르게 .env를 생성하고 네이티브단과 연동하는 작업이 필요합니다. 그 연동하는 것을 도와주는 라이브러리라고 생각하면 됩니다. 라이브러리 설치 yarn add react-native-config npx pod-install ios iOS // AppDelegate.mm 에서 해당 구문 추가 #import Android // setting.gradle 에서 해당 구문 추가 include ':react-native-config' project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-..
JSDoc 을 이용하여 JavaScript 파일 문서화하기
2022. 10. 23. 21:41
Basic/JavaScript
JSDoc이란? JSDOC은 Javascript 소스코드 파일에 주석 용도의 마크업 언어입니다. 주석이기 때문에 코드에 영향을 주지 않습니다. 빨간 박스 안에 있는 부분이 JSDoc입니다. // 스크린샷 기준으로 맨 윗 줄인 해당 문구를 통해 props의 자료형이 object임을 알려주고 있습니다. @param {object} props // 해당 구문을 통해서는 props.align에 어떤 속성들이 있는지 알려주고 있습니다. @param {'right' | 'center' | 'left' } props.align 아래 첨부사진과 같이 JSDoc에 param들에 커서를 두면 프로퍼티 목록을 제공합니다. 저는 타입과 프로퍼티를 가이드하옂 가독성을 높여 유지보수를 수월하게 하는 도구로 사용하고 있습니다. 공..
[React Native] React Native 버전 변경하는 법(Upgrade or Degrade)
2022. 8. 5. 13:50
Front-end/App
RN은 어쩔 수 없이 오픈 소스 라이브러리에 의존이 심하다보니 버전 충돌 이슈를 자주 겪는다. 지양하는 편이 좋지만 기존 프로젝트의 RN 버전 자체를 변경하고 싶은 경우엔 어떻게 할까? React Native Upgrade Helper라는 웹 툴을 이용하자 https://react-native-community.github.io/upgrade-helper/ Upgrade React Native applications react-native-community.github.io 업그레이드 하기 위해서는 좌측에는 현재 버전, 우측에는 바뀔 버전을 선택하고 파란색 버튼을 클릭한다. 그러면 아래 깃 포맷으로 바꿔야하는 부분들을 파일별로 정리를 해준다. 그대로 바꿔주면 되는데, 당연히 버전 차이가 많이 날수록 바꿔..
[React Native] Invariant Violation: "projectname" has not been registered. This can happen if:* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.* A module failed to load..
2022. 8. 4. 17:33
Front-end/App
잘만 되던 프로젝트를 다시 Android로 실행하면 다음과 같이 에러가 뜰 때가 있다. 코드는 건든게 없고.. 프로젝트를 삭제하고 ./gradlew clean으로 캐쉬를 비워주어도 해결이 되지 않았다. 연유는 모르겠으나 RN 프로젝트 가끔 뻑이 나는 경우 사용하는 4가지 방법 중 하나인 맥을 리부팅 해보았더니 정상적으로 해결이 되었다.. (4가지 방법 = npm reinstall, 네이티브단 캐쉬 삭제, 프로젝트 삭제 후 재설치, PC 리부팅) Invariant Violation: "projectname" has not been registered. This can happen if:* Metro (the local dev server) is run from the wrong folder. Check i..