yarn install ubuntu 20.04

이미지
 yarn install ubuntu 20.04 wrong installed screen just follow this command  curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt update sudo apt install yarn yarn --version

vscode 에서 WSL 개발환경 동작하지 않는 경우

이미지
어제 윈도우 업데이트를 하였다. 그냥 늘 하던 거라. 그냥 업데이트 하였다. 그 결과 vscode 에서 wsl 환경으로 세팅한 개발환겨이 열리지 않는다. 이게 세팅하고 운영하기 편해서 그냥 사용했는데  이런 문제가 발생할줄 몰랐다. vscode 의 문제인지 아니면 내컴만 문제인지 모르겠다. docker 를 이용해서 구성하는 방법도 있지만  이게 더 간단한 방법이고 ( 나에게는)  쉬워서 사용했는데 솔루션을 변경할 필요가 있는것 같다.   아~~~ 아마도 업데이트로 인하여 VS code server 를 다시 설치해야 하는 이슈가 발생한 것 같다. 당연히 vscode 프로그램에서는 그냥 timeout issue 가 발생할 수 있을 것으로 예상된다. 왜  평상시 같은 경우 서버에서 code server 를 받는 일이 많지 않지만 윈도우 업데이트의 영향을 받을 경우 모든 WSL 환경의 vscode project 는 무조건 code server 를 다운로드 받아서 다시 설치해야 하는 이슈가 있기 때문에 해당 서버가 맛탱이가 갈거라 예상된다. 돈주는 회원부터 사탕을 드릴거고 무료사용자들은 돈주고 사용하는 회원처리한 후 줄서서 다운로드 받아야 정상적으로 vscode 가 동작할 것이라 예상된다. 위에 있는 내용은 terminal 에서 wsl 접근하여 프로젝트에 code . 을 실행한 화면이다. 5% 에서 그냥 멈춘다. code . 이 뭔지 알고 싶으면 아래 링크를 들어가 보시면 된다. https://docs.microsoft.com/ko-kr/windows/wsl/tutorials/wsl-vscode

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" 해당 라...