React Native 모바일 앱 프로젝트 생성
React native App개발을 위한 환경 구축
환경
- Windows 11
- VSCode
- Docker
필요 프로그램
- node.js - React native 개발은 node.js 필요
- JDK - Android SDK build 도구
- Android Studio - Android App을 빌드하기 위해 필요
설치
- Node.js - LTS버전으로 설치 한다. https://nodejs.org/en/download
- Windows Installer 버전으로 다운로드 후 설치
- Terminal에서 "docker pull node:22-alpne" 을 입력
- shell 세션으로 다운받은 node.js를 실행하고 yarn을 설치
> docker run 0it --rm --entrypoint sh node:22-alpine
# node -v
# corepack enable yarn
# yarn -v
- React-Native CLI 설치
- yarn add react-native-cli
- JDK 설치
- ORACLE 싸이트에서 LTS 버전으로 다운로드 후 설치
- Android Studio 설치
- 안드로이드스튜디오 홈페이지의 다운로드 페이지에서 IDE다운로드 후 설치
React native로 모바일 앱 개발
남들 다한다는 앱 개발 해보자. 어떻게?
준비과정의 기록
기본개념
- flexbox
순서
참고
CSS 선택자
CSS에서 선택자(Selector)란 ?
- HTML요소를 선택하여 적용하여 스타일을 적용하는데 사용할 요소
선택자의 종류
기본 선택자 :
- 전체 선택자 ( * ) : 모든 HTML 요소
- 태그 선택자 ( p, div ) : 특정 태그 이름을 가진 요소
- ID 선택자 ( # ) : id 속성 값이 특정 문자열과 일치하는 요소 (ex. #name)
- 클래스 선택자 ( . ) : class 속성 값에 특정 문자열이 포함된 요소(ex. .name)
후손(하위) 선택자 ( ) : 특정 요소 안에 있는 다른 요소(ex. div p)
자식 선택자 ( > ) : 특정 요소의 직접적인 자식 요소(ex. div > p)
형제 선택자 ( + ) : 특정 요소 바로 다음에 오는 형제 요소(ex. h1 + p)
인접 형제 선택자 ( ~ ) : 특정 요소 뒤에 오는 모든 형제 요소(ex. h1 ~ p)
그룹 선택자 ( , ) : 모든 특정 요소(ex. h1, p)
속성 선택자 ( [ ] ) : 특정 속성을 가진 요소(ex. [type="button"])
가상 클래스 선택자 : 특정 상태에 있는 요소(ex. :hover)
가상 요소 선택자 : 특정 요소 앞에 가상의 요소(ex. :before)
VSCode에서 launch.json 혹은 task.json에서 활용할 수 있는 사전에 정의된 변수들
미리 정의된 변수
다음과 같은 미리 정의된 변수가 지원됩니다.
- ${userHome} - 사용자의 홈 폴더 경로
- ${workspaceFolder} - VS Code에서 열린 폴더의 경로
- ${workspaceFolderBasename} - 슬래시(/) 없이 VS Code에서 열린 폴더의 이름
- ${file} - 현재 열린 파일
- ${fileWorkspaceFolder} - 현재 열린 파일의 작업 공간 폴더
- ${relativeFile} - 현재 열린 파일에 상대적인 파일
workspaceFolder
- ${relativeFileDirname} - 현재 열려 있는 파일의 상대 디렉터리 이름
workspaceFolder
- ${fileBasename} - 현재 열린 파일의 기본 이름
- ${fileBasenameNoExtension} - 파일 확장자가 없는 현재 열린 파일의 기본 이름
- ${fileExtname} - 현재 열린 파일의 확장자
- ${fileDirname} - 현재 열린 파일의 폴더 경로
- ${fileDirnameBasename} - 현재 열린 파일의 폴더 이름
- ${cwd} - VS Code 시작 시 작업 실행기의 현재 작업 디렉터리
- ${lineNumber} - 활성 파일에서 현재 선택된 줄 번호
- ${selectedText} - 활성 파일에서 현재 선택된 텍스트
- ${execPath} - 실행 중인 VS Code 실행 파일의 경로
- ${defaultBuildTask} - 기본 빌드 작업의 이름
- ${pathSeparator} - 파일 경로에서 구성 요소를 구분하기 위해 운영 체제에서 사용하는 문자
미리 정의된 변수 예
다음과 같은 요구 사항이 있다고 가정합니다.
- VSCode에서 작업공간으로 Open한 디렉토리가
c:/home/your-project
이고, - 편집기에 열린 파일이
c:/home/your-project/folder/file.ext
일때,
따라서 각 변수에 대해 다음 값을 갖게 됩니다.
- ${userHome} -
c:/home/your-home
혹은, 설치된 디렉토러리 - ${workspaceFolder} -
c:/home/your-project
- ${workspaceFolderBasename} -
your-project
- ${file} -
c:/home/your-project/folder/file.ext
- ${fileWorkspaceFolder} -
c:/home/your-project
- ${relativeFile} -
folder/file.ext
- ${relativeFileDirname} -
folder
- ${fileBasename} -
file.ext
- ${fileBasenameNoExtension} -
file
- ${fileDirname} -
c:/home/your-project/folder
- ${fileExtname} -
.ext
- ${lineNumber} - 커서의 줄 번호
- ${selectedText} - 코드 편집기에서 선택된 텍스트
- ${execPath} - Code.exe의 위치
- ${pathSeparator} -
/
macOS 또는 Linux,\
Window
관련글
참고
[Error] Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.
React-native 로 페이지 이동하는 것을 연습하는데 계속해서 위 제목과 같은 오류가 발생한다.
Navigating Between Screens 페이지에서 아래와 같이 설치하라고 한 것을 안했다는 이유로 종속성에 문제가 생긴 것이다. react-vativr-screens와 react-native-area-context를 install 하고 나니 정상적으로 실행된다.
> npm install react-native-screens react-native-safe-area-context
관련글
React-native App 생성 오류
$> npx react-native init AwesomeTSProject --template react-native-template-typescript
$> npm uninstall react-native-cli
$> yarn global add @react-native-community/cli
$> npx react-native init AwesomeTSProject --templete react-native-typescript
React native App 개발 환경 구축
Windows환경에서 App 개발 환경 구축
iOS와 Android App을 같이 빌드하기 위해서는 Mac에서 환경을 구축해야 하겠지만 Mac이 없는 관계로 Windows환경에서 환경을 구축해 본다.
설치항목
- Chocolatey
- Node.js
- Python
- React Native CLI
- JDK
- Android Studio
- VisualStudio Code
설치
Chocolatiey 설치
Node.js 설치
Python 설치
다운로드 위치 : 파이썬 윈도우즈용 다운로드
React Native CLI 설치
Android Studio 설치
- 키보드에서 Win + Pause 버튼을 누른면 설정창이 나온다. 거기서 고급시스템 설정을 누른다.
- 시스템 속성에서 환경 변수(N).. 버튼 클릭
- 시스템변수에서 새로 만들기를 누르고 ANDROID_HOME 변수를 추가하고 위에서 설치한 디렉토리를 기재한다.
Node.js 설치하기
Node.js 설치
Chocolatey, Python, Visualstudio2019-workload-vctools 등이 추가적으로 설치된다.
Chocolatey
Chocolatey 는 Windows 소프트웨어의 모든 측면을 관리하기 위한 범용 패키징 형식을 사용하여 간단하고 반복 가능하며 자동화된 접근 방식을 통해 이를 단순화하여 소프트웨어 관리에 대한 일관되고 통합된 접근 방식을 제공한다.
설치
파워쉘을 관리자 모드로 실행시킨다.
커멘드 라인에 아래 명령어를 입력한다.
Set-ExecutionPolicy Bypass -Scope Process -Force; iwr https://community.chocolatey.org/install.ps1 -UseBasicParsing | iex
문제가 없으면 잠시뒤 아래와 같이 명령어가 수행되는 것을 볼 수 있다.
정상적으로 설치되면 > choco --version 을 입력하면 아래와 같이 해당 버전을 표출한다.
React native?
React Native ?
iOS 와 안드로이드 용 App을 하나의 코드로 개발?
참고
VisualStudio Code에서 esptool.py 사용하기
ESP32 개발시 FW를 한개의 파일로 만들기 위해 esptool.py를 사용하기 위해 해당 component를 설치해야 사용할 수 있다.
설치방법은 cmd를 실행하고 esp idf가 설치된 디렉토리에서 components\esptool_py\esptool 로 이동하여 아래와 같이 설치한다.
수행하면 이후 VSCode상에서도 esptool.py를 사용할 수 있다.
관련문서
Python - Type Error
Python에서 아래와 같은 오류가 발생할 경우
A Bytes-Like Object Is Required, Not ‘Str'
bytes-likes 오브젝트가 필요하니 str 타입 말고 bytes 타입의 변수를 넣으라는 의미로 라이브러리등을 사용하다 보면 주로 발생하고 string type 과 bytes 타입은 아래와 같은 상관 관계가 있다.
str –> 디코딩 –> bytes
bytes –> 인코딩 –> str
참고
Python - VS Code에서 Qt Designer로 GUI 개발
- Dialog with Buttons Bottom - Dialog 타입, OK, Cancel 버튼이 하단 오른쪽에 위치
- Dialog with Buttons Right - Dialog 타입, OK, Cancel 버튼이 오른쪽 상단에 위치
- Dialog without Buttons - Dialog 타입, 버튼 없음
- Main Window - Main window 타입, 상단에 메뉴바, 하단에 상태바
- Widget - Widget 타입
참고
VS Code에서 Python 과 Qt5 사용하기
설치환경
- OS : Windows 10
- Python version : 3.7.9
설치순서
- CMD 실행
- 프롬프트상에 pip install qt5-tools 입력
- 설치된 PyQt의 버전을 확인 pip show pyqt5 입력
- vscode를 실행
- Extentions(Ctrl+Shift+X)에서 PyQt integration을 찾아 install
- vscode에서 새로운 파일(test.py)을 만들고 아래 코드를 넣는다.import sysfrom PyQt5.QtWidgets import QApplication, QWidgetclass MyApp(QWidget):def __init__(self):super().__init__()self.initUI()def initUI(self):self.setWindowTitle('My First Application')self.move(300, 300)self.resize(400, 200)self.show()if __name__ == '__main__':app = QApplication(sys.argv)ex = MyApp()sys.exit(app.exec_())
- 화면 오른쪽 상단의 삼각형 버튼을 눌러 코드를 실행한다.
- 화면 상에 창이 만들어졌는지 확인한다.
참고자료
ROBOT ARM 만들기
6축 로봇팔
- THOR : 6축 ARM
- Roboteurs RBX1 Remix : 6축 ARM
- 3D Printable Robot Arm : 6축 ARM
- Zortrax Robotic Arm : 5축 ARM
- UFactory uArm : 4축 ARM
- EEZYbotARM MK2 : 4축 ARM
사전 준비 사항
- 3D 프린터 : 22x22 cm 이상 인쇄할 수 있는 프린터. 현재 보유하고 있는 델타 프린터로는 크기가 큰 부품들을 인쇄할 수 없어 새로운 Cartesian 타입(직교 타입)의 프린터를 만들었다.
Windows CMD 환경에서 PATH 설정 내용을 알고자 할때
PATH 는 CMD 창에서 실행파일이 있는 경로(디렉토리)를 지정한 환경 변수다.
어떤 경로가 설정되어 있는지 확인은 아래와 같이 echo명령과 같이 사용한다.
c:\ > echo %path%
PATH에 내가 원하는 디렉토리를 추가하고자 할 때는 set명령과 같이 사용한다.
경로의 구분은 콜론(:)으로 구분한다. 기존 path에 d:\test 디렉토리를 추가
C:\ > set path=%path%:d:\test
G-Code
Specific codes
3D 프린터에서 사용되는 G-코드는 RepRap 펌웨어 기준으로 문자 G로 시작하는 CNC프로그램에서 사용하는 것과 유사하다. 일반적으로 아래와 같은 작업 유형에 사용.
- 빠른 이동
- 직선 또는 호의 제어된 이송
- 오프셋 등의 공구 정보 설정
- 좌표계 전환
문자 코드
A부터 Z까지 밀링이나 선반에서 사용되는 기능들이 정의 되어 있으나 아래에서는 3D프린터에서 주로 사용되는 코드들만 정리
문자 | 설 명 | 추가 정보 |
---|---|---|
F | 움직임 비율(feed rate) | |
G | 준비 명령을 위한 코드 | G 명령은 원하는 동작의 종류(예: 빠른 위치 지정, 선형 피드, 원형 피드, 고정 주기) 또는 사용할 오프셋 값을 제어 장치에 알려주는 경우가 많다. |
M | 기타 기능 | 동작코드, 보조 명령 등 |
N | 프로그램의 라인 번호 | |
X | X축의 기준으로 한 절대 위치 혹은 증가된 위치 값 | |
Y | Y축의 기준으로 한 절대 위치 혹은 증가된 위치 값 | |
Z | Z축의 기준으로 한 절대 위치 혹은 증가된 위치 값 |
G-Code
Xnnn : X축으로 nnn만큼 위치 이동
Ynnn : Y축으로 nnn만큼 위치 이동
Znnn : Z축으로 nnn만큼 위치 이동
Ennn : 시작점과 끝점 사이에 nnn만큼 사출
Fnnn : 시작점과 끝점 사이의 분당 움직임 비율 (feedrate per minute)
Hnnn (RepRapFirmware) Flag to check if an endstop was hit (H1 to check, H0 to ignore, other Hnnn see note, default is H0)1
Rnnn (RepRapFirmware) Restore point number 4
Snnn Laser cutter/engraver power. In RepRapFirmware, when not in laser mode S in interpreted the same as H.
Code | 설명 | 결과 정보 |
---|---|---|
G00 | Rapid Move | Usage G0 Xnnn Ynnn Znnn Ennn Fnnn Snnn Parameters Not all parameters need to be used, but at least one has to be used Examples G0 X12 ; move to 12mm on the X axis |
G01 | Linear Move | |
G02 | Controlled Arc Move, 시계 방향 | Usage G2 Xnnn Ynnn Znnn Ennn Fnnn Snnn |
G03 | Controlled Arc Move, 시계 반대 방향 | |
G04 | 살다 | 드웰 기간에 대한 주소를 사용합니다( X , U 또는 P 일 수 있음 ). 드웰 기간은 일반적으로 밀리초로 설정되는 제어 매개변수로 지정됩니다 . 일부 기계는 X1.0( s ) 또는 P1000( ms )을 허용할 수 있으며 , 이는 동등합니다.드웰 지속 시간 선택 : 종종 드웰은 한 번 또는 두 번의 전체 스핀들 회전만 지속하면 됩니다. 이는 일반적으로 1초 미만입니다. 긴 드웰은 사이클 시간의 낭비라는 지속 시간 값을 선택할 때 주의하십시오. 어떤 상황에서는 중요하지 않지만 대량 반복 생산(수천 사이클 이상)의 경우100ms만 필요하고 안전하기 위해 200이라고 부를 수 있지만 1000은 그냥 낭비(너무 길다). |
G05 P10000 | 고정밀 윤곽 제어(HPCC) | 윤곽 밀링 중에 더 나은 축 이동 가속 및 감속을 제공하기 위해 심층 예측 버퍼 및 시뮬레이션 처리를 사용합니다. |
G05.1 Q1. | AI 고급 미리보기 제어 | 윤곽 밀링 중에 더 나은 축 이동 가속 및 감속을 제공하기 위해 심층 예측 버퍼 및 시뮬레이션 처리를 사용합니다. |
G06.1 | NURBS( Non-Uniform Rational B-Spline ) 가공 | 복잡한 곡선 및 파형 가공을 위해 Non-Uniform Rational B Spline 활성화(이 코드는 Mazatrol 640M ISO 프로그래밍에서 확인됨) |
G07 | 허수축 지정 | |
G09 | 정확한 정지 확인, 넌모달 | 모달 버전은 G61 |
G10 | 프로그래밍 가능한 데이터 입력 | 작업 좌표 및 도구 오프셋 값 수정 |
G11 | 데이터 쓰기 취소 | |
G17 | XY 평면 선택 | |
G18 | ZX 평면 선택 | |
G19 | YZ 평면 선택 | |
G20 | 인치로 프로그래밍 | 미국과 캐나다 및 영국을 제외하고 다소 드문 경우입니다. 그러나 글로벌 시장에서 G20과 G21 모두에 대한 역량은 언제든지 필요할 가능성이 있습니다. G20의 일반적인 최소 증분은 1/10,0001인치(0.0001")이며, 이는 G21의 일반적인 최소 증분(1/1000밀리미터, .001mm, 즉, 1 마이크로미터 ) 보다 더 큰 거리 입니다. 물리적 차이는 때때로 G21 프로그래밍을 선호합니다. |
G21 | 밀리미터 (mm) 단위 프로그래밍 | 전 세계적으로 널리 퍼져 있습니다. 그러나 글로벌 시장에서 G20과 G21 모두에 대한 역량은 언제든지 필요할 가능성이 있습니다. |
G28 | 원점 복귀(기계 제로, 기계 기준점이라고도 함) | 공구 팁이 기계 0으로 돌아가는 도중 통과할 중간 지점을 정의하는 XYZ 주소를 사용합니다. 기계 제로가 아니라 부품 제로(프로그램 제로라고도 함)와 관련이 있다. |
G30 | 2차 원점 복귀(기계 제로, 기계 기준점이라고도 함) | 은 P 어드레스 지정 얻어 기계 원점 사용하는 경우, 시스템이 여러 보조 점 (P1 내지 P4)을 가진다. 도구 설명이 기계 0으로 돌아가는 길에 통과하는 중간 지점을 정의하는 XYZ 주소를 사용. 이는 기계 제로가 아닌 부품 제로(프로그램 제로라고도 함)로 표현. |
G31 | 건너뛸 때까지 피드 기능 | 프로브 및 도구 길이 측정 시스템에 사용됩니다. |
G32 | 단일 포인트 스레딩, 긴 손 스타일(싸이클을 사용하지 않는 경우, 예: G76 ) | 단일 포인트 스레딩을 위한 자동 스핀들 동기화를 제외하고 G01 선형 보간과 유사. |
G33 | 일정한 피치 스레딩 | |
G33 | 단일 포인트 스레딩, 긴 손 스타일(싸이클을 사용하지 않는 경우, 예: G76 ) | 일부 선반 컨트롤은 이 모드를 G32가 아닌 G33에 할당. |
G34 | 가변 피치 스레딩 | |
G40 | 공구 반경 보정 꺼짐 | 커터 반경 보정(CRC)을 끈다 . G41 또는 G42를 취소. |
G41 | 공구 반경 보정 왼쪽 | |
G42 | 공구 반경 보정 오른쪽 | |
G43 | 도구 높이 오프셋 보정 네거티브 | 공구 길이 오프셋 레지스터 값을 호출하기 위해 주소(일반적으로 H)를 사용. 게이지 라인 위치에 추가 되기 때문에 값은 음수 다. G43은 일반적으로 사용되는 버전(대 G44). |
G44 | 공구 높이 오프셋 보정 포지티브 | 공구 길이 오프셋 레지스터 값을 호출하기 위해 주소(일반적으로 H)를 사용. 게이지 라인 위치에서 빼기 때문에 값은 양수 다. G44는 거의 사용되지 않는 버전이다(G43 대비). |
G45 | 축 오프셋 단일 증가 | |
G46 | 축 오프셋 단일 감소 | |
G47 | 축 오프셋 두 배 증가 | |
G48 | 축 오프셋 이중 감소 | |
G49 | 공구 길이 오프셋 보정 취소 | G43 또는 G44를 취소 . |
G50 | 최대 스핀들 속도 정의 | |
G50 | 스케일링 기능 취소 | |
G50 | 위치 레지스터(부품 0에서 툴팁까지 벡터 프로그래밍) | |
G52 | 로컬 좌표계(LCS) | |
G53 | 기계 좌표계 | 프로그램 제로가 아닌 기계 제로를 기준으로 절대 좌표(X,Y,Z,A,B,C)를 취한다. 도구 변경에 도움이 될 수 있다. 비모달 및 절대 전용. 후속 블록은 명시적으로 프로그래밍되지 않은 경우에도 " G54로 돌아가기"로 해석. |
G54 ~ G59 | 작업 좌표계(WCS) | 축 오프셋의 각 튜플은 프로그램 제로를 기계 제로에 직접 연결한다. 표준은 6개 튜플(G54 ~ G59)이며 선택적으로 G54.1 P1 ~ P48을 통해 48개 튜플을 추가로 확장할 수 있다. |
G54.1 P1 ~ P48 | 확장된 작업 좌표계 | G54 ~ G59에서 표준으로 제공되는 6개 외에 최대 48개의 추가 WCS. G 코드 데이터 유형(이전의 모든 정수)의 부동 소수점 확장에 유의. |
G61 | 정확한 정지 확인, 모달 | G64 로 취소할 수 있다 . 논모달 버전은 G09 이다. |
G62 | 자동 코너 오버라이드 | |
G64 | 기본 절단 모드(정확한 정지 확인 모드 취소) | G61을 취소. |
G68 | 좌표계 회전 | |
G69 | 좌표계 회전 끄기 | G68을 취소 . |
G90 | 절대 프로그래밍 | 부품 0을 기준으로 정의된 위치 지정. 밀링: 항상 위와 같다. 터닝: 때때로 위와 같이(Fanuc 그룹 유형 B 및 유사 설계), 대부분의 선반(Fanuc 그룹 유형 A 및 유사 설계)에서 G90/G91은 절대/증분 모드에 사용되지 않는다. 대신 U 와 W 는 증분 주소이고 X 와 Z 는 절대 주소입니다. 이러한 선반에서 G90은 황삭을 위한 고정 사이클 주소다. |
G90 | 고정 싸이클, 단순 싸이클, 황삭용(Z축 강조) | 절대 프로그래밍을 제공하지 않는 경우(위) |
G90.1 | 절대 아크 프로그래밍 | I, J, K 포지셔닝은 부품 0을 참조하여 정의. |
G91 | 증분 프로그래밍 | 이전 위치를 참조하여 정의된 위치 지정. 밀링: 항상 위와 같다. 터닝: 때때로 위와 같이(Fanuc 그룹 유형 B 및 유사 설계), 대부분의 선반(Fanuc 그룹 유형 A 및 유사 설계)에서 G90/G91은 절대/증분 모드에 사용되지 않는다. 대신 U 와 W 는 증분 주소이고 X 와 Z 는 절대 주소다. |
G91.1 | 증분 아크 프로그래밍 | I, J, K 위치는 이전 위치를 참조하여 정의. |
G92 | 위치 레지스터(부품 0에서 툴팁까지 벡터 프로그래밍) | G50 위치 레지스터 에서와 동일한 결과 정보. 밀링: 항상 위와 같다. 터닝: 가끔 위와 같이(Fanuc 그룹 유형 B 및 유사 설계), 그러나 대부분의 선반(Fanuc 그룹 유형 A 및 유사 설계)에서 위치 레지스터는 G50 . |
G92 | 스레딩 사이클, 단순 사이클 | |
G94 | 분당 이송 속도 | 그룹 유형 A 선반에서 분당 이송 속도는 G98 . |
G94 | 고정 주기, 단순 주기, 황삭용( X 축 강조) | 분당 이송 속도를 제공하지 않을 때(위) |
G95 | 회전당 이송 속도 | 그룹 유형 A 선반에서 회전당 이송 속도는 G99 입니다. |
G96 | 일정한 표면 속도(CSS) | 일정한 표면 속도를 얻기 위해 스핀들 속도를 자동으로 변경합니다. 속도 및 피드를 참조 . G20 모드 에서는 sfm 으로 , G21 모드 에서는 m/min으로 해석되는 S 주소 정수를 취 한다. |
G97 | 일정한 스핀들 속도 | rev/min(rpm)으로 해석되는 S 주소 정수를 사용한다. 모드가 프로그래밍되지 않은 경우 시스템 매개변수당 기본 속도 모드다. |
G98 | 고정 사이클에서 초기 Z 레벨로 복귀 | |
G98 | 분당 이송 속도(그룹 유형 A) | 분당 이송 속도는 그룹 유형 B에서 G94 . |
G99 | 고정 사이클에서 R 레벨 로 복귀 | |
G99 | 회전당 이송 속도(그룹 유형 A) | 회전당 이송 속도는 그룹 유형 B에서 G95 . |
G100 | 공구 길이 측정 |
M-Code
참조