Xamarin WebView 예제를 .NET MAUI로 다시 만들기

이미지
이 글은 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 이전 계획을 세우는 편이 좋습니다. 예제 프로젝트 만들...

.NET MAUI Essentials 기능 가이드: Xamarin.Essentials 이전

이 글은 2022년 Xamarin.Essentials 소개 글을 .NET MAUI의 플랫폼 통합 API 기준으로 전면 개정했습니다. 깨진 이미지를 제거하고 저장소, 연결 상태, 브라우저, 권한 사용 예제를 현재 네임스페이스로 바꿨습니다. Xamarin.Essentials의 주요 기능은 .NET MAUI에 포함되어 있습니다. .NET MAUI 앱에서는 별도 Xamarin.Essentials 패키지를 추가하지 않고 Microsoft.Maui.ApplicationModel , Microsoft.Maui.Devices , Microsoft.Maui.Networking , Microsoft.Maui.Storage 등의 API를 사용합니다. 먼저 보는 핵심 설정값은 Preferences , 민감한 값은 SecureStorage , 네트워크 상태는 Connectivity , 웹 주소 열기는 Browser , 런타임 권한은 Permissions 를 사용합니다. 플랫폼별 권한 선언은 코드와 별도로 필요합니다. 목적 대표 API 네임스페이스 일반 설정 저장 Preferences Microsoft.Maui.Storage 민감한 값 저장 SecureStorage Microsoft.Maui.Storage 네트워크 확인 Connectivity Microsoft.Maui.Networking 브라우저 열기 Browser Microsoft.Maui.ApplicationModel 권한 확인·요청 Permissions Microsoft.Maui.ApplicationModel 기기 정보 DeviceInfo Microsoft.Maui.Devices 1. Preferences로 일반 설정 저장 테마, 정렬 방식, 마지막 탭처럼 노출되어도 큰 문제가 없는 작은 값을 저장합니다. csharp using Microsoft.Maui.Storage ; Preferences . Default . Set ( ...

.NET MAUI 코드 샘플: Xamarin 예제를 현재 프로젝트로 옮기기

이 글은 2022년 Xamarin 코드 모음을 현재 지원되는 .NET MAUI 기준으로 전면 개정한 글입니다. 기존 URL은 유지하면서 깨진 이미지와 오래된 API를 제거하고, 새 프로젝트에서 바로 확인할 수 있는 예제로 바꿨습니다. Microsoft의 Xamarin 지원은 2024년 5월 1일에 종료되었습니다. 새 앱은 .NET MAUI로 만들고, 기존 Xamarin.Forms 앱은 화면과 기능을 나눠 단계적으로 이전하는 편이 안전합니다. 먼저 보는 핵심 Xamarin.Forms의 공용 UI 코드는 대부분 .NET MAUI의 XAML과 C# 구조로 옮길 수 있습니다. 네임스페이스, 프로젝트 구조, 시작 코드, 플랫폼 권한은 다시 확인해야 합니다. Xamarin.Forms .NET MAUI Xamarin.Forms Microsoft.Maui.Controls 여러 플랫폼 프로젝트 단일 프로젝트 구조 App.xaml , MainPage 같은 개념을 유지 DependencyService 기본 제공 의존성 주입 권장 Xamarin.Essentials .NET MAUI에 포함된 플랫폼 API 1. 새 프로젝트 만들기 .NET SDK와 MAUI 워크로드를 설치한 뒤 프로젝트를 만듭니다. bash dotnet workload install maui dotnet new maui -n MauiSamples cd MauiSamples dotnet build 워크로드와 대상 플랫폼 요구 사항은 .NET MAUI 설치 문서 를 기준으로 확인하세요. 2. 버튼과 상태를 바인딩하기 화면 코드 뒤에 상태를 많이 넣기보다 ViewModel에 명령과 값을 둡니다. 아래 예제는 CommunityToolkit 없이 실행할 수 있는 최소 형태입니다. csharp using System.ComponentModel ; using System.Runtime.CompilerServices ; ...

easiest way install nodejs

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 time_zone 설정

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 이미지 복사 후 mysql ssh 로 접속 시 문제

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

reactjs Craco ???

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/*"] } } } 여기 다음의 내용이 참조하는 블러그마다 제각각이다. 일...