Ground17's Playground

안녕하세요. Ground17입니다. 섬의 지형이 많이 바뀌었습니다. 앞으로 일주일 내로 섬의 전체적인 형태는 다 갖춰질 것 같습니다. 이제 꽃들과 울타리와 가구의 배치를 어떻게 할지를 집중적으로 고민해야 할 것 같습니다. 아래 사진들은 다리와 비탈길 기념식 촬영사진입니다. 아래 사진은 캠핑장 사진입니다. 제 유튜브 영상 에서도 잠깐 소개된 적이 있습니다. 마지막으로 아래 사진은 별 보기 좋은 장소에서 찍은 사진입니다. 트위치 생방송:  https://www.twitch.tv/ground1717 유튜브 하이라이트:  https://www.youtube.com/channel/UCyoRBB-GY_2iTAtnCDiz3Bg 읽어주셔서 감사합니다!

안녕하세요. 오늘은 제가 개발한 앱들을 중심으로 해서 실제 앱 출시가 어떤 과정으로 이뤄지는지를 간략히 소개해드릴까 합니다. 이 게시글은 전공자나 현업자보다는 취미로 앱을 출시하려 하시는 분들이나 단순히 궁금하신 분들을 초점으로 하여 작성된 게시글이고, 영상 자료와 달리 여러 부연 설명들이 들어갑니다. 혹시 틀린 부분이 있다면 댓글로 알려주시면 반영하겠습니다. 사실 어플을 출시하는 데에는 여러 다른 과정들이 필요합니다만, 이 게시글은 '출시' 과정을 초점으로 하여 설명드리겠습니다. 그리고 저는 Flutter, React Native, Unity를 사용해서 모바일 앱을 개발하며, 네이티브 영역은 따로 조금씩 건드리는 방식으로 개발합니다. 이 점도 참고해주시면 감사하겠습니다. 설명을 영상으로 보고 싶으신 분들은 아래 동영상 혹은 링크를 눌러주세요. 저의 개발자 유튜브 채널의 동영상입니다. https://youtu.be/L5sPALeWQro 0. 배경지식 Android의 경우엔 공식적으로 Java 또는 Kotlin이라는 언어를, iOS의 경우엔 공식적으로 Objective-C 또는 Swift라는 언어를 사용해서 개발하게 됩니다. 하지만 한 명의 인디 개발자가 각각의 OS에 각각 다른 언어를 써서 개발한다는 건 쉬운 일이 아닙니다. 또한 Android 기기와 iOS 기기의 특성이 약간씩 다르기 때문에 그에 맞춰 코드를 짜줘야 합니다. 그런데 구글과 페이스북, Unity에서 코드를 한 번만 써서 Android와 iOS에 동시 적용 가능하도록 하는 개발 엔진을 만들었습니다. 각각 Flutter, React Native, Unity입니다. Flutter와 React Native는 크로스 플랫폼(두 가지 이상의 OS를 개발할 수 있는 플랫폼)의 양대산맥이며, 각각의 장단점을 비교하는 글이나 영상은 다른 곳에 많이 나와있으니 궁금하신 분들은 직접 찾아보시길 추천드립니다. Unity는 게임에 특화된 개발엔진이며, Android와 iOS 외에도 STEAM, PS4,...

React Native의 장점이라 한다면 자신이 직접 Native 코드를 작성할 필요 없이 이미 만들어진 패키지를 설치해서 그대로 쓰면 된다는 것입니다. 이미 아시는 분들에겐 매우 쉬운, React Native에서의 패키지 설치 방법을 알려드릴까 합니다. 1) https://www.npmjs.com 홈페이지에서 원하는 패키지 찾기 2) 터미널에 'npm install (패키지 이름)' 형태로 입력 ( react-native link 는 react-native 버전이 0.60 미만인 경우에서만 진행 ) 2-1) iOS의 경우 cd ios를 한 뒤 pod install 명령어를 터미널에 입력 3) package.json 파일을 열어 dependencies 안에 패키지 이름이 제대로 들어있나 확인 4) 설치한 패키지의 파일을 import해준 뒤 npmjs.com 안 가이드라인대로 코드 작성 한꺼번에 패키지를 설치할 때는 'npm install (패키지 이름1) (패키지 이름2) ... (패키지 이름n)'의 형태로 입력해주시면 됩니다.

Flutter의 장점이라 한다면 자신이 직접 Native 코드를 작성할 필요 없이 이미 만들어진 패키지를 설치해서 그대로 쓰면 된다는 것입니다. 이미 아시는 분들에겐 매우 쉬운, Flutter에서의 패키지 설치 방법을 알려드릴까 합니다. 1) pubspec.yaml 파일로 이동 2) pub.dev 홈페이지에서 원하는 패키지 찾기 3) pubspec.yaml의 dependencies 안에 원하는 패키지와 버전을 입력 (예: 'url_launcher: ^5.7.10', 버전들은 pub.dev 안에 자세히 나와 있습니다.) 4) flutter pub get 실행 (Android Studio를 사용하시는 분은 상단의 Pub get을 입력하시면 됩니다.) 4-1) iOS의 경우 cd ios를 한 뒤 pod install 명령어를 터미널에 입력 5) 설치한 패키지의 dart 파일을 import해준 뒤 pub.dev 안 가이드라인대로 코드 작성 (Android Studio의 경우, 아래 그림처럼 'Pubspec has been edited'라는 막대 바가 뜨는 경우가 있는데, 바로 Get dependencies를 누르면 정상적으로 동작합니다) 한꺼번에 패키지를 설치할 때는 그냥 여러 패키지를 엔터로 구분하여 작성하여 위 과정을 한 번만 진행해주시면 됩니다.

일단, 이 글에서는 제가 자주 쓰는 화면 전환법들만 다뤘음을 밝히며, 더 자세한 사항을 알아보고 싶으신 분들은 아래 공식 문서나 다른 문서들을 참고하시는 것이 더 좋을 것입니다. https://reactnavigation.org/docs/getting-started 모든 과정을 시작하기 앞서, 아래 패키지들을 설치해줍니다. npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view 만약 tab view와 stack view도 사용한다면 아래 패키지들도 추가로 설치해줍니다. npm install @react-navigation/bottom-tabs @react-navigation/stack 아래는 기본적인 화면을 구성하는 코드입니다.(function 형식보단 class 형식이 더 많습니다) App.js import 'react-native-gesture-handler' ; import { NavigationContainer } from '@react-navigation/native' ; import { createStackNavigator } from '@react-navigation/stack' ; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' ; import Icon from 'react-native-vector-icons/MaterialIcons' ; import Login from './assets/screens/Login' ; const Stack = createStackNavigator (); const Tab = createBottomT...

일단, 이 글에서는 제가 자주 쓰는 화면 전환법들만 다뤘음을 밝히며, 더 자세한 사항을 알아보고 싶으신 분들은 아래 공식 문서나 다른 문서들을 참고하시는 것이 더 좋을 것입니다. https://api.flutter.dev/flutter/widgets/Navigator-class.html 아래는 기본적인 화면을 구성하는 코드입니다. class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build (BuildContext context) { return MaterialApp ( /// home: MyHomePage (title: '카트라이더 전적 검색 17%' ) , ) ; } } class MyHomePage extends StatefulWidget { MyHomePage({Key key , this . title }) : super (key: key) ; final String title ; static void restartApp (BuildContext context) { context.findAncestorStateOfType<_MyHomePageState>().restartApp() ; } @override _MyHomePageState createState () => _MyHomePageState () ; } class _MyHomePageState extends State<MyHomePage> { /// } 그리고 함수를 하나 만들어서 그 안에 다른 화면으로 이동하기 위해 아래와 같은 형식으로 코드를 입력해줍니다. Navigator. push ( context , MaterialPageRoute (builder: (context) => DetailApp (id: get. accessId ,...