누리오와 웹프로그래밍

npm 만들기를 조사하던중 궁금한 사항이 생겼다. React 개발을 한번이라도 해본 개발자라면 잘 알고 있을 Facebook에서 제공하는 create-react-app 이라는 스타트킷(?)을 한번이라도 보았을 것이다. 그래서 이건 어떻게 만들어 졌을까? 라는 궁금증에 이에 대하여 조사 및 테스트를 진행해 보았다. Creact React App은 어떻게 만들었을까? npx create-react-app my-app or npm init react-app my-app my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js └── setupTests.js 위처럼 명령어를 입력하면 위 그림과 같이 react 개발을 위한 기본적인 디렉티로/파일/구조 등을 자동으로 설치하여 개발자고 초기 설정 및 세팅을 하는 수고로움을 덜어주는 아주 좋은 개발자 스타터 킷 이라고 생각했다. 그래서 혹시나 우리도 프로젝트를 새로 세팅할 경우 기본적인 구조를 자동으로 설정해주면 편리하겠다는 생각에서 출발하였다. 검색을 하던중 아래와 같은 사이트에서 대략적인 힌트를 얻었다. https://github.com/saostad/node-typescript-starter 이 친구도 아마도 나와 같은 생각으로 출발했던거 같기도 하고, 뭔가 단서가 될만한 내용이 있을거 같은 느낌으로 일단 여기서부터 출발 하기로 했다. 어떻게 저 명령어를 실행하면 일반적으로 모듈을 설치하는 npm -i 와 같이 module을 다운받아 설치하는 로직이 아닌 cli가 실행이될까? 그...

NPM(Node Package Manager)은 이름에서 알수 있듯이, 노드를 패키지로 만들어 관리해주는 역할한다.  오픈소스개발자가 만든 자신의 모듈(라이브러리)를 공개된 레지스트리에 등록하고 공유하여 여러사람이 사용할수 있게 관리하는게 목적이다. 여기서 앞글자가 Module 아닌 Node라고 했던 것은 npm이 처음 생겼을때 Node.js용 패키지 관리자로 생성되었기 때문이라고 알려져 있다. 기본적으로 node.js를 단, 한번이라도 사용해본 개발자라면 npm에 대하여 깊이 생각해본적은 없을지라도 모듈에 대한 개념과 필요한 모듈이 있을 경우 git을 통해 내려받고 설치하고 등등 npm install 명령어를 자주 접했을 것이다. 여기서는 그렇게 다른 개발자들이 만들어 올려둔 모듈을 사용하는것이 아니라 직접 만들어 배포하기 위해서는 어떻게 해야 하는지에 대한 내용을 작성하려고 한다. npm 모듈을 만들어 배포하고 사용하는 개념을 그림을 간단히 표현하면 다음과 같다. 그림처럼 npm을 모듈을 만들어 배포하고 사용하기 위해서는 npm을 등록/저장하기위해 np에 멤버 가입 및 로그인이 필요하다. 가입과 사용은 무료이며, 비용(월 약 7$)을 지불하고 유로로 전환하면 비공개/개인적용도로 사용이 가능하다. npm 생성 초기화 아래와 같은 명령어를 입력하여 npm 패키지를 만들기 위한 초기화를 수행하자. 패키지 초기 설정과 관련된 입력을 해야하는데 자신의 프로젝트에 맞도록 입력하면된다. 엔터를 입력하면 괄호 안에 있는 내용으로 자동입력되고 다음으로 넘어간다. package name : 배포될 모듈명  version : 배포 버전 description : 패키지 설명 entry point : 배포될 패키지의 진입 점(default export/import 대상 파일) 나머지는 그냥 엔터로 패스하도록 하자. 명령어를 입력한 디렉토리에 보면 아래와 같은 package.json 파일이 생성된 것을 확인 할수 있다. package.json 생성 확인 packag...

  Progressive Web App PWA는 웹과 앱의 장점을 살린 프레임워크(?)라고 할수 있을거 같다. 여기서 말하는 장점이란 웹 기술인(React.js Vue.js, Javascript 등)으로 개발하여 웹사이트를 만들고, 이걸 그대로 이용하여 몇가지 설정을 통해 설치형 앱을 만들수 있다라고 정리해 볼수 있을거 같다. 일단 가장 큰 장점은 웹으로 만들고 앱으로 패키징하여 배포할수 있다. 그런데 여기서 의문은 여러분도 알고 있다시피 그럼 기존의 웹앱 프레임워크인 Coradova 등과는 뭐가 다르지 라고 말할수 의문을 가질수도 있다.  가장큰 차이점은 일단 설치형이라고 설명했지만 기존에 알고 있는 방식의 설치형이 아니다. 즉 안드로이드 또는 애플 마켓에 등록하기 위해 개발자 등록을하고 패키징을 만들고 패키징을 등록하고 검증받고 등등등 처음 해보는 분들이라면 아마도 수많이 시간과 노력을 투자해야 할지 모르는 이런 절차가 필요없다는 말이다. 즉, 결론은 그냥 PWA로 만들어서 웹 서비스로 오픈하면 설치형 프로그램과 비슷한 설치형 앱을 제공하다는 말이다. 무슨 말인지 잘 모르겠다면 검색을 통해 보다 상세히 살펴보시길 권장합니다.

  Cordova Cordova(코르도바)는 아파치 재단에서 지원중인 하이브리드 앱을 위한 프레임워크라고 소개하고 있다. 즉, 이말은 하이브리드 앱을 만들기위한 프레임워크라는 말이다. 위 내용 생각을 정리해보면 Cordova는  웹 프로그래밍 기술(React, Vue, Javascript 등)을 이용해 개발한 프로그램을 빌드하여 앱으로 패키징/배포할수 있는 도구(프레임워크?) 라고 할수 있을거 같다. 여기에서는 이미 작업된 Vue 프로젝트를 웹앱으로 배포 및 패키징하기 위한 방법을 설명하는 것에 초점이 맞춰져 있다.

  # cordova 에서 실행에 필요한 요소들의 설치 여부를 확인하는 명령어로 확인해보자 cordova requirements android 뭐라 뭐라 하는데 여기에서 중요한 사항 아래와 같이 두가지이다. (1) andorid SDK Platform (api level 29) (2) Gradle andorid SDK Platform 설치 (api level 29) Android Studio를 실행하고  More Actions > SDK Manager를 실행시켜 api level 29 sdk를 추가로 설치하자. Android SDK 설치 첫번째 화면 Android SDK 설치 동의 화면 Android 10.0(API Level 29)를 선택하고 Apply -> OK를 선택하고 다음 화면에서 Accept를 선택후 Next를 클릭하면 자동으로 설치된다. 설치가 완료되면 "Finish"로 화면을 종료하자. 그리고 나서 다시 요구사항을 확인해보면 아래와 같을 것이다. gradle 설치 일단 gradle 파일을  여기서( https://gradle.org/releases/ )  다운로드 받자 파일이 설치 파일이 아닌 관계로 설치와 설정을 직접해야 한다. 먼저, 파일을 저장할 디렉토리를 생성하자. 나는 아래의 경로에 파일을 압축해제 하였다. Gradle 디렉토리 생성 :  C:\Gradle 그리고 환경변수 설정을 해야 한다. 변수 이름 : GRADLE_HOME  변수 값 : C:\Gradle\gradle-6.9.1 또한 Path에도 아래의 내용을 추가하자. %GRADLE_HOME%\bin 아래와 같은 화면이 표시되면 성공적으로 설정된 것이다. 자! 이제 대망의 결과를 확인해보자. 아래와 같이 crodova requirements android 명령을 실행해보자 그동안의 고생을 한방에 날려줄 깔끔한 화면이 표시되면 성공한것입니다.  축하! 축하! 축하합니다!

  네이티브 앱 일반적으로 Android or iOS등 흔히 말하는 구글의 안드로이드폰, 애플의 아이폰의 앱을 만들기 위한 특정 모바일기기의 OS에서 응용 프로그램을 말한다. 즉, 이말은 특정 모바일 기기의 OS에서 앱을 만들기 위해 안드로이드는 Java 언어로, iOS는 Objective C 언어로 개발을 해야 한다는 말과 같다.  또, 이말은 앱 개발을 위해서는 Java와 Objective C 언어를 배워야 하고, 열라 열심히 해야하고, 삽질도 해야하고, 밤도(?) 새워야 하고 결론은 열심히 노력을 해야 한다는 말이다. 그래도 꼭 네이티브로 만들어야 할 경우가 있다.  가장 빠르고 안정적으로 반응하기 위한 앱 을 만들기 위해,  모바일 기기의 디바이스(카메라, 마이크, GPS 등)를 보다 크리티컬하기 제어 하기 위해 네이티브 앱을 꼭 고려해 봐야 한다. 네이티브 앱이 유용한 경우는 많겠지만 요약하면 아래와 같다. 3D 게임이나 애니메이션 제작에 어떤 장치의 특별한 기능을 사용하고 싶을 때 앱 기능이 많고 상당히 복잡한데 그 성능이 정확히 나오게 하고 싶을 때 하지만, 위 내용은 이론적으로 위와 같다는 이야기이고, 2022년 현재를 기준으로 모바일 기기의 성능도 많이 좋아지고, 차후에도 많이 좋아질 예정이므로 성능에 대한 이슈로 인한 고려사항은 크게 고려할 사항은 아니지 않을까 생각한다. 그리고 추가로 현재  크로스 플랫폼 프레임 워크 가 날로 발전하고 있으므로 이 또한 살펴볼 필요가 있다. Google이 만든  Flutter Facebook이 만든  React Native 현재 크로스 플랫폼 앱 개발 시장의 선두 주자이니 시간이 된다면 살펴보기 바란다.

  프로젝트를 아직 생성하지 않고, 처음 시작하는 경우는 검색해보면 여러곳에 있으니 여기서는 다루지 않는다. 여기서는 Vue로 만들어진 Web을 모바일 플랫폼으로 만들어 배포하기 위한 고민에서 시작되었다. 따라서 최대한 효율적인 방법을 검토하는 과정에서 비롯되었음 먼저 알고 봐주시길 바랍니다.

  Cordova에서 최종 목표인 안드로이드 플랫폼 실행(설치?) 파일을 만들기위해서는 Android Platform을 위한 빌드 환경을 설정해야 한다. 즉, 안드로이드 앱을 만들기 위해 꼭 필요한 Java SDK, Android SDK, 빌드 환경 설정 등이 설정되어 있어야 한다는 말이다. Crodova를 통해 안드로이드 앱을 만들어 낸다는 말은 결과적으로 안드로이드 앱 빌드 및 패키징시 꼭 필요한 SDK(Software Development Kit)가 있어야 한다는 말이다.