8 posts in total

Vue Js

Posts tagged

깃헙 액션으로 경계가 명확한 CI/CD 파이프라인 구현하기

by Justin Yoo · 4 min read

지난 포스트에서는 깃헙 액션의 기본적인 사항들을 이용해서 워크플로우를 만들어 봤다. 이 포스트에서는 이를 좀 더 응용해서 빌드와 배포를 분리시켜보자. 이 포스트에서 사용한 샘플 코드는 이 깃헙 리포지토리에서 다운로드 받을 수 있다. 빌드와 배포 분리하기 지난 포스트에서 언급한 바와 같이 가장 기본적인 네 가지 개념 – 워크플로우, 이벤트, 러너, 액션만 알면 깃헙 액션을 사용할 수 있다. 그런데, 빌드와 배포를 분리하기 위해서는 잡이라는 추가적인 개념을 알아두면 좋다. 잡은 러너와 액션의 논리 ...

깃헙 액션을 사용해서 애저 블롭 저장소에 정적 웹사이트 배포하기

by Justin Yoo · 6 min read

지난 11월 깃헙 액션이 공식적으로 사용 가능해졌다는 발표를 한 이후 이미 엄청난 양의 액션들이 마켓플레이스에 올라와 있다. 사용법도 굉장히 간단한 편이어서 몇가지 요령만 알아두면 금방 사용할 수 있다. 이 포스트에서는 간단한 정적 웹사이트를 개발한 후 이를 애저 블롭 저장소에 깃헙 액션을 통해 배포하는 과정에 대해 알아보기로 한다. 이 포스트에서 사용한 샘플 코드는 이 깃헙 리포지토리에서 다운로드 받을 수 있다. 애저 블롭 저장소 생성 및 준비 정적 웹사이트를 호스팅할 애저 블롭 저장소를 프 ...

HTML5 Media Capture API와 Azure Cognitive Services를 이용한 OCR 구현

by Justin Yoo · 7 min read

모바일 애플리케이션 구현에서 핸드폰의 카메라에 접근하는 방법은 여러가지가 있다. 이전 포스트에서는 HTML5의 getUserMedia API를 이용해 핸드폰의 카메라에 접근해 봤다. 하지만 이 API는 모바일 장치의 모든 브라우저에서 작동하는 것이 아니어서 이를 위한 폴백을 제공해야 한다. 반면에 HTML5 Media Capture API는 거의 모든 모던 브라우저에서 지원하기 때문에 모바일 장치에서 쉽게 구현이 가능하다. 이번 포스트에서는 Vue.js와 타입스크립트, 그리고 ASP.NET Cor ...

Vue.js + TypeScript 앱에서 IoC 컨테이너 사용하기

by Justin Yoo · 7 min read

애플리케이션을 개발하다보면 필연적으로 맞닥뜨릴 수 밖에 없는 상황이 몇가지가 있다. 그 중 하나가 바로 의존성 관리(Dependency Control)이다. 백엔드 애플리케이션에서는 다양한 제어 역전(IoC; Inversion of Control) 컨테이너를 이용해서 적용이 가능하다. 최신 프론트엔트 프레임워크 역시도 의존성 주입(DI; Dependency Injection)과 관련한 기능들을 포함하고 있다. 하지만 자바스크립트 언어의 특성인지는 몰라도 백엔드쪽의 IoC 컨테이너와는 다른 형식으로 ...

Vue.js + TypeScript + ASP.NET Core 앱에서 핸드폰의 GPS 정보 이용하기

by Justin Yoo · 3 min read

지난 포스트에서 HTML5 getUserMedia() API를 이용해서 핸드폰의 카메라에 접근하는 방법에 대해 논의해 보았다. 이번에는 핸드폰의 GPS를 이용한 위치 정보(geolocation)에 접근하는 방법에 대해 알아보도록 하자. 이 포스트에 쓰인 샘플 코드는 이곳에서 확인할 수 있다. navigator.geolocation API getUserMedia() API와 달리 geolocation API는 거의 모든 브라우저에서 사용 가능하다. 따라서 간단한 타입스크립트 코드를 이용하면 손 ...

Vue.js + 타입스크립트 + ASP.NET Core 앱에서 핸드폰의 카메라 API에 접근하기

by Justin Yoo · 5 min read

지난 포스트에서는 Vue.js와 TypeScript를 ASP.NET Core 애플리케이션에서 작동시키는 예제를 진행해 보았다. 이제 실제로 모바일 웹 앱을 개발해 볼 차례이다. HTML5를 지원하는 모던 웹 브라우저는 컴퓨터 혹은 스마트폰의 멀티미디어 장치에 접근이 가능하다. 대표적인 것이 바로 카메라와 마이크이다. 여러 방법으로 카메라와 마이크에 접근할 수 있으나 가장 핫한 방식은 Navigator.getUserMedia() API를 이용하는 방법이다. 이 포스트에서는 VueJs와 타입스크립트를 ...