won-solution.com

 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 의 문제인지 아니면 내컴만 문제인지 모르겠다. 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

 안드로이드 스튜디오를 가능 업데이트 했다. 아~~~  안된다. 신규 프로젝트를 만드니깐  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...

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년도에 적으신것으로 봐서 현재는 이걸 무조건 사용하지 않는다.) 그냥 이전에는 이렇게도 했다 정도 알고 가자. 코트링 소스를 자바로 변환해서 변경되는 내용을 확인하고 반대로 하고 이런식으로 확인 하신것 같다.

  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 필요한 부분만 가져와서 적용하기로 한다. 기존 소스 확인 한 결과 이 걸 그냥 사용할수는 없을것...

인터넷 하다가 찾았다. 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 화면에 대한 정보를 한눈에 볼수 있는 페이지 이다.

 채팅 예제 하나 올려 볼라고 시작한 일이 커졌다. 기존 소스가 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 에 적용할 건지에 대해 간...

이 글은 2022년에 작성한 RecyclerView 예제를 2026년 기준으로 전면 개정한 글입니다. 기존 URL과 검색 의도는 유지하면서 깨진 이미지와 실행되지 않는 코드를 제거하고, ViewBinding·ListAdapter·DiffUtil을 연결한 완성형 Kotlin 예제로 다시 작성했습니다. Android RecyclerView Kotlin 예제: ViewBinding과 ListAdapter로 목록 만들기 RecyclerView 는 많은 데이터를 목록이나 그리드로 표시할 때 화면 밖의 아이템 뷰를 재사용하는 Android View 컴포넌트입니다. 모든 행을 한꺼번에 만들지 않기 때문에 메모리 사용과 뷰 생성 비용을 줄일 수 있습니다. 이 글에서는 단순히 목록이 보이는 데서 끝나지 않고 다음 요소를 하나의 예제로 연결합니다. 구성 요소 역할 RecyclerView 목록을 화면에 표시하고 아이템 뷰를 재사용 LinearLayoutManager 아이템을 세로 방향으로 배치 ViewHolder 한 행의 ViewBinding을 보관 ListAdapter 현재 목록을 관리하고 변경 목록을 제출받음 DiffUtil.ItemCallback 이전 목록과 새 목록의 차이를 계산 ViewBinding findViewById() 없이 XML 뷰에 안전하게 접근 Android 공식 문서는 새 UI에 Jetpack Compose 사용을 권장하며 RecyclerView 라이브러리는 유지보수 모드입니다. 다만 기존 XML 기반 앱을 유지하거나 View 시스템이 필요한 화면에서는 RecyclerView가 여전히 중요한 선택입니다. 완성할 예제 예제 화면에는 사용자 프로필 목록이 표시됩니다. 아이템을 누르면 즐겨찾기 상태가 바뀌고, 전체 목록이 아니라 변경된 행만 갱신됩니다. text RecyclerViewSample/ ├─ MainActivity.kt ├─ Profile.kt ├─ ProfileAda...

전면 개정 안내 (2026-07-24) 2022년에 작성한 설치 중심의 글을 Socket.IO 4.x와 ES Modules 기준으로 다시 작성했습니다. 이번 글을 끝까지 따라 하면 방에 입장하고 메시지를 주고받는 웹 채팅을 실행할 수 있습니다. Socket.IO 채팅의 핵심은 단순히 emit() 한 번을 호출하는 것이 아닙니다. 서버가 사용자를 식별하고, 올바른 방에 메시지를 전달하며, 연결이 끊겼을 때의 상태와 중복 전송까지 다뤄야 합니다. 이 글에서는 먼저 학습용으로 충분히 작으면서도 다음 기능을 갖춘 채팅을 만듭니다. 닉네임과 방 이름을 입력해 입장 같은 방의 사용자에게만 메시지 전송 서버에서 입력값과 방 입장 여부 검증 ACK(승인 응답)로 전송 성공 여부 확인 일시적인 연결 끊김 후 상태 복구 메시지 ID를 이용한 화면 중복 표시 방지 Socket.IO와 WebSocket은 같은 것일까? 완전히 같지는 않습니다. WebSocket은 양방향 통신 프로토콜이고, Socket.IO는 그 위에서 이벤트, 자동 재연결, 승인 응답, 방(Room), 브로드캐스트 같은 기능을 제공하는 라이브러리입니다. 환경에 따라 HTTP long-polling으로 연결한 뒤 WebSocket으로 업그레이드할 수도 있습니다. 따라서 순수 WebSocket 서버에 Socket.IO 클라이언트를 바로 연결할 수는 없습니다. 서버와 클라이언트가 모두 Socket.IO 프로토콜을 사용해야 합니다. 항목 WebSocket Socket.IO 통신 방식 표준 프로토콜 이벤트 기반 라이브러리 자동 재연결 직접 구현 기본 제공 방과 브로드캐스트 직접 구현 기본 제공 ACK 직접 메시지 규약 설계 콜백 방식 제공 전송 폴백 없음 long-polling 후 업그레이드 가능 1. 프로젝트 만들기 Node.js의 지원 중인 LTS 버전을 사용합니다. 빈 폴더에서 다음 명령을 실행하세요. bash ...