하이브리드 앱을 개발하다 보면 디버깅을 어떤 방식으로 할까? 고민을 많이 하게 된다. 가장 보편적인 방법인 크롬 인스펙터로 연동해서 디버깅 하는 방법을 살펴보자. 순서는 다음과 같이 디버깅할 수 있다. 1. IDE에서 에뮬레이터 또는 디바이스로 하이브리드 앱 실행 2. 크롬 실행 후 주소창에 chrome://inspect 입력 3. 인스펙트할 디바이스 선택 4. 크롬 개발자 도구 켠 후 디버깅 아래 그림처럼 디바이스가 목록에 나오며, inpect 를 누르면 디버깅 창이 뜨게 된다. 아래와 같이 디버깅 창을 통해서 각 컴포넌트와 연관되는 소스도 보고, CSS도 수정해보고, 오류도 찾아보며 즐거운 개발자 생활을 해보도록 하자.

안드로이드에서와 마찬가지로 Vue(이하 뷰)에서도 라이프 사이클은 매우 중요한 부분이다. 컴포넌트가 생성 ▶ 파괴되는 과정에서 발생하는 각각의 라이프 사이클 훅 메서드를 적절히 활용해야 상황에 맞는 다양한 메서드를 응용하여 웹 또는 하이브리드 앱을 만들 수 있으며, 원하는 메서드를 적절한 타이밍에 실행할 수 있다. 아래는 뷰의 대표적인 라이프 사이클 훅이다. beforeCreate: 컴포넌트 인스턴스가 초기화되자마자 가장 먼저 실행되는 훅. 이 시점에는 데이터나 이벤트, 라이프 사이클 메서드 등이 아직 설정되지 않는다. created: 컴포넌트 인스턴스가 생성된 직후 실행되는 훅. 데이터와 메서드가 초기화되어 있어서 이 안에서 데이터를 변경할 수 있지만, 아직 DOM에 마운트되지 않아 DOM을 조작할 수..

VSCode를 사용하여 코딩을 하다보면, 문법적 오류 방지나 코드 문서화 등을 하기 위한 정적 분석 툴을 필요로 할 때가 있다. 이 때 필요한 것이 바로 ESLint 입니다. JSLint, JSHint 등의 툴도 있는데, 오픈소스이면서 확장성이 뛰어난 ESLint 가 대세가 되는 것 같습니다. VSCode 의 Extention에서 ESLint와 Prettier를 설치하도록 합시다. Settings 에 들어갑니다. ESLint로 가서 Edit in settings.json 클릭 아래 내용 붙여넣기(적당히 커스텀 해도 됨) "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "[vue]": { "e..

요즘 아주 핫한 OpenAI 사의 Chat GPT를 열심히 써보고 있다. 현재 무료로 사용가능한 것은 GPT-3.5 터모 모델로 꽤 쓸만한 성능을 보여주고 있다. 그러나 유료로 서비스 중인 GPT-4 모델은 얼마나 더 좋을까? 라는 의문이 들어 결국 유료 결제 후 사용해보고 있다. 제일 중요한 GPT-4 모델의 사용 가격은 20$/월 구독형이며, 부가세 10% 별도로 붙어 22$/월 가격 되시겠다. GPT-3.5와 GPT-4 모델 간의 차이는 대략 다음과 같다고 한다. GPT-4 모델에게 직접 물어본 답변을 인용한다. GPT-4는 GPT-3.5에 비해 여러 가지 개선점과 차별화된 특징을 가지고 있습니다. 정확한 세부 사항과 특징은 OpenAI의 발표와 문서에 따라 다를 수 있지만, 일반적으로 새로운 모델..

MX플레이어를 사용하다 보면 간혹 동영상 또는 음성 코덱이 맞지 않아서 영상만 나온다거나 소리만 나오는 경우가 발생한다. 이런 경우에는 MX플레이어 자체 코덱이 아닌 외부의 코덱을 사용해야만 문제를 해결할 수 있다. 아니면 지원되는 코덱을 구매하여 사용해도 되나, 능력자들은 오픈 소스 코덱을 이용하여 배포하고 있기 때문에 이를 활용해도 된다. 본 글에서는 능력자분들이 만든 오픈 소스용 코덱 사용법을 공유한다. 아래와 같이 지원되지 않는 오디오 형식 DTS이(가) 사용되었습니다. 오류가 뜨며 불완전한 재생이 되는 경우가 있다. XDA 포럼에서 검색하면 다음의 홈페이지에서 외부 코덱을 배포하고 있으며, 다운 받아서 적용시켜보도록 하자. https://github.com/USBhost/MX_FFmpeg/rel..