android koin 적용하기

이미지
 안드로이드 스튜디오를 가능 업데이트 했다. 아~~~  안된다. 신규 프로젝트를 만드니깐  build.gradle 설정이 기존이랑 다르게 변경되어 있다. 개똥같은 새끼들  그래서 인터넷 보고 적용한 koin 이 신규 프로젝트에 적용하기가 안된다. 그래서 찾아 봤다.  어떻게 하면 적용할수 있지는  그런데 아무도 답을 주지 않았다. 공식 코인 사이트도 별 도움이 되지 않는다. 안드로이드 사이트도 별 도움이 되지 않는다. 그래서 동작하도록 만들었다. 그래서, koin 사이트들 보고 하나씩 적용하였고  따라 하다보니 annotation 도 적용하게 되었다. annotation 은 spring 좀 해본 분이면 쉽게 사용 가능하다. 코인 3.2 버전 적용하는 내용이다.  https://insert-koin.io/docs/setup/v3.2 코인 버전 정보 처리를 $koin_version   이런식으로 했다.  별도로 찾아보았다. 버전 정보가 없어서 그리고 적용하였다. 아래 이미지를 보면 바로 확인 가능하다.  신규 프로젝트 생성후 build.gradle 의 내용이다. 인터넷에 나와 있는 모양이랑 다르다. 샬라샬라 뭐라고 코멘트라도 남기면 왜 이렇게 변경되었고 어떻게 적용할지 알수 있는데 그냥 쓩~~~ 하고 변경되었다. 조금 당황스럽지만 익숙하다. 안드로이드는 늘 이런식으로 하기 때문에 그냥 하면 된다.  app 에 있는 build.gradle 이다.  ksp 를 적용해야 하니깐 추가한다. koin 공식사이트에 추가하라고 되어 있는데 안드로이드 어디에 추가하라고 되어 있지는 않다. 그래서, 위치도 넣었다.  그냥 넣어라. 뭔지는 나도 모른다. 마지막으로 implementation 부분이다. koin 관련 내용 전부다. 그냥 이렇게 넣어라. 버전 설정을 gradle 에서 어떻게 하는지 몰라가 인터넷 보고 그냥 가장 쉬운 방법 적용하였다. 버전도 sta...

개똥같은 안드로이드 kotlinx.android.synthetic.main.activity_entrance.*

이미지
socket.io 관련 안드로이드 어플 하나 만들어 볼려 하다 너무 많이 와 버렸다. 기존 소스  https://github.com/joyceHong0524/socket.io_android 이걸 다시 보면서 특이한 점을 발견하였다. knife 사용해서 findbyview 를 대체해서 사용하다가 viewbinding 으로 나는 바로 넘어 왔는데 위에 코드를 보면  button.setOnClick 이라고 view 를 지정하지도 않았는데 동작하는 것을 볼 수 있다. 이거 관련해서 내용이 아래에 링크에 있다.   https://thdev.tech/android/2020/10/07/Remove-kotlinx-synthetic/ 링크에 내용은 사용하지 마라!!!  viewbinding 을 사용해서 해라이다. 그리고, 링크글 안에 링크가 있어 그 것도 링크해 놓았다. https://www.androidhuman.com/2017-11-26-kotlin_android_extensions_on_viewholder extension 에서 recyclerview 를 어쩌고 하는 내용인데 일단 extension 을 사용해서 구현하지 않을 거라서 별 필요가 없어 보인다. (그리고, 길이 2017년도에 적으신것으로 봐서 현재는 이걸 무조건 사용하지 않는다.) 그냥 이전에는 이렇게도 했다 정도 알고 가자. 코트링 소스를 자바로 변환해서 변경되는 내용을 확인하고 반대로 하고 이런식으로 확인 하신것 같다.

socket.io 를 이용한 채팅 만들기 2022 2차

이미지
  vs code 에서 chat-example 을 열었다. 1차에 있는 nodejs 소스를 적당히 수정해 보도록 한다. 원본 소스는 아래에 있다.  https://gist.github.com/joyceHong0524/9f7c1d043e18aab20383ff051c9364f2#file-index-js 그냥 full source github 주소를 링크하기로 한다. 내가 만든 수정 소스 링크 이다.  wkyoon/chat-example-ex-login-room (github.com) 안드로이드 어플을 하나 만든다. socket.io client 를 만들기 위해서 implement 를 추가해야 하는데  이것도 버전이 2022년 기준으로 확인해 보면 socket.io server version 에 따라 설치하는 것이 달라 지기 때문에 확인해 보았다. https://socketio.github.io/socket.io-client-java/installation.html socket.io server 버전이 4.x 이기 때문에 client 도 2.x 버전을 이용해야 한다. gradle 에 추가한다. android manifest 에 인터넷을 추가한다.     <uses-permission android:name="android.permission.INTERNET" /> 원래 소스를 확인해 보니 activity 이동으로 만든 소스이다. 이건 요즘 좀 그렇다. ( 내기준임) 지금은 activity 이동하는 형태로 안 만든다. android studio setting 이 default 가 viewbinding 이다.  그래서 viewbinding 이 되도록 구성해 보기로 한다. 일이 커진다. 기존 소스의 github 주소 https://github.com/joyceHong0524/socket.io_android 필요한 부분만 가져와서 적용하기로 한다. 기존 소스 확인 한 결과 이 걸 그냥 사용할수는 없을것...

아이폰 GUI 하기 참조

이미지
인터넷 하다가 찾았다. IOS GUI 개발을 할려면 알아야 하는 내용인것 같아 링크만 걸어 놓었다.  https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/ apple 공식 문서인것 같고  Device Screen Sizes and Orientations 정도 알고 있으면 좋을 것 같다. https://useyourloaf.com/blog/iphone-12-screen-sizes/ Safe Area 관련 내용을 참조 하시면 된다. https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 화면에 대한 정보를 한눈에 볼수 있는 페이지 이다.

android recyclerview with multi item binding

이미지
 채팅 예제 하나 올려 볼라고 시작한 일이 커졌다. 기존 소스가 activity 로만 되어 있어 fragment 로 변경하고 viewbinding 을 적용해 볼려고 시작했는데 recyclerview 를 한번 정리하게 되었고  글찾아보니 제대로 동작하는 소스가 없어서 나도 하나 만들어 보았다. 이제 내가 만든 소스 기준으로 adapter 에 multi type itembindingview 를 적용해 보도록 한다. 소스의 시작은 recyclerview02 소스를 가지고 시작한다. https://github.com/wkyoon/Recyclerview02.git 모든 내용은 동일하다. 단지 recyclerview 에 들어가는 item 의 view type 이 하나가 아니고 둘이라는게 다른 내용이다. 우선 activity_main.xml 에 있는 recyclerview 부분부터 수정한다. tools:listitem 을 삭제한다. single type 의 item 을 가질때는 위와 같이 xml 에 선언해서 사용하는것이 편하다. 하지만 mutil type 인 경우는 위와 같이 사용하면 안된다. ( 삭제를 하고 그냥 실행해도 결과는 똑같다. 그냥 무시해도 되는거 보다) 일단 이걸 할려고 하면  sealed class 를 알아야 한다. inner class로 사용하는 ViewHolder 로 해결해 보고 싶었지만 그렇게 되지는 않는 것같다. https://kotlinworld.com/165 sealed class 를 별도로 만들어서 처리하는 방법을 참조하도록 한다. 그리고, 다른 예제 https://www.section.io/engineering-education/implementing-multiple-viewholders-in-android-using-kotlin/ 이게 이해 하기 제일 편할것 같다. 다른 분들건 너무 내용이 복잡하다. sealed class 를 사용해 해야 하는 것은 이해 하겠지만 이걸 어떻게 adapter 에 적용할 건지에 대해 간...

android RecyclerView example kotlin

이미지
recyclerview 를 이용해서 예제를 만들어 본다. kotlin 으로 만들어 보겠다. 기본 예제 소스 가져온곳 https://yunaaaas.tistory.com/43 여긴 binding view 가 적용되지 않았다. 그냥 기본 소스이다. 안드로이드 스튜디오에서 프로젝트 만들때 잘 선택해야 한다. 지금 버전은 default 가 view binding 이 되어 있다. Empty Activity 를 선택하면 아무것도 없다. 여기에 적용한다. app 아래에 build.gradle 에 implement 를 추가한다. row item 의 xml 을 추가한다. mainactivity layout 에도 추가한다. adapter 를 추가한다. 이때 먼저 해야 하는것이 data class 를 우선 추가한다. 여기서 사용하는 example 에는 image 를 로딩하는 것이 glide 를 사용하고 있다. 링크만 참조 하기 바란다. 나는 그냥 iamgeview 쪽을 주석처리하겠다. https://velog.io/@sasy0113/Android-Kotlin-Glide 이제 mainactivity 를 구현한다. 기존 소스는 버그가 있다. findviewby 를 사용해서 구현하였는데 rv_profile 을 구현하지 않았다. 당연히 소스도 돌아가지 않을 것이다. 그래서, 이전 방식 찾아서 구현하였다. 동작한다. 이방식은 이전에 자바할때 사용하는 방식이다. 요즘은 이렇게 구현하지 않는다. view binding 을 기본적으로 사용하기 때문에 fidnviewby 를 이용한 소스는 옛날 소스라고 보면 된다. 기존 예제는 full source 가 없는 것 같아서 github에 올려 놓도록 한다. https://github.com/wkyoon/Recyclerview01.git 여기에서 viewbinding 을 적용한 것을 만들어 보겠다. 간단하다. build.grade 에 viewBinding 을  추가하면 된다. android studio 에서 empty activity 로 만들면 ...

socket.io 를 이용한 채팅 만들기 2022 1차

이미지
 socket.io 를 이용한 채팅 만들기 2022 nodejs 를 사용하는 이유는 단하나 socket.io 를 이용해서 서버를 구성하기 위해서 이다라고 말할수 있을 만큼 강력한 내용이다. chat-example 을 이용해서 간단히 chatting server 를 만들수 있다. https://github.com/socketio/chat-example 그냥 github 에 default source 만 있어도 개발이 끝났다.  더이상 특별한 내용이 없게 만들어 버린다. 터미널을 열어서 그냥 git clone 하고  해당 프로젝트 들어가서 init 해서 그냥 사용해 보면 된다. git clone https://github.com/socketio/chat-example.git cd chat-example/ ls -l yarn init  나는 yarn 을 이용하니깐  yarn init 하였다. yarn start  위와 같이 에러가 발생한다. yarn add 해서 package 를 추가해야 한다. yarn add express express 를 추가하였다. yarns start  실행하였다.  로컬에서 바로 동작하는 것을 확인 할 수 있다. 여기까지 하면 chat-example 에 있는 내용 끝이다. 하지만 하고 싶은 내용은 이게 아니다. android 에서 socket.io client 를 구현하는 내용이다. https://joycehong0524.medium.com/android-%EC%97%90%EC%84%9C-node-js%EC%9D%98-socket-io-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0-%EC%98%88%EC%A0%9C%EB%A1%9C-%EC%B1%84%ED%8C%85-%EC%84%9C%EB%B9%84%EC%8A%A4-ffa3edfd4f49 이분의 내용을 적용해 보고 싶은데 소스가 full 존재하지 않아서 socket.io 공식 소스를 가져...

Android Retrofit2 Rxjava polling

이미지
  안드로이드에서 웹서버에 있는 데이터를 주기적으로 가져오는 걸 하나 만들어 보았다. 이전에 자바로 개발할때는  retrofit 을 service 에서 돌리고 그걸 handler 로 사용해서 주기적으로 호출하도록 하여 이 값을 broadcasting 하거나 callback 하도록 listener interface 만들어서 데이터를 전달했던 기억이 있다. 하지만, 지금은 kotlin 으로 개발하고 있고 시대가 변해서 시대에 맞게 개발 방법을 찾아 보았다.  retrofit rxjava 조합으로 만들어 보았다. 내용은 인터넷에 있는 내용을 가져와서 동작 시켰고 참조한 사이트와 그에 관련 된 내용을 정리하기로 한다. 참조한 사이트는 아래와 같다. https://www.journaldev.com/23007/android-retrofit-call-every-x-seconds 사이트에 내용은 간단하다. webserver 에 get 으로 요청해서 데이터를 가져와서 뿌려주는 내용이다. 소스가 자바로 되어 있다. 나는 자바가 아닌 kotlin 으로 하고 싶은데 자바 소스이다. 하지만 안드로이드 스튜디오는 자바소스를 ctrl+c ctrl+v 하면 자동으로 코드 변환을 해 주기 때문에 그냥 진행해 보았다. 코드 변환이 그냥 잘 된다.  하지만 그렇다고 그냥 다 되는건 아니다. 처음 빠진 내용 json 처리하는 gson 라이브러리가 없다. https://re-build.tistory.com/41 dependencies { implementation  'com.google.code.gson:gson:2.8.5' } 사이트를 참조해서 gson 라이브러리를 넣었다. 그리고, 또문제가 발생했다. converterFactory 라는 놈이 없다고 한다.  https://onlyfor-me-blog.tistory.com/292 implementation "com.squareup.retrofit2:converter-gson:2.8.1" 해당 라...

nodejs express jwt 적용 (mysql) restfulserver 기존 로그인 시스템 다시 구성

이미지
 기존 로그인 시스템 다시 구성 node.js 기반 restful server 구축 이다. base source 는  https://www.bezkoder.com/node-js-jwt-authentication-mysql/ 이다. 중요 내용중에 하나  sequize 적용 시  n:m 관계설정이 있고 중개테이블 설정하는 부분이 있다  이부분이 여기서 핵심 코드이다. 이 부분은 별도로 정리해 보기로 한다. n:m 과 1:m 의 관계 구성과 사용이 설정이 별로 없고 예제 또한 절절한 것들이 없다. 하지만  이런걸 꼭 사용하는 부분들이 있다.  user 와 role 구성 하는 부분이 있는데 이걸 sophisticated 하게 구현한 소스 예제가 없다. setRole,getRole, addRole 이런식으로 하는 예제가 없다.  이걸 한번 만들어야 할것 같다. 이 내용을 그대로 가져와서 하였다.  추가한 내용은 localhost 에서만 동작 하여 cor 부분 추가하였고 이번에 https 적용도 같이 추가 하였다. 결과물을 확인하기 위해 postman 으로 확인 하였는데  http 는 문제가 없지만  https 는 신뢰할수 없는 사이트라고 나오는 이슈가 있어 정상적으로 동작하지 않았다. 해결 방법은 그냥 설정해서 SSL  certificate verification option을 off 하면 된다. 이건 api 동작만 확인하기 위한 조치이며  client 사이트에서 해결하기 위해서는 다른 무언가를 해야 한다. 1. 도메인이 있는 경우  certbot 을 이용해 보는 것도 좋아 보인다. 꼭 도메인이 있어야 하고 설정도 해야 정상적으로 동작한다. 2. client 에 호출하는 놈이 있는데 그놈에 옵션을 주어서도 해결할수 있다.  3. restful server 에 proy server 를 붙여서 사용해도 된다. apache 나 nginx...

Xamarin IOS 실행 window 에서 실행하지 마세요. 안됩니다. 그냥 맥에 visual studio 2019 설치해서 하는게 정신 건강에 좋음

이미지
 Xamarin 을 window 에 설치해서 실행하는 것을 기준으로 하였을 경우 Android 는 쉽게 에뮬을 실행하여 확인 할 수 있다. 하지만 IOS 내용은 확인하기 위해서는 MACOS 가 있어야 하고  같은 네트워크에 있어야 한다. 맥에서 공유를 찾아서 실행하고  리모트 연결을 설정한 후에  연결을 시도하면 아래와 같이 나온다. 맥에 로그인 하는 아이디 / 패스를 그대로 사용해서 접속해야 한다. 처음 설치하면 뭐가 없다고 계속 설치하라고 나온다. 그냥 설치한다. 정식 가이드 문서는 아래 링크를 확인하기 바란다. Xamarin.iOS 개발을 위해 Mac에 페어링 - Xamarin | Microsoft Docs 정상적으로 연결이 되면 클립 형태로 연결된 것을 표시한다. 결론 mac 에 visual studio 2019 를 설치해서 하는게 정신 건강에 좋다. window 에서 android 만 확인 하시고  mac 을 확인하기 위해서는 mac 에 visual studio 2019 을 설치해서 실행하는것이 개발하기  편하다. 

xamarin webview javascript 적용

이미지
 xamarin 으로 webview 를 실행하면  javascript 가 동작하지 않는다. 그래서, 공식 사이트에도 hybridwebview 형태로 해서 설명을 하고 있다. 그리고, github 에도 예제가 있긴 하다. 그런데, 공식 사이트에도 그렇고 github 예제도 그렇고 빌드하고 run 되는 소스는 아니다. 답답하다.  돌아가는 소스가 있어야 그냥 가져와서 사용하지 이건 간단한거 하나 만드는 것도 어려워서 할수 가 없다. github에 있는 소스 https://github.com/mistrypragnesh40/HybridWebView 이 걸 그냥 받아서 실행했다. 안돌아 간다.  이유는 모른다. 그래서, 신규로 프로젝트를 만들어서 해당 소스를 하나씩 그냥 가져와서 적용했다. 돌아간다. 결과 화면이다. 코드 적용하는데 어려운 점은 왜 이렇게 적용해야 하는지 대해서 모르겠다는 것이다. 그냥 소스에 있는 내용 그대로 따라해서 동작만 하면 된다. android 에서도 webview 를 그냥 사용하지 않고 extension 해서 사용하니깐 그냥 그런가 보다 하고 사용하면 된다. 아이폰용도 동일하다 그냥 안돌아가니깐 신규로 만든 프로젝트에 해당 내용 적당히 붙여서 돌아가도록 하면 된다. 여긴 내가 만든 예제이다. 앞에 있는 github 랑 동일한데 돌아간다는 것이다. wkyoon/HybridWebViewExample (github.com)

Xamarin WebView

이미지
Xamarin WebView 예제이다.    https://github.com/xamarin/xamarin-forms-samples/tree/main/WorkingWithWebview  해당 소스만 다운로드 받아서 실행하고 싶은데 안된다. 전체 소스를 다 받아서 해당 프로젝트만 열어서 실행해 보았다. 안된다.  그럼 할수 있는건 그냥 새로 만들어서 따라 하기 이다. 신규 프로젝트를 만든다. Mobile App 를 선택하고  프로젝트 이름을 XamarinWebview 으로 한다. 기존 소스를 보니 그냥 Tabbed 로 만든것 같다. 그래서 프로젝트 만들때도 그냥 Tabbed 로 만든다. github 에서 다운로드 받아서 실행한 프로젝트와 신규로 만든 프로젝트가  뭔가 많이 다르다. 이거 github 에 올린 놈은 개별로 sln 파일 열어서 돌아가는지 확인은 해 봤는지 궁금하다. 일단 그렇다 치고  신규로 만든 놈을 그냥 빌드해서 실행해 본다. 아무것도 클릭한것 없고 그냥 프로젝트가 만들어지면 위와 같이 나와야 한다. Window PC 에서 하기 때문에 IOS 는 에뮬이 안되고 Android 는 동작하기 때문에  에뮬을 Android 로 지정해 놓았기 때문에 위와 같이 나와야 한다.  일단 run 한다. 에뮬이 위와 같이 나온다.  Tab 형태로 2개를 할수 있도록 되어 있다. 일단 자동 생성되는 예제이기 때문에 필요없는 부분을 삭제한다.  폴더 4개를 삭제한다. Model Services ViewModels Views Content Page 를 추가한다. 여기에 있는 것 처럼 LocalHtml LocalHtmlBaseUrl WebPage WebAppPage  이렇게 4개를 만든다. Add 파일을 해서 Content Page (C#) 을 선택해서 만든다. 추가하는 방법은  프로젝트를 선택하고 Add를 선택해서 New Item 을 선택한다. 4...