Jigsaw – Sky High [HQ]
Leave a reply
Category Archives: 미분류
WPF 잡담
몇달째 WPF 로 윈도즈 데스크탑 네이티브 앱을 만드는 일을 하고 있습니다. 며칠전 경험을 기록으로 남기려고 몇자 적습니다. 아시는 바와 같이 WPF 는 주로 XAML 이라는 마크업 언어를 통해 UI 를 구성합니다. CSS 와 용도가 비슷한 Style 이라는 Tag 를 통해 UI 컨트럴들의 모양을 조정할 수 있어요. Style 만 따로 모아서 리소스 파일처럼 불러오고, Style 은 원하는 Tag (사실 WPF 에선 이게 Class – Type 입니다) 를 조질 수(?) 있어요. 웃기게도 CSS 와 유사한 문제점들이 생깁니다. 여러가지 조건에 의해 선언한 Style 이 무시당하는 거죠. CSS 는 최근 웹브로우저들의 훌륭한 개발자모드로 인해 대충 실시간으로 어떻게 무시(?) 당하고 있는지 구경할 수 있잖아요. Visual Studio 2015 까지는 내장된 Runtime Style Monitor 가 없어서 외부 툴들을 썼지만 VS 2017 부터는 내장 Tool 로 Style 이 Runtime 에서 어떻게 적용되고 있는지 구경할 수 있게 되었죠. 얼마전 이것으로 작업을 진행하다가 뭔가 이상하다고 생각되었습니다.
위 그림은 특정 Style (여기서는 DialogHost 에 적용되는) 의 속성을 디버깅 모드로 실행한 상태에서 보고 있는 것인데요. 제 기억에는 예전에 주황색 점선 영역에 뭔가 보였던거 같은데 이게 안보이는 겁니다. 다른 프로젝트들을 열어서 이것 저것 뒤지다가 발견한 것이 아래 그림의 것입니다.
요즘 제가 작업중인 프로젝트에서 사용하는 오픈소스 XAML Theme 라이브러리인 Material Design In XAML 의 데모 프로젝트에서 어떤 UI 부분의 속성을 실행시에 열어본 화면입니다. 위의 그림에서 보는 바와 같이 노란 네모 안에 이전 그림과 다른 파란 텍스트가 한줄 보입니다. 이게 현재 보고 있는 Style 이 선언된 XAML 파일을 뜻하며 파란 텍스트를 누르면 그 파일을 볼 수 있습니다. 같은 프로젝트 안에 소스 코드가 있어야 저 Style 의 XAML 소스 코드를 볼 수 있는 파란 텍스트 링크가 생길 것이라고 추측해 볼수 있습니다. 왜냐하면 제가 만들고 있는 앱은 Material Design In XAML 라이브러리를 NuGet Package 로 불러서 사용하니 당연히 제 프로젝트 안에는 그 라이브러리의 소스 코드가 없습니다. 추측이 사실인지 조사를 해봤습니다.
Material Design In XAML 는 GitHub 에 올라가 있으니 소스코드를 Clone 해서 위 그림처럼 쉽게 구경해 볼 수 있습니다. Clone 한 소스에서 처음 그림에서 보여드렸던 DialogHost 의 Style 을 정의하는 XAML 파일을 아래 그림처럼 이름을 바꿔서 제 프로젝트로 복사를 했습니다.
그리고 WPF 앱의 리소스 구조를 정의하는 App.xaml 에서 기존 Material Design In XAML NuGet Package 의 DialogHost 의 Style 을 불러오는 부분을 comment out 시키고 제 프로젝트 폴더에서 복사한 XAML 을 불러오도록 아래 그림처럼 바꿨습니다.
이제 첫번째 그림에서 구경하던 DialogHost 의 속성을 Runtime 에서 열어봤습니다.
위 그림을 보시면 Style 을 정의한 파일의 파란 텍스트 링크가 이제 보입니다. 파란 텍스트를 누르면 당연히 XAML 소스 코드로 이동합니다. 이런 탐구 생활 정말 재밌습니다. ㅋㅋㅋ 잡담은 계속될 예정이에요.
10월 마지막 밤 단상
IU 가 부르는 이용의 잊혀진 계절
퇴근 후, 작은 녀석 할로윈 ‘Trick or Treat’ 하는 것 따라 다니는 것을 마치고 설거지하고 리사이클 분류하고 나서 컴퓨터 앞에 앉았더니, 10시가 넘었군요. 올해도 열달이 지나가고 이제 두달 남았습니다. 올해가 시작되었을 때 여러가지 New Year’s Resolution 를 번지르르하게 세우지만 역시 지킨 건 별로 없네요. 특히 소프트웨어 개발자로 새 언어나 새 프레임웍을 마스터하고 회사 프로젝트나 개인 프로젝트에 적용해 보는 계획을 매년 세웠을거에요. 하지만 아직도 2달이나 남았네요. 하루에 1시간을 내면, 한달에 20시간 정도는 공부할 수 있겠죠? 그래서 이것 저것 뒤지다가 적당한 시간이 필요한 온라인 강좌하나 등록했습니다. 거금 CAD$15 가 나갔습니다.
Udemy 에 Vue.js 웹프레임웍 강좌중 한가지. 18시간 짜리
과연 잘 끝낼수 있을지 저도 궁금하군요. ㅋㅋㅋ 여하튼 공개적으로 뭘한다고 했으니 쪽팔리지 않으려면 열심히 해야겠군요. 두달 남은 올해도 뭔가 하나 완료해 보시기 위해 시도해 보셔요. 뭐 몇개씩 해놨다면 할말 없고요. ^^;;;
Ionic 개발자 2017년 상반기 설문 조사 요약
2017년 2월~6월 약 만3천명의 Ionic Dev Community 에서 한 설문 조사 결과 요약.
앱 동향
2년전엔 20% 가 네이티브로만 개발, 올해는 2.9% 가 네이티브로만 개발. 32.7% 는 2년후 완전히 네이티브를 버릴 것이라고… Ionic 으로 개발된 앱중 41.7% 는 일반 사용자용 앱이 아니라 기업 내부 업무용으로 개발된 것.
개발자중 3% 만이 스마트시계용 앱을 만들었으며, 2.7% 만이 스마트TV 용 앱을 만듬. 45% 는 테블릿용을, 94.3% 는 안드로이드용을, 83.2% 는 iOS 용을 만듬. 31.5% 가 Progressive Web App (네이티브 같은 UI 와 만듬새를 가진 웹앱) 을, 34.7% 는 Responsive Web App (한가지 소스로 어느 장비나 해상도에서도 환경에 맞게 UI 모양이 자동으로 변함) 을 만든다고 응답.
개발 도구 동향
41.3% 가 구글의 Firebase 를 Backend Service 로 이용. AWS 는 8.2% 가 이용. DB 도 역시 Firebase 가 1등. Backend 개발 기술로는 56.6% 의 Node.js 가 압도적으로 1위.
2년전에 나온 MS 의 비주얼 스튜디오 Code 는 계속 발전하여 작은 사이즈와 속도, 충실한 디버깅 환경으로 올해 조사에는 46.7% 로 IDE 부분에서 1위.
2년전에 나온 MS 의 비주얼 스튜디오 Code 는 계속 발전하여 작은 사이즈와 속도, 충실한 디버깅 환경으로 올해 조사에는 46.7% 로 IDE 부분에서 1위.
개발 성향
모바일 앱 테스트에서 아직 충분한 실장비 테스트가 이뤄지지 않은 것으로 보임. 65.1% 는 클라우드 기반의 장비 테스트를 해본적이 없다고 응답. 53.2% 가 업데이트는 아직 앱스토어나 구글 플레이등을 통해서 한다고. 일부 응답자는 실시간 원격 업데이트를 고려중이라고… 44% 가 에러와 크러쉬를 트랙킹 하지 않는답니다. ^^;;;
Ionic 으로 개발하는 사람들은 누구?
80% 가 웹개발자이며, 10.8% 가 모바일 앱 초보자. 75.2% 가 상용앱 개발중. 41.9% 가 고객을 위한 앱을 만드는 개발자.
질문별 1위
다중 응답 질의가 많으니 자세한 등수는 꼭 원본 페이지를 참조하세요.
Backend Technology
Push Notifications – Firebase/GCM (41.3%)
User Authentication – Custom oAuth (43.7%)
Backend DB – Self-hosted SQL DB (57.4%)
Backend App Technology – Node.js (56.6%)
…
Tools & Testing
IDE – VS Code (46.7%)
Prototyping tool – I don’t use (48.3%)
Beta test & Gathering Feedback – No (40.9%)
Distribution – Online Store [App Store, Google Play] (81.5%)
Meta stuff
Development Platform – Mac (57.9%)
How big is your employer? Self-employed (40.3%)
Who are you building apps for? App for a client (41.9%)
What kind of apps are you building – Consumer General (60.7%)
Target Platform – Android (94.3%)
AngularJS Material 의 md-select 안에 이미지 표시하기
AngularJS Material 은 AngularJS 용 UI Component 로 여러가지 UI 구성 요소를 편하게 표시할 수 있도록 도와줍니다. 그중에 List box 를 표시하는 md-select 라는 directive 가 있는데요. 리스트중 선택요소를 선택하면 그림을 그 옆에 표시할 수 있습니다.
<md-select>
<md-option>
<img>
</md-option>
</md-select>
이런 식으로 하면 선택요소 바로 옆에 따라 다니며 표시하게 됩니다.
<md-select>
<md-option>
</md-option>
<img>
</md-select>
위와 같이 <md-option> 밖으로 <img> 를 빼버리면 리스트박스 안에 일정한 위치에 고정해 표시할 수 있습니다. 아래 첨부한 비디오와 코드는 요즘 제가 하는 작업중에 일부인데요. 위에서 얘기한 변경 사항을 보여줍니다.
Firefox 55 beta 와 Selenium IDE 2.9
Firefox 에서 구동되는 Web UI Test 도구인 Selenium IDE 에서 Test Suite 파일이 안열리는거라. 그러고 보니 메뉴 이곳 저곳에서 에러. 문제는 얼마전 WebVR 이라는 새로운 기능을 테스트하려고 설치한 Firefox 55 Beta (정발은 8월 예정) 가 문제. 다시 현재 정식 릴리스인 54.0.1 로 Rollback 하니 Selenium IDE 정상 작동. 일도 많은데 가지가지 한다.
NTFS-3G
맥에서 Windows NTFS 파티션에 Write 를 하려면 Tuxera 나 Paragon 같은 곳에서 만든 유료 Tool 을 깔아서 쓴다. Tuxera 는 모르겠고 얼마전에 OS 를 Sierra 로 올리고 났더니 Transmission 같은 BitTorrent Tool 에서 파일을 NTFS 파티션으로 받으며 그 파티션에 있는 다른 파일을 읽기 (비디오 파일을 본다던지) 를 하면 Paragon 이 뻗어버리거나 시스템이 리부팅하는 현상이 자꾸 일어나서 Paragon 에 문제를 리포트 했고 Paragon 에서 요청하는 로그 파일을 몇번 보냈지만 아직 해결될 기미는 안보인다. 그래서 오늘은 우선 Paragon 을 제거하고 설치 방법이 살짝 귀찮고 쓰기 속도가 좀 느린, 무료 툴인 NTFS-3G 라는 것을 깔았다. 문제를 Reproduce 해보려고 시도하고 있지만 현재까지 Paragon 에서 보이던 문제는 안 일어나고 있다. Paragon 이나 Tuxera 나 모두 이 NTFS-3G 라는 오픈 소스가 기반인데… 유료이다 보니 기능을 많이 달면서 문제가 생긴거 같네. 다음주까지도 못 고치면 환불을 받든지… ㅋㅋㅋ
NTFS-3G Github URL: https://github.com/osxfuse/osxfuse/wiki/NTFS-3G
f(x) 새 싱글 All Mine
성괴가 되는 과정