우리 팀의 주제는 모바일 크로스 플랫폼 실시간 스트리밍 앱 제작입니다. 송출하고자 하는 영상을 기존에 있는 방송 플랫폼(Twitch TV, Afreeca TV, etc.)에 보내는 역할을 하는 앱이 아닌, 이 앱에서 스트리머는 직접 방송을 하고, 시청자는 방송을 볼 수 있는 또 하나의 새로운 플랫폼을 구현하는 것이 목적입니다.
Netty：
Netty is a non-blocking I/O client-server framework for the development of Java network applications such as protocol servers and clients.
• Application server
• Node.js
• Twisted (software)
• Apache MINA
React Native：
React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS and UWP by enabling developers to use React along with native platform capabilities.
├─end-admin
│ ├─admin-manager
│ │ ├─src
│ │ │ ├─main
│ │ │ │ ├─java
│ │ │ │ │ └─net
│ │ │ │ │ └─novaborn
│ │ │ │ │ └─living
│ │ │ │ │ └─app
│ │ │ │ │ ├─common
│ │ │ │ │ │ ├─aop
│ │ │ │ │ │ ├─exception
│ │ │ │ │ │ ├─tips
│ │ │ │ │ │ └─xss
│ │ │ │ │ ├─config
│ │ │ │ │ │ └─properties
│ │ │ │ │ ├─modular
│ │ │ │ │ │ ├─auth
│ │ │ │ │ │ │ ├─converter
│ │ │ │ │ │ │ ├─filter
│ │ │ │ │ │ │ ├─security
│ │ │ │ │ │ │ │ └─impl
│ │ │ │ │ │ │ ├─util
│ │ │ │ │ │ │ └─validator
│ │ │ │ │ │ │ ├─dto
│ │ │ │ │ │ │ └─impl
│ │ │ │ │ │ └─setting
│ │ │ │ │ │ ├─dao
│ │ │ │ │ │ ├─entity
│ │ │ │ │ │ └─service
│ │ │ │ │ │ └─impl
│ │ │ │ │ └─web
│ │ │ │ │ ├─api
│ │ │ │ │ │ ├─admin
│ │ │ │ │ │ │ └─warpper
│ │ │ │ │ │ └─client
│ │ │ │ │ └─dto
│ │ │ │ └─resources
│ │ │ │ └─mybatis
│ │ │ └─test
│ │ │ └─java
│ │ │ └─net
│ │ │ └─novaborn
│ │ │ └─living
│ │ │ └─app
│ │ │ ├─fastjson
│ │ │ └─jwt
│ │ └─target
│ │ ├─classes
│ │ │ ├─META-INF
│ │ │ ├─mybatis
│ │ │ └─net
│ │ │ └─novaborn
│ │ │ └─living
│ │ │ └─app
│ │ │ ├─common
│ │ │ │ ├─aop
│ │ │ │ ├─exception
│ │ │ │ ├─tips
│ │ │ │ └─xss
│ │ │ ├─config
│ │ │ │ └─properties
│ │ │ ├─modular
│ │ │ │ ├─auth
│ │ │ │ │ ├─converter
│ │ │ │ │ ├─filter
│ │ │ │ │ ├─security
│ │ │ │ │ │ └─impl
│ │ │ │ │ ├─util
│ │ │ │ │ └─validator
│ │ │ │ │ ├─dto
│ │ │ │ │ └─impl
│ │ │ │ └─setting
│ │ │ │ ├─dao
│ │ │ │ ├─entity
│ │ │ │ └─service
│ │ │ │ └─impl
│ │ │ └─web
│ │ │ ├─api
│ │ │ │ ├─admin
│ │ │ │ │ └─warpper
│ │ │ │ └─client
│ │ │ └─dto
│ │ └─test-classes
│ │ └─net
│ │ └─novaborn
│ │ └─living
│ │ └─app
│ │ ├─fastjson
│ │ └─jwt
│ └─admin-vue
│ ├─build
│ ├─config
│ ├─src
│ │ ├─api
│ │ ├─assets
│ │ │ └─404_images
│ │ ├─components
│ │ │ ├─Breadcrumb
│ │ │ ├─Hamburger
│ │ │ ├─ScrollPane
│ │ │ └─SvgIcon
│ │ ├─directive
│ │ │ ├─clipboard
│ │ │ ├─el-dragDialog
│ │ │ └─waves
│ │ ├─icons
│ │ │ └─svg
│ │ ├─router
│ │ ├─store
│ │ │ └─modules
│ │ ├─styles
│ │ ├─utils
│ │ └─views
│ │ ├─dashboard
│ │ │ └─components
│ │ ├─layout
│ │ │ ├─components
│ │ │ │ └─Sidebar
│ │ │ └─mixin
│ │ ├─living
│ │ ├─login
│ │ ├─redirect
│ │ ├─setting
│ │ └─user
│ └─static
│ └─img
└─front-app
├─android
│ ├─.settings
│ ├─app
│ │ └─src
│ │ ├─debug
│ │ └─main
│ │ ├─assets
│ │ │ └─fonts
│ │ ├─java
│ │ │ └─com
│ │ │ └─livestreamingapp
│ │ │ └─react
│ │ └─res
│ │ ├─drawable
│ │ ├─layout
│ │ ├─mipmap-hdpi
│ │ ├─mipmap-mdpi
│ │ ├─mipmap-xhdpi
│ │ ├─mipmap-xxhdpi
│ │ ├─mipmap-xxxhdpi
│ │ └─values
│ ├─gradle
│ │ └─wrapper
│ ├─keystores
│ └─RtmpPublisher
│ └─src
│ └─main
│ ├─java
│ │ └─com
│ │ └─takusemba
│ │ └─rtmppublisher
│ │ └─gles
│ └─res
│ └─values
├─ios
│ ├─LiveStreamingApp
│ │ ├─Base.lproj
│ │ └─Images.xcassets
│ │ └─AppIcon.appiconset
│ ├─LiveStreamingApp-tvOS
│ ├─LiveStreamingApp-tvOSTests
│ ├─LiveStreamingApp.xcodeproj
│ │ └─xcshareddata
│ │ └─xcschemes
│ └─LiveStreamingAppTests
├─src
│ ├─components
│ ├─native-modules
│ └─resources
└─__tests__
CRA, CRNA에서 외부 환경 설정을 추가하는 방법에 대해 다룬다. prod, dev환경 별 환경변수를 받으려면 CRA같은 경우 기본적으로 .env.local, .env.development, .env.production을 제공해준다. CRNA는 각 환경별 환경 설정을 하려면 react native config나 react native dotenv (.env만 사용가능함)을 이용할 수 있겠다.
staging 환경을 추가하고자 하였고 기본적으로 제공하는 문서로는 다루기가 힘든다라는 것을 깨닫고 다른 방안을 찾아보게 되었다.
React
package.json ... “scripts”: { “start”: “cp ./.env.dev ./.env && react-scripts start”, “start:staging”: “cp ./.env.staging ./.env && react-scripts start”, “start:production”: “cp ./.env.prod ./.env && react-scripts start”, }
스크립트 단에서 실행방법을 나누고 cp로 .env에 복사 후 각 환경별로 환경변수를 받고 실행하는 방법이다. 내가 발견한 것들 중에 가장 깔끔한? 방법인거 같다. 코드에 영향도도 가장 적고 관리하는데 가장 좋은 방법이라 생각한다.
React Native
package.json ... “scripts”: { “start”: “./scripts/pre-build.sh development && react-native-scripts start”, “start:staging”: “./scripts/pre-build.sh staging && react-native-scripts start”, “start:production”: “./scripts/pre-build.sh production && react-native-scripts start”, },
쉘 스크립트를 이용한 관리 방법이다. pre-build.sh는 환경별로 REACT_NATIVE_ENV키 값을 생성하여 config.json에 덮어씌운다. 그리고 environment.js을 만들어 환경별 필요한 변수들을 세팅하여 전달한다.
dotenv나 config라이브러리를 사용하지 않았던 이유
react native config
물론 getting started 보고 설정하면 원활히 동작할 수 있겠지만 관리 측면에서 react native config 설정에 따른 호환도 유지해야한다는 점에 오히려 불편하다는 걸 알게되었다. 그런 이유로 사용하지 않았던거같다.
dotenv
CRA은 내부적으로 설정 되어있지만 한정적인 설정밖에 안되어 이용하기 불편했던거같다. (ex) .env.staging 설정) react native dotenv는 .env만 사용가능하여 제외 대상이었다. 물론 아래와 같은 식으로 환경변수를 .env에 전달 받는 방법도 있겠다. .env REACT_ENV=$REACT_ENV
package.json “scripts”: { “start”: “REACT_ENV=staging && react-scripts start” }
다만 React Native에는 OS 환경에 환경변수 설정 후 appcenter환경에서 빌드 시엔 정상적으로 인식을 못했던거같다. (react-native-dotenv의 이슈인지 정확히 모르겠지만)
환경별 환경변수 설정은 다양한 방법이 존재하겠지만 아직까진 위와 같은 방법이 가장 심플한 경험을 받았다. React Native 경우 Native단 환경변수 설정도 있겠지만 react native config나 다른 방안을 이용하면 되겠다. 각 환경별 환경변수 설정 Example을 공유한다.
React
React Native
Node
20165172 왕천용
20134220 우정현
20161795 고가해
20173954 유진
20174950 온가력
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent