npm install -g create-react-app
create-react-app flit
npm install -g yarn

2. git 연결

git remote add origin https://github.com/IILLLLII/flit.git
git push --set-upstream origin master

3. Chakra UI 설치

1. Chakra UI 설치

   yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. App을 ChackraProvider로 감싸주기

   import { ChakraProvider } from '@chakra-ui/react';
   

const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> </React.StrictMode> );

## 4. client 폴더 생성 및 package.json 생성

1. 프로젝트 폴더 내에 client 폴더를 생성하고 모든  파일을 이동시킨다.

2. package.json 파일을 생성하고 다음과 같이 입력한다.

``` json
{
    "name": "flit",
    "version": "1.0.0",
    "scripts": {
        "client": "cd client && yarn start",
        "server": "nodemon server.js",
        "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
    },
    "dependencies": {
        "body-parser": "^1.18.3",
        "express": "^4.18.2",
        "nodemon": "^2.0.21"
    },
    "devDependencies": {
        "concurrently": "^7.6.0"
    }
}

[22.03.17 추가] 다음과 같이 설치하는 방법도 괜찮을것 같다.

npm install nodemon body-parser express 

3. server 구동은 nodemon server.js로 실행한다. server.js 파일을 생성하자

   const express = require('express');
   const bodyParser = require('body-parser');
   const app = express();
   const port = process.env.port || 5000;
   

app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true }));

app.get('/api/hello', (req, res) => { res.send({message:'Hello Express!!'}) });

app.listen(port, () => console.log(Listening in port ${port}));

### 5. nodemon으로 서버 실행

npm install -g nodemon

// node server.js 확인 node server.js Listening in port 5000

// server 실행 방법 yarn server

// app & sever 구동 방법 yarn dev

cd [실행파일이 있는 경로]
windeployqt --qmldir [qml 경로] [실행파일]

binarycreator.exe -c config\config.xml -p packages setup.exe

npm install react-native-nmap --save

dependency 오류 발생시 -force로 강제설치

npm install react-native-nmap --save -force

ios에서 에러날 build error

** BUILD FAILED **


The following build commands failed:
    CompileC /Users/krystal/Library/Developer/Xcode/DerivedData/Flit_customer-hgxxxcoceyxgdsgyoxttyeccnfwe/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/react-native-nmap.build/Objects-normal/x86_64/RNNaverMapViewManager.o /Users/krystal/Flit_customer/node_modules/react-native-nmap/ios/reactNativeNMap/RNNaverMapViewManager.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler (in target 'react-native-nmap' from project 'Pods')
    CompileC /Users/krystal/Library/Developer/Xcode/DerivedData/Flit_customer-hgxxxcoceyxgdsgyoxttyeccnfwe/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/react-native-nmap.build/Objects-normal/x86_64/RNNaverMapView.o /Users/krystal/Flit_customer/node_modules/react-native-nmap/ios/reactNativeNMap/RNNaverMapView.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler (in target 'react-native-nmap' from project 'Pods')
(2 failures)

해결방안

client/ios/Podfile 파일에 "pod 'NMapsMap','3.10.1" NMapsMap 버전 추가

pod 'NMapsMap','3.10.1'

git-lfs 설치후 pod install

$ brew install git-lfs
$ cd 프로젝트
$ git-lfs install

$ cd ios/
$ rm -rf Pods/
$ pod install

$ react-native init --version 0.68.2 Flit_customer

최종 버전 Xcode = 14.1 java = 11.0.8 nvm = 0.33.11 npm = 8.11.0 node = 16.16.0 pod = 1.11.3 react-native-cli : 2.0.1 react-native = 0.68.2 ios simulator = 14.x 16.x android simulator = 10.x(Q), 13.x(T)

2. iOS 실행

$ npm start
$ react-native run-ios
$ react-native run-ios --simulator="iPhone 12"

3. Android 실행

$ react-native run-android

NVM(Node Version Manager) Quick Start Mac에서 nvm 설치 및 환경 변수 설정하기

# sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

$ brew reinstall nvm
$ nvm --version
0.33.11
$ nvm ls            

->       system
node -> stable (-> N/A) (default)
iojs -> N/A (default)

2. node.js 설치

nvm으로 여러 버전의 nvm을 설치하여 사용할 수 있다. node.js 설치 시 npm 자동 설치

$ nvm install 16.16.0
$ nvm use 16.16.0

3. npm 설치

$ npm --version
6.4.1

4. Android Studio 설치

https://developer.android.com/studio

SDK Install

SDK Manager > Android SDK > Android 10.0(Q) 설치

Virtual Device Manager

Create device

$ nano /Users/krystal/.zshrc

export ANDROID_HOME=/Users/krystal/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

$ source ~/.zshrc
$ adb
Android Debug Bridge version 1.0.41
Version 33.0.3-8952118

5. JAVA 설치

JDK 11 version 설치

jdk-11.0.8 version 설치

$ java --version 
java 11.0.8 2020-07-14 LTS
Java(TM) SE Runtime Environment 18.9 (build 11.0.8+10-LTS)
Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.8+10-LTS, mixed mode)

6. XCode 설치

App Store에서 XCode Application 설치

XCode > Settings > Locations > Command Line Tolls가 설정 되어있는지 확인

7. Visual Studio Code 설치

8. CocoaPod 설치

$ sudo gem install cocoapods -v 1.8.4
$  % pod --version
1.8.4

9.React Natice CLI

$ npm install -g react-native-cli
$ react-native --version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

npm install react-device-detect --save

2. 사용

import {BrowserView, MobileView, isBrowser, isMobile} from "react-device-detect";

Install homebrew if you don't already have it, then:

$ brew install git

2. git config 설정

$ git config --global user.name "Krystal"
$ git config --global user.email "p.krystal95@gmail.com"
$ git config --list

3. git 환경에 ssh 설치

$ ssh-keygen
$ cat ~/.ssh/id_rsa.pub
// 공개키복사

github 로그인 후 프로필에 들어가서 Setting. SSH and GPG Keys 선택 SSH Key 등록

4. clone 시 token 문제

https://hyeo-noo.tistory.com/184

Homebrew는 Mac에서 필요한 애플리케이션이나 개발 환경 등을 설치하는 데 유용하게 쓰인다.

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ brew --version

2. Node.js 설치

React-Native는 JavaScript를 사용하기 때문에, JavaScript의 런타임인 Node.js를 설치해야한다.

$ brew install node
$ node --version
$ npm --version

3. Watchman 설치

Watchman은 특정 폴더나 파일을 감시하여, 변화가 생길 경우 특정 동작을 수행하도록 설정하는 역할을 한다. React-Native에서 소스 코드의 추가, 변경이 발생하면 다시 빌드하기 위해 Watchman을 사용한다.

$ brew install watchman
$ watchman -v

4. React-Native CLI 설치

$ npm install -g react-native-cli
$ npx react-native --version

5. XCode 설치

React-Native 로 iOS 앱을 빌드하기 위해서는 XCode 를 설치해야한다. 그리고 XCode Command Line Tools도 필요하다. XCode는 Homebrew 가 아니라 App Store에서 설치한다.

참고링크

https://choboit.tistory.com/83

Troble Shooting

• react-script command 오류 발생 시 : https://velog.io/@soyoungdl/sh-react-scripts-command-not-found-%EB%A6%AC%EC%95%A1%ED%8A%B8

• npm install 실패 해결 : https://cocobi.tistory.com/114

하나의 class를 온전히 혼자 맡아서 구현한 이후, 다른 팀원들에게 설명을 하거나 코드 정리가 나름대로 필요할 때 API 문서 작성의 필요성을 많이 느낀다. doxygen을 써보려고 했지만, 함수마다 주석을 다는것은 가독성을 해칠 것 같아 좋은 방법을 찾아 보던 중 Slate를 알게 되었다.

Slate란?

• Ruby 기반의 HTML 실시간 렌더링, 빌드 기능을 가진 애플리케이션이다. API Tooling할 때 쉽게 적용할 수 있는 장점이 있어서 선택하게 되었다.

• /source 디렉토리의 Markdown 문서들을 기반으로 API 문서를 작성하면 Slate에서 반응형 웹으로 변환해준다.

• 실시간으로 마크다운 문서를 확인할 수 있고 배포를 위한 HTML 빌드 기능도 제공한다.

• 예시 페이지 : https://slatedocs.github.io/slate/#introduction

Slate Install

• 어떤 운영체제에서도 개발이 가능하지만 개발 환경 구축은 Ubuntu가 익숙하기 때문에 나는 Ubuntu 20.04 에서 개발 환경을 구성했다.

1. Ruby, Bundler 설치

$ cd ~
$ sudo apt-get install -y ruby-2.3.4-1.el6.x86_64.rpm
$ sudo apt-get install ruby-bundler
$ bundle install

2. Node.js 설치

$ sudo apt install nodejs
$ nodejs -v
$ sudo apt install npm

3. Slate 설치

• slate github을 나의 리포지토리로 fork 해온다. https://github.com/slatedocs/slate

  $ git clone https://github.com/Krystalvv/slate.git
  $ cd slate

4. Bundle 실행

# 코드를 받아오고 한번만 실행해주면 된다.
$ bundle install

Slate 설치가 완료되었으면 /source/index.html.md와 /includes/*.html.md를 작성하여 API 문서를 작성하면 된다.

5. Slate Server 구동

$ bundle exec middleman --watcher-force-polling

6. Slate Build

$ bundle exec middleman build --clean

• 작성이 완료된 API 문서를 빌드하려면 아래와 같이 실행한다. /build 디렉토리에 진입점이 되는 index.html과 기타 파일들이 생성된다. 빌드된 파일들을 클라이언트에게 전달하거나 웹사이트에 배포하면 된다.

⚠ trouble shooting

번외로 Slate 사용을 위한 환경 구축 중에... 번거로운 일들이 많았다. 문제 해결은 아래 링크들을 참조했다.

• Type Error : https://stackoverflow.com/questions/70364903/superclass-mismatch-for-class-command

  2186  sudo dpkg -r --force-depends ruby-thor
  2187  gem install thor

• SSL Certificates 문제(https -> http) : https://pinedance.github.io/blog/2017/11/02/how-to-bypass-SSL

error: RPC failed; curl 18 transfer closed with outstanding read data remaining fetch-pack: unexpected disconnect while reading sideband packet fatal: protocol error: bad pack header

$ git clone http://github.com/large-repository --depth 1

sudo mount -o nolock 10.0.1.49:/home/bilab/AirTom/nfs /mnt/AirTom/nfs
sudo mount -o nolock 10.0.1.49:/home/bilab/HemoVista/nfs /mnt/HemoVista/nfs

🍕 NFS

Mount 경로 지정

sudo nano /etc/exports

NFS Server 재시작

sudo service nfs-server restart

🍔 리눅스 시간 변경

sudo date -s 2021-01-01
sudo find ./ -exec touch {} \;

🌭 VNC Server 시작

vncserver -localhost no

🧀 Git

Clone

git clone http://10.0.1.231:30000/AirTomR3.0/Mercy/Software.git
git clone http://10.0.1.231:30000/AirTomR3.0/Mercy/HemoSoftware.git

🎨 NFS 관련 우분투 서버 패키지 설치

1. NFS 패키지 설치

프로젝트를 빌드하는 우분투 서버에 NFS 서버를 구축하기 위하여 패키지를 설치한다.

$ sudo apt-get install nfs-common nfs-kernel-server rpcbind

2. 공유 디렉토리 생성 및 권한 설정

서버의 전체 디렉토리를 공유해버리면 공유에 필요한 파일 외에 다른 폴더의 파일들도 삭제 / 변경의 우려가 있기 때문에 공유할 파일만 넣어놓을 디렉토리를 생성한다.

$ mkdir ~/nfs
$ chmod 777 ~/nfs

3. /etc/exports 파일 수정

$ sudo nano /etc/exports

/home/(계정이름)/(프로젝트이름)/nfs *(rw,no_root_squash,async) 공유 폴더 경로를 입력, 타겟 보드에서는 프로젝트 내의 nfs 폴더 외에 다른 폴더에는 접근 불가

:wq로 파일을 저장한다.

4. NFS 서버 재실행

$ sudo service nfs-server restart

💫 NFS 클라이언트 쪽에서 마운트하기

타겟보드인 임베디드 리눅스 기반의 시스템에서 마운트를 하기 위해 타겟 보드에서 네트워크 설정이 잘 되어 있는지 확인한다. ping 명령어를 통해 리눅스 서버와 연결이 잘 되어있는지 확인할 수 있다.

1. 리눅스 서버의 파일시스템을 마운트

$ sudo mount -o nolock (NFS 서버의 IP 혹은 도메인 주소):/(공유 디렉토리[절대경로]) (NFS 클라이언트의 마운트 위치) 

2. 마운트 확인

$ df -h

⚠ 아래와 같은 마운트 에러 발생시 nfs 관련 패키지를 설치해준다. ⚠ mount: /mnt/nfs: bad option; for several fylesystems (e.g. nfs, cifs) you might need a /sbin/mount. <type> helper program.

$ sudo apt-get install nfs-common

QML에서 어떤 객체의 타입을 확인 할 때 JavaScript의 typeof를 이용하면된다.

typeof 연산자는 형식 정보를 문자열로 반환하는데 "number", "string", "boolean", "object", "function" 및 "undefined"의 6가지 값이 있다.

var context

if(typeof(context) == "undefined")
{

}

이때 QT 컴파일러 파일들과 소스파일의 변경 시간을 touch -t 명령어로 변경해야하는데 하위 디렉토리까지 모두 바꿔주기 위해서 아래의 명령어를 실행한다.

 find directory_name -exec touch {} \; 

🍕 Tiger VNC 패키지 설치

$ sudo apt-get install tigervnc-standalone-server tigervnc-xorg-extension

🍕 VNC 암호 설정

$ vncpasswd

Password:
Verify:
Would you like to enter a view-only password (y/n)? n

🍕 VNC 서버 실행

$ vncserver -localhost no

🍕 실행중인 VNC 서버 확인

$ vncserver -list 

2. VNC 구성

🍕 VNC 인스턴스 종료

$ vncserver -kill :1

🍕 Gnome 설정

• .vnc 디렉토리 안에 xstartup을 생성하여 수행

  $ nano ~/.vnc/xstartup

  아래의 스크립트 추가

  #!/bin/sh
  exec /etc/vnc/xstartup
  xrdb $HOME/.Xresources
  vncconfig -iconic &
  dbus-launch --exit-with-session gnome-session &

  파일의 실행 권한 부여

  $ chmod u+x  ~/.vnc/xstartup 

3. VNC Client 접속

🍕 VNC Viewer 실행

VNC Viewer Download

🍕 VNC Viewer 접속

bilab@bilab-desktop:~$ vncserver -list

TigerVNC server sessions:

X DISPLAY #    RFB PORT #    PROCESS ID
:1        5901        8207

ex) 10.0.1.49::5901로 접속

• Window 7 이후 version
• 400MB 이상의 여유 공간 / 10GB 이상의 여유공간(Android Studio를 위한)
• git

🍕 Get the Flutter SDK

• Download
• 압축 풀기 경로 ➡ C:\src\flutter
• flutter_console.bat 실행

🍕 환경 변수 설정

• 어느 경로에서나 플러터 명령어를 사용하려면 환경 변수 설정을 해줘야한다.
• 윈도우 검색창에 시스템 환경 변수 편집 검색
• 사용자 변수에서 변수 Path를 찾아 편집
• Flutter SDK를 설치한 bin 경로 입력 (ex. C:\src\flutter\flutter\bin)

  flutter 명령어를 실행했을 때 cmd 창이 닫혀버리는 상황이 생길 수도 있다. 이는 윈도우 파워셀 정보가 path에 등록되지 않은 경우로 윈도우 파워셀의 버전에 문제가 없는데도 cmd 창이 닫힌다면, 환경변수 path 값에 아래 경로를 추가한다. C:\Windows\System32\WindowsPowerShell\v1.0

🍕 Flutter Doctor

• Flutter를 사용하기 위해 준비해야하는 list를 알 수 있다.

2. Install Android Studio

• Download and install Android Studio.
• Andriod Studio SDK 설치
• Plug in ➡ Flutter 검색 후 Install(IDE Restart)
• Project ➡ New Flutter Project를 선택할 수 있는지 확인

3. Install the Android Emulator

• New Flutter Project 선택
• SDK 경로 C:\src\flutter\flutter\ 입력 후 프로젝트 이름 입력

🍔 Get Android Emulator

• AVD 관리자로 이동(Phone+Andriod Icon)
• Nexus 6 선택
• ▶ 버튼을 클릭하여 가상 장치 실행(실행 후에는 창 닫아도 됨)
• Build 하여 Emulator에 App 나타나는지 확인

  ⚠ License for package Android SDK Build-Tools not accepted. Google Play licensing library가 설치되지 않아 생긴 이슈로 Tool ➡ SDK Manager ➡ SDK Tools 에서 Google Play licensing library 선택 후 설치