TOP Web IDE 개발환경 구축

r1. nvm 설치 ( 완료 후 터미널 재시작)

 

참고(소스있음) : https://github.com/nvm-sh/nvm#installing-and-updating

 

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash

2.

 $ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh  | bash

★ 설치 후 터미널 재실행

 

2. node.js 10 버전 설치 및 적용

 

$ nvm install v10.16.0

 

$ nvm use v10.16.0

 

3. yarn 설치

 

$ npm install -g yarn

 

4. python 2.7.x 버전 설치

 

$ sudo apt-get install python2.7

$ sudo apt-get install python-pip python-dev python-setuptools

  ★ 설치 후 터미널 재실행

 

$ python --version

버전 확인 시 3.0이상이면 삭제하고 2.7.x 로 재설치

5. g++ 설치

 

$ sudo apt-get install build-essential

 

6. git 설치

 

$ sudo apt-get install git

 

7. git clone

 

Repository를 두고 싶은 경로로 이동하여 git clone 명령어 실행

$ git clone -b master_server --single-branch http://192.168.13.130/tmax-platform/WebStudio.git

 

192.168.13.130 계정이 있는 팀원에게 계정 요청

 

8. git submodule 적용

 

git clone 이후

$ cd WebStudio

 

$ git submodule init

 

$ ssh-keygen -t rsa -C "seongjin_song@tmax.co.kr"

 

$ cat ~/.ssh/id_rsa.pub

 

http://192.168.13.130/profile 여기서 seongjin_song / seongjin_song 으로 로그인 후

SSH keys 가서 Key 란에 위의 id_rsa.pub 붙여넣기 하고 "Add key" 버튼 클릭

 

$ git submodule update

  - 등록한 ssh 로 update

 

9. expo 설치

 

$ npm install -g expo-cli

 

10. TOP Project Repository 가져오기

 

WebStudio 폴더와 동일 경로에 TOP_Projects 폴더 생성

 

TOP_Projects 폴더 내에서 git clone

$ git clone http://192.168.158.12:9000/teespace_mobile/webstudio.git

 

11. WebStudio 빌드 및 접속

 

$ bash force_update_runtime.sh

$ bash force_update_studio.sh

 

top/brower-app 에서 top web ide 를 구동한다.

$ yarn start

 

 

expo-build 에서 target 에 있는 소스들을 빌드한다.

$ yarn start

 

 

 

12. workspace 열기

 

브라우저에서 http://localhost:3000/ 로 웹 IDE 접속

 

TOP WebStudio 접속 후 open workspace 메뉴를 통해 TOP_Projects/webstudio 폴더를 workspace로 지정하여 open

workspace 에 있는 TeeSpace_Mobile_Common 프로젝트를 참고하여 개발 진행

 

 

Applicatoin Manifest 에서 Build 버튼을 클릭

→ target에 파일을 생성하는 것

 

expo-build 로 다시 가서

$ yarn start

 

그 후 QR 코드 찍고 빌드된 앱 확인하면 됨

 

※ expo build 할 때 internal/fs/watchers.js:173 error 가 발생하는 경우

 

expo-build 디렉토리에서 yarn.lock 파일 지우고

 

sysctl.conf 파일을 연다

$  sudo vi /etc/sysctl.conf

 

파일 맨 아래에 아래 문장을 추가해준다.

fs.inotify.max_user_watches=524288

 

 /etc 로 가서 설정을 재적용해준다.

$ sudo sysctl -p

 

다시 expo-build 로 가서

$ yarn start

 

 

빌드하기

 

  - n  Android 기기를 OTG 케이블로 연결하고, ADB 환경을 구성( https://4urdev.tistory.com/77 )

 

  - Expo 설치 단계에서 열어둔 디버깅 창에서 connection 모드를 local로 변경

 

  - Android 기기에서 Expo 앱을 다운받고 QR 코드로 접속

 

  - TOP WebStudio의 Application Manifest Editor 하단에 Build 버튼 클릭

 

  - 기기를 두번 세게 흔들어서 reload 메뉴 터치하여 앱 확인

 

업데이트

 

  - 주기적 혹은 명시적으로 192.168.13.130 소스코드 업데이트

 

  - WebStudio 경로에서 git pull origin master_server

 

  - WebStudio/top 경로에서 yarn

 

  - WebStudio/top/browser-app 경로에서 yarn top

 

  - WebStudio/expo-build 경로에서 git pull origin master

 

  - WebStudio/top-runtime/react-native-TOP-v5 경로에서 git pull origin master

 

  - WebStuido/top/browser-app 경로에서 yarn start

 

  - TOP_Projects/webStudio/ 경로에서 git pull --rebase

 

아래와 같은 오류가 발생하면 expo-build/ 디렉터리에서 yarn

 

개발환경 변경

지금부터 React Native에서 Expo를 제거한 환경으로 master 교체 작업을 시작하려고 합니다.
이에 따라 디버깅 환경이 달라지니 아래 가이드를 참고 바랍니다.디버깅 환경 세팅 방법

1. https://reactnative.dev/docs/environment-setup 페이지에 "React Native CLI Quickstart"를 참고하여 환경 세팅 (Watchman 필요 없음)
2. cop-debug/rn-build 위치에서 yarn (풀받고 한번만 하면 됨) 또는 force_update_runtime.sh 실행
3. 기존같이 빌드 버튼을 누르면 expo-build 대신 cop-debug/rn-build 위치에 복사됩니다.
4. cop-debug/rn-build 위치에서 yarn start (끝나지 않는 프로그램으로 한번만 실행)
5. cop-debug/rn-build 위치에서 yarn android (빌드 명령)
6. 이후엔 expo와 동일한 방식으로 디버깅하시면 됩니다. (fast refresh, remote debugger, inspector 등등 모두 지원함)

React Native CLI Quickstart 부분에서 iOS 환경은 macOS가 필요하고 번거로우므로,

디버깅 용으론 Anrdroid Emulator를 추천합니다.

 

MAC

맥에서 웹스튜디오 & 빌드하는법

1. 아래 패치파일 WebStudio에 적용
2. brew install coreutils 후 터미널에서 greadlink 커맨드 실행되는지 확인
3. 웹스튜디오 실행 후, expo-build에서 expo start
4. enjoy…

(주의사항) 맥은 case insensitive file system이 기본이랍니다… 현재 우리 tee space code에 drawable 파일에 대소문자만 다른 동일이름 파일들이 존재하기 때문에, case sensitive 파티션을 만들어서 그 위에서 작업하셔야합니다…

 

kvm 설정해주기

https://m.blog.naver.com/PostView.nhn?blogId=sckim007&logNo=220470290016&proxyReferer=https:%2F%2Fwww.google.com%2F 

 

kvm 유저 권한 주기

https://codechacha.com/ko/android-kvm-permission-denied/

 

에러

해결 방법

rn-build 폴더에 package.json 파일 까서 dependencies에 react-native-contacts 있는지 확인해보시고 없으면

WebStudio 폴더에서 force_update_studio -> force_update_runtime

 

$ bash force_update_studio.sh

$ bash force_update_runtime.sh

 

----------------------------------------------------------------------------------------------

## 아침에 오면 환경설정 시작하는법##

 

TOP 웹 스튜디오 PULL

/home/seongjin/WebStudio
git pull origin master_server

 

TOP 런타임 엔진, core PULL
1./home/seongjin/WebStudio/top-runtime/react-native-top-v5
$ git pull origin master
or
2. 파일 실행해주면 top-runtime 업데이트 됨
$ force_update_studio.sh

$ force_update_runtime.sh
※ 평상시에는 1번, 뭔가 되어야하는 기능이 안되면 2번업데이트

 

빌드
/home/seongjin/WebStudio/top
$ yarn

/home/seongjin/WebStudio/top/browser-app

$ yarn top

/home/seongjin/WebStudio/cop-debug/rn-build
$ yarn

 

yarn topTOP IDE 브라우저 실행
/home/seongjin/WebStudio/top/browser-app
yarn start

 

react natve cli 실행
/home/seongjin/WebStudio/cop-debug/rn-build
yarn start

 

안드로이드 에뮬레이터 실행
yarn android

 

자신이 작업할 브랜치에서 풀받고 작업 시작

/home/seongjin/Top_Projects/webstudio 경로로 이동

1)토크

$ git pull origin talk_master

2)공통
$ git checkout master
$ git pull origin master
$ git checkout common_ssj

 

작업 후 rebase 한뒤 commit 하고 Merge Request

$ git pull --rebase origin talk_master

$ git add .

$ git commit -m "[category]message"