18 posts in total

Front End-web-dev

Posts tagged

워드프레스에서 Gridsome으로 블로그 이전후 깃헙 액션을 통해 넷틀리파이에서 호스팅하기

by Justin Yoo · 7 min read

이 포스트에서는 워드프레스에서 gridsome으로 이전하고, 이를 깃헙 액션을 통해 넷틀리파이로 호스팅하는 전반적인 과정을 살펴보기로 한다. 왜 gridsome 인가? 워드프레스는 분명히 세상에서 가장 잘 만들어진 블로그 발행 도구중 하나임에는 틀림이 없다. 그런데, 가장 큰 문제라면 문제일 것이 일단 설치형 버전의 워드프레스라면 어딘가에 호스팅을 해야 하고 꾸준히 업데이트를 해 줘야 하는데, 이게 평소에 아무 문제가 없을 경우에라면야 크게 상관이 없지만 한번 꼬이기 시작하면 굉장히 골치가 아파진 ...

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와 타입스크립트를 ...

Vue.js + TypeScript 조합으로 ASP.NET Core 애플리케이션 개발하기

by Justin Yoo · 8 min read

지난 포스트에서는 ASP.NET Core 애플리케이션 위에서 Vue.js 프레임워크를 결합하는 것에 다뤘다. VueJs는 자체적으로 타입스크립트를 지원하므로 손쉽게 타입스크립트의 장점을 이용해서 웹 애플리케이션을 개발할 수 있다. 하지만 최근 VueJs를 이용한 앱 개발에 필수 요소라 할 수 있는 WebPack 라이브러리가 2.x 대로 버전업을 했음에도 불구하고 인터넷에 있는 많은 예제들은 여전히 WebPack 1.x 버전을 기준으로 언급하고 있다. 게다가 vue-cli를 이용해 설치할 수 있는 ...