won-solution.com

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

이 글은 2022년에 작성한 Xamarin.Forms WebView 예제를 2026년 기준으로 전면 개정한 글입니다. Xamarin 지원은 2024년 5월 1일 종료되었으므로, 기존 URL과 검색 의도는 유지하면서 현재 지원되는 .NET MAUI로 모든 예제를 다시 작성했습니다. Xamarin WebView 예제를 .NET MAUI로 다시 만들기 모바일 앱 안에서 웹 페이지를 표시하려면 WebView 를 사용할 수 있습니다. .NET MAUI의 WebView는 다음 세 가지 콘텐츠를 모두 처리합니다. 목적 사용할 소스 대표적인 용도 인터넷 페이지 표시 UrlWebViewSource 도움말, 공지, 웹 서비스 문자열로 만든 HTML 표시 HtmlWebViewSource 동적 안내문, 간단한 리포트 앱에 포함한 HTML 표시 로컬 파일 오프라인 도움말, 약관 이 글에서는 새 프로젝트를 만든 뒤 위 세 가지 방법을 구현하고, 로딩 상태·오류·뒤로 가기·외부 링크 제한까지 연결합니다. Xamarin.Forms 대신 .NET MAUI를 사용하는 이유 Microsoft의 Xamarin 지원은 2024년 5월 1일 종료되었습니다. Xamarin.Android와 Xamarin.iOS는 .NET for Android 및 .NET for iOS에 통합되었고, Xamarin.Forms의 후속 프레임워크는 .NET MAUI입니다. 기존 기술 현재 선택 Xamarin.Forms .NET MAUI 여러 플랫폼 프로젝트 단일 프로젝트 구조 플랫폼별 Effect/Renderer Handler 기반 사용자 지정 Xamarin.Forms WebView .NET MAUI WebView 기존 Xamarin.Forms 프로젝트를 유지보수하는 경우에도 보안 업데이트와 최신 Android·iOS 도구 지원을 위해 .NET MAUI 이전 계획을 세우는 편이 좋습니다. 예제 프로젝트 만들...

 Xamarin.Essentials 기능 가이드 이다. https://docs.microsoft.com/ko-kr/xamarin/essentials/?WT.mc_id=dotnet-35129-website James 아저씨의 Essentials 예제 소스이다. https://github.com/jamesmontemagno/app-essentials Xamarin Developers 에 가면 아래 링크를 통해 예제 설명을 확인 할 수 있다. https://www.youtube.com/playlist?list=PLM75ZaNQS_Fa6UdCieXUcVubIV3-MDXDV 기능 가이드에는  1. 가속도계 2. 앱 작업 3. 앱 정보 4. 앱 테마 5. 기압계 6. 배터리 7. 클립보드 8. 색 변환기 9. 나침판 10. 연결 11. 연락처 12. 흔들림 탐지 13. 디바이스 디스플레이 정보 14. 디바이스 정보 15. 전자 메일 16. 파일 선택기 17. 파일 시스템 도무이 18. 손전등 19. 지오코딩 20. 지리적 위치 21. 자이로스코프 22. 햅틱 피드백 23. 시작 관리자 24. 자력계 25. MainThread 26. 지도 27. 미디어 선택기 28. 브라우저 열기 29. 방향 센서 30. 권한 31. 전화 걸기 32. 플랫폼 확장 33. 기본 설정 34. 스크린샷 35. 보안 스토리지 36. 공유 37. SMS 38. 텍스트 음성 변환 39. 단위 변환기 40. 버전 추적 41. 진동 42. 웹 인증서 42개의 가이드 있다. 해당 소스에 대한 설명이 있고 영상이 있다. Youtube 로 가면 해당 채널이 열리고  채널에 있는 해당 영상을 찾아가면  영상 밑에 있는 정보에 souce code 에 대한 정보 링크가 걸려 있다. 가속도계는  https://github.com/xamarin/xamarin-forms-samples/tree/main/Sensors/TiltMaze 에 해당 소스가 있다. 그리고, 링크를 더 ...

정의  MS 에서 제공하는 cross-platform UI toolkit 이다. 배우는 이유 C# 을 이용해서 android, ios application 을 개발할 수 있기 때문이다. Xamarin 시작하는 방법 1. 설치 아래 링크를 보고 따라 하면 설치된다.  https://docs.microsoft.com/en-us/xamarin/get-started/installation/?pivots=windows Mobile development with .NET 을 설치한다. 2. 예제 따라하기 아래 링크는 Quickstarts 이다. https://docs.microsoft.com/en-us/xamarin/get-started/quickstarts/ 위 그림중에 Create a Xamarin.Forms application 을 선택해서 따라 하면 된다. 내용은 Project 를 하나 만들고 세팅을 Tabbed 로 시작하여 솔루션 explorer 에서 폴더를 4개 삭제하고 Models Service ViewModels Views  이렇게 4개를 삭제하고 NotePage 라는 이름으로 Content Page 를 추가하고  NotePage.xaml 파일에 있는 내용을 지우고  예제에 있는 code 를 복사해 넣는다. 내용은 Editor 하나에  Grid 적용하여 Button 2개 추가하는 내용이다. 이에 해당하는 소스  NotePage.xaml.cs 에 코드를 수정한다. 하나도 Content Page 를 추가한다. AboutPage 로 이름을 지정한다. 동일하게 .xaml 와 .xaml.cs 를 수정한다. 그리고, tabbed 프로젝트로 하였기 때문에 page를 연결하기 위해 AppShell.xaml 파일을 열어서 변경한다. TabBar 아래에 ShellContent 를 수정한다. 동일하게 AppShell.xaml.cs 도 연다 기존 코드를 그냥 삭제하고 InitializeComponent() 만 호출한다...

 xamarin 코드 샘플 여기를 참조하시면 됩니다. https://docs.microsoft.com/ko-kr/samples/browse/?term=Xamarin.Android&terms=Xamarin.Android&languages=csharp 프로그램 언어에서 C# 을 Check 하고 검색하세요. GITHUB 에 있는 Sample 위치  https://github.com/xamarin/monodroid-samples C# 으로 cross platform build 해서 android 와 ios 를 같이 하고 싶으신 분들을 위한 선택입니다.

 window 2019 server 를 설치할 경우  기본 browser 가 explorer11 이다. 이건 아무것도 동작하지 않는다. 불행중 다행인 것은 인터넷은 된다는 것이다. 불편해서 아무것도 못한다. edge 를 설치할려고 하니 안된다. 그래서, 찾아 보았는데 간단한 방법이 없다. 가장 쉬운 방법을 알려 드리도록 하겠다. 설정 -> 인터넷 옵션을 선택한다. Security 탭을 선택하고  trusted sites 를 선택한다 그리고, sites 를 클릭한다. 그럼 Add 버튼이 보일 것이다. https://*.google.com 을 추가한다. Close 하고  OK 해서 종료한다. 그리고, explore 를 다시 시작한다. 그리고,  https://www.google.com/chrome/ 여기로 접속해서 다운로드 받아서 사용하면 된다.

npm install and n install ( ubuntu linux) 1. sudo apt install npm 2. sudo npm install - g n 3. sudo n stable yarn install 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 - get update sudo apt - get install yarn pm2 install sudo npm install pm2 -g

mysql server 를 구축하면 만나는 2가지 문제 1. 한국어 설정 2. time_zone 설정 1. 한국어 설정은 workbench 에서 직접하면 된다. 2. time_zone 설정은 블러그를 보고 따라 했는데 안타깝게도 control+c control+v 가 동작하지 않아서 작성한다. 확인하는 방법 mysql> select @@global.time_zone, @@session.time_zone; 적용하기 2가지 방법이 있다고 했는데 한가지만 소개한다. mysql>SET GLOBAL time_zone = 'Asia/Seoul' mysql>SET time_zone='Asia/Seoul' 다시 확인하시면 변경되어 있는 것을 확인할수 있다.

 aws ec2 로 서버를 하나 만들고  그 내용을 그대로 사용하기 위해 다시 이미지를 만들었다. 그리고, 만든 이미지로 또 다른 ec2 서버를 생성하였다. 발생하는 문제는 mysql workbench 로 ssh 를 이용해서 접속을 시도하니 public xxx 형태의 접속 문제가 발생하였다. 환경은 window10 이다. 처음 확인한 것은 복사한 이미지 이기 때문에  서버에 있는  /home/ubuntu/.ssh/authorized_keys 이다. 당연히 동일하다 ( 이미지를 복사하여 생성하였기 때문에 당연하다) 그럼 문제는 어디에 있는가?  윈도우에서 찾았다. 사용자에서 .ssh 폴더가 존재한다. 이 mysql workbench 가 이 폴더에 있는 known_hosts 를 사용한다. 그래서 한 조치는 ec 형태로 시작하는 모든 라인을 삭제한 것이다. 그럼 다시 접속일 시도하면 신규로 하나 생성하기 때문에 문제가 발생하지 않는다.

Craco 란? Craco (Create React App Configuration Override)는 create-react-app(CRA)을 쉽게 설정하기 위해 만들어졌다 이게 뭔말인가???  읽어도 모르겠다. 무슨 뜻인지. ==> 이걸 사용하기 위해 만들어진 내용이다. reactjs 에서 component 와 같은 것을 import 할때 아래와 같이 한다. import Abc from './componet/Abc'   이 내용을 다음과 같이 사용하기 위해 설정한다. import Abc from '@component/Abc'   절대 경로를 지정해 놓고 사용하기 위해 포함 시키는 module 이다. 설치하는 방법 yarn add @craco/craco yarn add craco-alias -D package.json 을 수정 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }, base 경로에  jsconfig.paths.json 생성한다. ( 나는 javascript 로 개발하기 때문에 jsconfig.paths.json 이다. 만약 typescript 로 한다면 tsconfig.paths.json 일 것이다. ) { "compilerOptions": { "baseUrl": "./", "paths": { "@components/*": ["src/components/*"] } } } 여기 다음의 내용이 참조하는 블러그마다 제각각이다. 일...

전면 개정 안내 (2026-07-24) 2021년의 Create React App과 Socket.IO 3.x 예제를 Vite, React, Socket.IO 4.x 기준으로 다시 작성했습니다. CORS 설정뿐 아니라 이벤트 리스너 중복, React Strict Mode, 재연결 상태까지 함께 다룹니다. React 개발 서버와 Socket.IO 서버를 서로 다른 포트로 실행하면 브라우저 기준으로 출처(origin)가 달라집니다. text React: http://localhost:5173 Socket.IO: http://localhost:4001 출처는 프로토콜, 호스트, 포트의 조합입니다. 포트 하나만 달라도 교차 출처 요청이므로 Socket.IO 서버가 React 개발 서버를 명시적으로 허용해야 합니다. 하지만 CORS만 고친다고 React 연동이 완성되는 것은 아닙니다. 컴포넌트가 다시 마운트될 때 리스너를 중복 등록하지 않도록 정리하고, 연결 끊김과 재연결을 UI에 표시해야 합니다. 이번 글에서는 1초마다 서버 시간을 보내는 작은 예제로 이 전체 흐름을 구현합니다. 완성 구조 text react-socketio-example/ ├─ server/ │ ├─ package.json │ └─ server.js └─ client/ ├─ .env.development └─ src/ ├─ App.jsx ├─ App.css └─ socket.js 구성 요소 역할 Socket.IO 서버 연결마다 타이머 생성, clock:tick 전송 CORS 허용 목록 React 개발 서버의 정확한 origin만 허용 socket.js Socket.IO 클라이언트 인스턴스를 한곳에서 생성 App.jsx 연결 상태와 이벤트를 React 상태로 반영 useEffect 정리 함수 등록한 리스너 제거와 연결 종료 1. Socket.IO 서버 만들기 먼저...