누리오와 웹프로그래밍

항상 우리 프로그래머들은 새로운 개발 언어를 배우거나 떠오르는 신기술이 있으면 이게 왜 탄생하게 되었는지 궁금해 합니다.  아~~~! 저만 그런가요? ㅎㅎㅎ... 미안합니다. 꾸~~우~~~벅 어쨋거나, 무엇이든간에 단어에 대한 또는 제목에 대한 탄생배경과 역사를 알면 그래서 이게 탄생한 거구나를 넘어 왜 필요한건지 언재 사용하면 좋은건지 그리고 조금더 깊숙히 어떻게 사용할지에 대한 답을 알수 있을때가 종종 있습니다. 아~~~! 이것도 저만 그런가요? ㅎㅎㅎ... 미안합니다. 꾸~~우~~~벅 아무튼 거두절미하고 Java의 흥미로운 탄생 배경 및 역사에 대하여 먼저 간단히 그림을 살펴봅시다.  그림에 대하여 간단히 설명을 추가하자면 이렇습니다. 바야흐로 약 30년전으로 거실러 올라가 1991년 윈도우 95가 태어나기도 전 아마도 제 기억으로는 1990년 윈도우 3.0이 출시되었지만, 이시기까지만 해도 사용하는 사람이 극히 드물었던 것으로 기억합니다. 아! 물론 대한민국 같은 경우에도 윈도우 95가 출시하자 마자 사용한 사람은 많지 않을 것으로 예상합니다. 아마도 95학번 이후 대학생이었다면 종종 컴퓨터실에서 사용했을지도 모르죠. 서론이 길었네요. 다시 원점으로 돌아가 1991년 Oak라는 프로젝트를 제임스 고슬링(James Gosling), 마이크 쉐리든(Mike Sheridan), 패트릭 노튼(Patrick Naughton) 이라는 프로그래머들이 Sun Microsystems 사에서 Oak 프로젝트를 시작합니다. 정확히는 Green 이라는 프로젝트를 시작하죠, 이후 Oak로 프로젝트 명을 변경합니다. 이 프로젝트는 원래 소형기기 및 가전제품을 위한 프로그램 언어를 개발하기 위한 프로젝트였죠. 그건데 프로젝트를 진행하던 중 몇년후 윈도우 Netscape 라는 웹이 발표가 되고, 이후 Windows가 Explorer를 추가한 Windows 95를 발표하죠. 이에 고슬링과 그 친구들이 당시 트랜드를 반영하여 웹 개발 언어로 방향을 전환하기에 이릅니다....

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 명령을 실행해보자 그동안의 고생을 한방에 날려줄 깔끔한 화면이 표시되면 성공한것입니다.  축하! 축하! 축하합니다!