wonsolution.kr

 기존 로그인 시스템 다시 구성 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 을 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)

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...

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

socket.io chat 예제를 nodejs 로 구현한 것은 이전 블러그에서 언급하였다. 그래서, nodejs 로 서버로 만들고 reactjs 로 클라이언트를 구현하는 예제를 하나 실행해 보았다. 동작하지 않는다.  그냥 locahost 에 3000 번 포트와 30005번 포트 이런식으로 만들어서 실행햇는데도 cors 이슈를 만나게 되었다. cors 이슈에 대해서는 구글에 cors 검색하면 무지하게 많이 나온다. 간단히 말하면 서버1의 내용을 서버2에서 호출하면 접속할수 없다고 하면서 발생하는 문제이다. 이번 예제로 동일한 이슈에 대한 내용이다. 아래 블러그에 내용을 그대로 실행 보았다. https://www.valentinog.com/blog/socket-react/ 아쉽게도 소스는 github 가 없었다.  그래서 해당 블러그에 있는 내용을 그대로 가져와서 실행해 보았다. 서버는 아래와 같이 만들었다. mkdir socket-io-server cd socket-io-server npm init -y npm i express socket.io 1. app.js 파일을 만들고 아래의 코드를 넣는다. 내용은 웹서버를 만들고 socket.io 를 만들어서 접속하면 시간정보를 내려주는 것이다. const express = require ( "express" ) ; const http = require ( "http" ) ; const socketIo = require ( "socket.io" ) ; const port = process . env . PORT || 4001 ; const index = require ( "./routes/index" ) ; const app = express ( ) ; app . use ( index ) ; const server = http . createServer ( app ) ; const io = ...