Cordova와 npm의 버전 업데이트를 하는 방법을 알아보겠습니다. macOS(맥)에서 테스트되었습니다. Cordova의 버전 확인은 아래 명령어로 확인 가능합니다. $ npm view cordova version 10.0.0 위 명령어를 실행했는데 npm의 업데이트가 있다고 아래와 같은 메세지가 뜨는 경우, $ npm view cordova version 11.0.0 npm notice npm notice New major version of npm available! 7.10.0 -> 8.3.0 npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.3.0 npm notice Run npm install -g npm@8.3.0 to upd..
VSCode 도커(Docker)로 docker-compose 사용하여 웹IDE 구축 (lscr.io/linuxserver/code-server)
https://bundw.tistory.com/15 VSCode 도커(Docker)로 docker-compose 사용하여 웹IDE 구축 (cdr/code-server) VSCode(VisualStudio Code)는 마이크로소프트에서 제작된 가벼운 개발IDE입니다. 도커를 이용하여 VSCode를 웹브라우저에서 개발을 할 수 있는 컨테이너가 공개되어있어 구축하는 방법을 소개해보겠습니 bundw.tistory.com 이전에는 위 링크의 code-server 도커 이미지를 사용했지만, 우연치 않게 글쓴이의 마음에 좀더 든(?) 다른 도커 이미지를 사용하게 되서 글을 쓰게 되었습니다. 사용해면서 느껴본 바로는 큰 차이는 없는 것 같습니다. 다만 이 글에서 소개하는 도커 이미지가 좀더 깔끔한 느낌입니다. 그럼 V..
Docker를 사용하여 웹브라우저에서 간편하게 파일 탐색기를 사용하는 FileBrowser 이미지입니다. https://hub.docker.com/r/filebrowser/filebrowser Docker Hub hub.docker.com docker-compose를 사용하여 Docker 컨테이너를 실행하는 방법을 알아보겠습니다. docker-compose.yml 파일을 생성하고 다음 내용을 추가합니다. version: '3' services: filebrowser: image: filebrowser/filebrowser ports: - 80:80 volumes: - ./filebrowser/database.db:/database.db - ./:/srv user: 1000:1000 ./이 FileBrow..
Cordova(코르도바) 실행 로딩화면 Splashscreen(스플래시 스크린) 적용
Cordova의 Splashscreen는 Native App과 마찬가지로 Portrait(세로)와 Landscape(가로)를 지원합니다. 그리고 해상도 별로 각 다른 크기의 이미지를 지정해야 합니다. Android는 Portrait와 Landscape별로 이미지를 따로 지정해야 하지만, iOS는 Universal이라는 명칭으로 Portrait와 Landscape를 함께 지정해서 사용합니다. Android는 앱의 Orientation(화면방향)을 Portrait로 고정해서 Portrait Splashscreen만 지정해도 무관합니다. (반대로 Landscape도 가능) 그럼 Splashscreen을 적용하는 방법을 알아보겠습니다. 대상 플랫폼은 iOS(iPad+iPhone), Android 입니다. 이미지..
Cordova(코르도바) Hosted WebApp에서 Plugin 연동하기
https://bundw.tistory.com/64 Cordova(코르도바) Hybrid Hosted WebApp(하이브리드 웹앱) 베이스 만들기 이미 모바일 홈페이지가 있으며 앱으로 씌워서 스토어에 올리고자 할 경우, 웹앱의 기본이 되는 프로젝트를 Cordova로 만들어 보겠습니다. 대상은 Cordova가 지원하는 Android, iOS이며 설명은 Android 기 bundw.tistory.com 위 글에서 모바일 홈페이지를 웹앱으로 생성을 했지만 Cordova의 핵심 기능인 Plugin을 사용할 수 없습니다. Cordova는 cordova.js의 스크립트 시작으로 기능을 활성화하는데, 모바일 홈페이지로 이동하게 되면 페이지가 변경되어 cordova.js를 로드하지 않기 때문입니다. 따라서 웹서버에 C..
Cordova(코르도바) Hybrid Hosted WebApp(하이브리드 웹앱) 베이스 만들기
이미 모바일 홈페이지가 있으며 앱으로 씌워서 스토어에 올리고자 할 경우, 웹앱의 기본이 되는 프로젝트를 Cordova로 만들어 보겠습니다. 대상은 Cordova가 지원하는 Android, iOS이며 설명은 Android 기준으로 합니다. 별도로 아이콘 등의 요구 상황에 따라 이 베이스 프로젝트를 수정해서 사용하며, 이 글에서는 프로젝트 생성 및 세팅까지만 설명합니다. 요구사항 - Cordova CLI (https://cordova.apache.org/#getstarted 참고) - Android경우 Android Studio 및 Java JDK 설치 - iOS경우 OSX환경에서 XCode 설치 - SSL이 적용된 HTTPS 모바일 홈페이지 설치 Cordova 프로젝트를 생성하고 플랫폼을 추가합니다. > ..
윈도우 환경에서 Cordova의 Android를 사용하기 위해 Android Studio와 JDK가 설치는 되어있지만 환경 미설정 등의 원인으로 오류가 발생되었을 때 해결방법을 알아보겠습니다. 사전 요구사항 - Android Studio 설치 - JDK 8 설치 - Node.js 및 Cordova CLI 패키지 설치 ANDROID_SDK_ROOT 환경 변수 미설정 상황의 오류 > cordova build android Checking Java JDK and Android SDK versions ANDROID_SDK_ROOT=undefined (recommended setting) ANDROID_HOME=undefined (DEPRECATED) Failed to run "javac -version", ma..