Enjoy Life~~

내가 태블릿을 사용하기 시작한게 2014년부터였다. 

윈도우 태블릿 -> 듀얼OS 태블릿 -> 윈도우 태블릿 -> iPad를 겨쳐, 다섯 번째로 갤럭시탭S6(안드로이드)를 쓰고 있다.

최초에 태블릿을 선택했던 이유는 '휴대성'이었다. 외근이 많은 영업직인 탓에, 외근나갈때마다 노트북을 들고다니기 싫어서 태블릿을 가지고 다녔고, 최근에 태블릿을 사용하는 이유는 '필기'가 목적이다. 

지금 나는 종이 다이어리를 사용하지 않고, 태블릿을 다이어리로 사용하고 있다.

다이어리로 활용하는 내용은 다른 게시물에서...

<갤럭시탭S6 기본 스펙>

처음 출시될 때에도 최강spec의 안드로이드 태블릿이라고 불렸고, 1년 가까이 되는 지금도 마찬가지다.

나는 회사원이고 갤럭시탭에 높은 스펙의 어플을 돌리지는 않는다. 

그래도 게임은 매너로... '배틀그라운드' 동작 영상.

내가 필기가 주요 사용이니, 필기 영상을 보자.

관련 카페에서는 항상 아이패드 펜슬과 갤럭시의 S펜을 비교해서 논쟁거리다.

둘 다 써본 내 입장에서는, 필기에는 S펜이 좋다. (그림에는 애플펜슬이 좋다는데, 난 그림을 안그려서...)

DEX 모드로도 활용성이 좋다.

키보드 놓고, 마우스까지 연결해놓으면 노트북과 흡사한데, 그렇다고 노트북의 효용을 기대하진 말자. 윈도우는 윈도우고, 안드로이드는 안드로이드다.

하지만 한계를 인정하고 사용하면 그 나름 훌륭하다. 

먼저 듀얼스크린으로 인터넷과 노트 앱을 띄웠다.

이렇게 듀얼스크린 활용해서, 난 외국어 공부에도 잘 썼다. 

자막 있는 영상 보면서, 펜으로 받아쓰기를 하는 식이다. 영상에는 안나오지만, 사전도 바로 불러서 단어를 찾아볼 수 있는게, 태블릿의 매력이다. 

직장인에게 있어서 태블릿의 한계는 바로 엑셀이다. 

하드웨어가 아무리 좋아봐야, 소프트웨어가 없으면 그건 아무 쓸모 없는 전자기기다.

갤럭시탭S6은 덱스모드 덕택에 윈도우의 엑셀에 많아 쫓아갔다.  vlookup 정도 구현되면, 급한 업무 정도는 해결할 수 있다.

사실, 업무에 100% 활용하려면, 윈도우 태블릿을 사면된다. 

갤럭시북 1세대를 사면, 순수윈도우 기반이어서 일반 컴퓨터처럼 쓰면 된다. 정말 잘 사용했었는데, 윈도우 태블릿은 무게가 무겁고, 배터리가 오래가지 못하니 항상 켜둘 수가 없고... 이런 단점으로 정말 업무용으로만 쓰게 되더라.

안드로이드 태블릿으로 오니 항상 켜서 옆에 둘 수 있고, 사용 빈도가 높아진다.

회사에서는 S6로 미팅 기록하고, 고객에게 설명 자료들을 보여준다. 각종 문서들을 프린트해서 다닐 필요가 없다. (난 지구 환경에 도움이 되고 있다는 자부심이 있다. ㅎ)

클라우드로 회사 업무 폴더를 동기화해놓으면, 태블릿에서도 실시간 동일한 파일에 접속이 가능하다. 클라우드는 정말 예술이다. 

S6의 단점을 꼽자면....

 - 가끔 더 큰 12인치 화면이면 좋겠다는 생각이 든다. 그런데, 이건 휴대성과 타협해야 할 문제.

 - 바로 직전에 아이패드 프로3세대를 썼었는데, 멀티태스킹 측면에선 iOS가 더 좋다. 외국어 공부할 때 사전이나 연습장을 넣다뺐다 하기는 iOS가 더 편했다.

 - 펜 수납 공간으로 뒷판이 평평하지 못하다. 펜을 분실할 염려가 없어서 좋긴한데, 필기할 때 기울어진게 거슬릴 때가 많다. 다음 버젼에는 갤럭시노트처럼 본체 안으로 들어갈 수 있기를...

WiFi전용, LTE모델이 있는데, 난 WiFi면 충분하다고 생각한다. 휴대폰에 핫스팟 터치 한번만 해주면 WiFi 연결이 되는데, 더 비싼 가격에 매달 사용료까지 나오는 LTE모델까지 필요는 없다고 본다. 

난 전자기기에 관심이 많고, 뭐 하나를 지르면 그 다음에 나오는 기기에 뽐뿌가 오곤 했는데, 이 갤럭시탭S6 이후에는 아직 반응이 없다. 더 비싼 모델 중에서도 내 용도에 이만큼 맞는 제품이 아직 없다. 그만큼 S6는 잘 나온 제품이라는게 관련 카페에서도 중론이다.

올 하반기 쯤에 다른 모델이 나오겠지만, S6의 가성비를 맞추려면 삼성도 꽤 고심해야할 것 같다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.

엑셀에서 실무에 가장 많이 사용하는 함수가 vlookup이라고 하면, 그 다음은 sumif라고 생각한다.

vlookup과 sumif만 잘 조합해도 실무의 많은 부분을 편하게 해결 할 수 있다.

sumif로 두 개의 시트 관리를 편하게 해보자.

'재고현황': 재고 목록

'입출고 list':  재고 입출고가 발생할 때마다 기입하는 목록

]] 기존 : 입출고가 발생하면, '입출고 list'에 기입하고, '재고현황'에서 재고 숫자를 가감한다.

           두 개의 시트를 오가면서 작업해야 하고, 그만큼 숫자를 잘못 입력하거나 하는 실수가 발생한다.

]] 개선 : '입출고 list'에 기입만 하면 '재고현황'의 재고 숫자가 sumif함수로 자동 조정된다.

sumif의 사용법: 
      =sumif('기준값을 찾을 범위' , '기준값' , '합계를 구할 범위')

'입출고list'에서 발생한 숫자의 합계를 sumif로 '재고현황'으로 가져와서 재고 수량을 가감할 것이다. 

위 식을 보면, '입출고list'의 C열에서 품번을 찾아서 그 품번의 입고 수량(D열)을 합계를 구하는 식이다.

출고도 마찬가지로 '입출고list'의 출고수량을 '재고현황'으로 가져온다.

위 그림에서 보면, 주황색의 GRM155R61A105KE01D은 600개가 입고되고, 300개가 출고되서, 남는 재고는 300개가 된다.

이제 '입출고list'시트에만 입출고 수량을 기입하면, '재고현황'에서 재고 수량이 자동 계산할 수 있다.

그리고, 여기에 추가로, 사용자의 편의를 위해서, error를 판단하는 iferror 함수와 vlookup 함수를 활용해서, 기존에 '재고현황'에 없던 새로운 품번이나 품번 입력 오류를 방지하는 기능을 넣을 수 있다.

vlookup으로 '입출고list'에 입력한 품번의 재고 수량을 '재고현황'에서 가져오고,

만약 '재고현황'에 없는 품번이 입력됬다면 error가 생길거고, 그러면 '없는 품번이에요~'라는 문구를 출력한다. 

위에서 마지막 품번의 마지막 글자 D를 빼먹고 입력했다. 그런 품번은 '재고현황'에 없기 때문에 error가 나고, 메시지를 출력한다.

이렇게 함으로써 품번 입력 오류를 막고, 새로운 품번이 입고되었을 때 쉽게 알아챌 수 있겠다.

예제파일 : https://drive.google.com/open?id=19kFceM9p5OFJhiBQWlMrjWQEZgNl2Dhc

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.

협동로봇이란, '인간과 협동할 수 있는 로봇'이다.

인간과 협동? 당연하게 들릴 수 있으나, 지금 생산현장에서 쓰이는 로봇은 '산업용 로봇'으로 분류되고, 이 산업용 로봇은 인간과 같이 일 할 수가 없다. 

사람을 다치게 하기 때문이다. 로봇 팔이 움직이는 곳에 사람이 서 있으면, 로봇은 사람을 밀고 원래의 동작을 계속 수행한다. 

그래서, 산업용 로봇이 움직이는 공간에는 반드시 철조망(안전펜스)가 설치되서 사람의 출입을 막도록 의무화 되어 있다.

그런데, 협동로봇은 사람과 부딪치면 로봇이 멈춘다. 토크센서가 내장되어서, 동작중에 일정 이상의 충격이 발생하면 로봇이 멈춘다. 그래서, 안전망이 불필요하고, 사람과 같은 공간에서 작업을 할 수가 있는 것이다. 

대표적인 협동로봇인 Universal Robots의 제품은 왼쪽과 같다.

이것은 단지 로봇만인거고, 로봇의 팔 끝에 각종 도구가 붙어서 여러가지 작업을 할 수 있게 된다. 

대표적인 동작으로서, 

pick and place : 물건을 집어서 다른 곳으로 이동시키는 작업

palletizing : 박스를 집어서 팔레트에 규칙적으로 적재시키는 작업

machine tending : 위험할 수 있는 공작기기 등에 제품을 넣고 빼는 작업

packaging : 제품을 상자에 넣는 작업

dispensing : 접착제나 실리콘 등을 정확하게 도포하는 작업

polishing : 광택을 내는 작업 

inspection : 카메라 등을 달아서 외관상태 등을 검사하는 작업

screwing : 나사를 제품에 박는 작업

요약하자면, 사람이 반복하는 작업을 협동로봇이 수행하는 것이다. 

사람의 일자리를 뺐는거 아니냐고? 사람은 사람만이 할 수 있는 자유도가 높은 작업이나 더 창조적인 업무를 하면 된다.

산업혁명 초기에 증기기관이 일자리를 뺐는다고 방직기계를 파괴하던 러다이트운동이 있었다. 그 당시의 노동자는 하루 12시간 이상 노동은 당연했고 휴일 따위는 없었다. 그런 저급한 일자리를 지키려고 기계와 싸웠던 인간은 기술의 발전 덕택에 주5일 근무에 각종 휴일을 즐기면서도 더 높은 생산성을 만들어내가고 있다. 

오늘날 아무도 컴퓨터와 계산 속도 경쟁을 하거나, 자동차와 달리기 시합을 하려는 사람은 없다. 사람은 그저 컴퓨터와 자동차를 이용해서 더 높은 수준의 업무를 수행하면된다.

협동로봇의 팔에는 각종 도구들이 붙어서 다양하게 활용할 수 있다. 

그렇다고 협동로봇이 만능은 아니다. 

산업용 로봇보다 속도가 느리고, 들 수 있는 무게도 적고, 가격도 비싸다.

그러나 협동로봇에 적합한 분야가 있고, 이제껏 당연히 사람이 수행해왔던 위치에 하나 둘 사용이 늘어나고 있다. 

로봇청소기나 식기세척기를 사용해본 적이 있는가? 사람보다 느리고, 깨끗하게 하는 정도도 사람 손보다 못하다. 그러나 한 번 써본 사람들은 너무 좋다고 극찬한다. 느리지만 설겆이와 청소는 완료될거고, 사람은 그 동안 쉬거나 다른 일을 할 수 있다.

최근의 인구고령화,노동인구 감소 등으로 우리는 새로운 생산동력을 찾아야 하고, 협동로봇은 중요한 위치를 차지하게 될 것이다. 

협동로봇이 재미있게 활용되는 사례 링크:

 >> 타코야키 만들기 : https://www.youtube.com/watch?v=2YAqKp5R-HY&t=131s

 >> 오믈렛 만들기 : https://www.youtube.com/watch?v=CAJJbMs0tos

 >> 샌들(슬리퍼) 만들기 : https://vimeo.com/112876637

 >> 로봇 마사지 : https://www.youtube.com/watch?v=ZVNeYmMbEJ8

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.

레고를 직접 만들기 전에 컴퓨터로 만들 수 있는 프로그램.

이것을 최신 컴퓨터에 설치하려니 에러가 가로막는다. 

플래쉬플레이어가 없거나 낡은 버젼이어서 업데이트를 해주겠다는 얘기인데, 정작 설치하다가 에러가 나는거다.

그런데, 플래쉬플레이어는 익스플로러10에 포함되어 이미 설치는 되어 있다.

한참을 헤메다가 아래와 같이 해결!!

1. 플래쉬 플레이어 에러가 뜰 때까지 디지털 디자이너를 설치 진행한다. (거기서 Yes를 누르면 안된다!!!)

2. 탐색기에 옆의 폴더 주소를 붙여넣어서 이동한다.    %TEMP%\WZSE0.TMP\

    디지털 디자이너 압축이 풀려서 설치되던 폴더다.

3. 이 파일을 삭제한다 : install_flash_player_active_x.exe

4. 그 폴더에 있는 OpenGLChecker.exe의 파일명을 삭제했던 파일명으로 바꾼다 : install_flash_player_active_x.exe

5. 이제 멈췄던 디지털 디자이너 설치과정으로 돌아가서 Yes를 눌러준다.

이제 설치가 완료될 것이다.

머잖아 플래쉬플레이어는 사용이 막힐 것 같은데, 레고는 뭔 준비를 하고 있는건지...

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.

회사내에 흩어진 정보들(체계적으로 정리할 정도로 중요하진 않지만, 회사생활에 가끔씩 찾게되는 사소한 정보들)을 한 곳에 모아서 볼 수 있게 해야겠다는 생각으로 만들어봐야겠다는 생각을 하고 만들게 됬다. 

내 첫번째 코딩 과제로서, 충분한 연습상대였다. 

아래와 같이 디자인적인 요소도 좀 들어갔고, 커서가 올라가면 본문이 색깔도 변하게 했다. 

여기서 관건은 검색 기능. 

앞선 1차 버젼에서는 findIndex메소드(메소드? 그냥 함수라고 생각해버리자)로 입력값과 일치하는 배열의 위치를 찾고, 그 배열의 값을 보여주는 식으로 검색 흉내를 냈다. 

이번에는 JQuery라는 천국을 알게됬다. 

jQuery(제이쿼리)는 자바스크립트 라이브러리다. ......... jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.  (출처 : 위키백과)

간단히말해, 자바스크립트에서 사용할 수 있는 유용한 명령어의 덩어리이다. 필요한 기능이 있으면, 불러다가 쓰면 되는거다. 물론 그 부르는 방법도 인터넷의 선지자들이 알려주는대로 하면 된다.

그 중에서 filter 기능을 발견했다. 

https://demos.jquerymobile.com/1.4.5/filterable/#&ui-state=dialog

여러가지 filter방법중에서 내가 선택한 건, Filter Anything. 

데이터에서 입력 내용으로 필터를 거는건데, 결국 검색하는 것과 동일한 효과다.

소스를 보면,

id로 'divOfPs-input을 지정하는 것만으로 필터 기능을 사용할 수 있고, 

그 아래의 <div></div> 사이의 내용에서 필터 걸리는 <p>의 내용만 보여진다.  원더풀!!

이렇게하고보니, 너무 쉽게 목적했던 기능이 구현됬다.

이대로는 심심해서 CSS에 두 가지 데코레이션을 넣었다. 

위와 같은 간단한 CSS 효과만으로도 결과물의 격이 올라간다. 

그리고, 이후에 app으로도 만들 수 있게, 휴대폰의 해상도에서도 볼 수 있게 했다.

이후에 웹페이지나 app에서 회사내의 자잘한 정보들을 한 곳에서 바로바로 검색할 수 있게되면, 그 정보를 찾는데에 걸리는 시간과 수고를 아낄 수 있을 것이다. 

회사내에서만 쓰는 용어, 업무상 자주 필요한 사이트, 업무 문서 양식, 조직정보, 복지정보 등등.... 

-------------------------------------------------------------------------------------------------------------

내 아이디어를 현실화하는 데에는 내가 최고의 프로그래머가 될 필요는 없다.

훌륭한 분들이 만들어놓은 것을 잘 구성하기만 하면 된다.

Webview app을 제작하기로 했으니, 이제 HTML,CSS,Javascript만 공부하면 된다.

app으로 구현하려는 idea는 있으나, 그건 한참 배움이 필요한 내용이겠고,

첫번째 app으로 '회사내 사전'을 만들기로 했다.
회사의 모든 정보를 한 곳에 모아놓고 그걸 검색해서 보여줄 수 있는 기능이다.

실제로 회사 내부의 수많은 정보들이 곳곳에 흩어져있어서 참고가 안되거나, 찾는데에 많은 시간을 소비하는 경우가 많다. 휴가,복지와 같은 규정들, 문서 양식, 업무 담당자 목록 등 관련은 없지만 그런 내용들을 한 곳에서 참고할 수 있으면 좋을 것이다.
물론 대기업들은 '챗봇'이라는 인공지능까지 결합된 서비스를 사용하지만, 작은 기업에 그럴 필요까지 있겠나. 그래서 내가 만들어보기로 했다.

현대모비스, AI 챗봇 도입 ‘1000만 사내 정보’ 업무 활용

기능은 간단하다.  찾을 정보들의 리스트를 만들고, 그 안에서 제목을 검색하고 그에 맞는 내용들을 보여주면 된다. 즉 검색 기능만 javascript로 구현하면 되겠다.

첫번째 version의 모습.

간단한 기능이지만, 코딩 초보자에게는 절대 쉽지 않다.

] 첫번째 난관 : html input창에 입력한 값을 어떻게 javascript로 보내고, 그 결과를 어떻게 html에 다시 표시할까?

] 두번째 난관 : 검색 기능을 어떻게 구현할까?

아래에 하나씩 설명하겠다.

  html에 검색창을 넣고, enter키(keyCode 13번)가 눌리거나 검색버튼이 클릭되면 javascript의 search()라는 함수를 실행한다.

javascrit에 dic이라는 배열함수를 설정하고, 그 배열 안에 검색할 항목(name)과 그 내용(desc)들을 다 입력했다. 

검색할 데이터들을 javascript 코딩 내용에 다 때려넣었다는 말이다. 엄~청 무식한 방법이다.  초보때는 이런 것도 과정이다. 

여기서 이해가 어려운 부분은, index라는 변수에 들어가는게, 1개 값이 들어가는게 아니라(사실, 이게 변수의 상식적인 의미잖아!) ,

배열의 1개 항목이 통째로 들어간다. (이게 자바스크립트의 '객체'님이라고 한다)

index변수의 내용이, "name : 어쩌고, catego : 저쩌고, desc1: 이것저것" 이렇게 다 들어간다.

그것에서 output1,2,3에 각각의 항목을 나눠서 넣어주는 것이다.

이제 html에 script의 내용들이 표시될 곳에 id를 입력해준다. 

이렇게 완성이다. 

아래와 같이 디자인이라고는 찾아볼 수 없게 결과물을 만들어냈다. 

뭐든지 해놓고나면 간단하지만, 모를때는 깜깜하다. 

더 효율적인 방법으로 version up을 하게된다. 다음 포스트에...

이 블로그를 작성하는 목적은, 전문지식을 알리기 위함이 아니다.
이런 목적으로는 훌륭하신 분들의 사이트가 이미 많다.
나 같이 완전한 비전공자가 App을 만들어 가는 과정을 공유해서, 나처럼 시간,노력을 낭비하지 않게 하기 위함이다.
-------------------------------------------------------------------------------------------------

나는 하이브리드 웹뷰App을 만들어야 한다.
native앱을 만들 능력,시간은 없고, 단순한 웹앱으로 해서는 뽀다구도 안나거니와 구글스토어 등록도 안된다.
하이브리드 웹뷰앱이나 웹앱이나 인터넷 사이트를 보여준다는 건 동일하다.

외관적으로는, 아래처럼 인터넷 주소창이 보이면 웹앱, 안보이면 하이브리드 앱이라고 해도 된다.

하이브리드앱은 프레임워크를 통해서 제작해야하고, 그래서 휴대폰에 apk파일로 설치가 된다. 나중에 개발실력이 좋아지면, 네이티브앱처럼 휴대폰의 센서,카메라 등과 연결되서 활용이 가능하다.

하이브리드 웹뷰앱을 만들려면, 나는 웹사이트만 관리하면 된다. 웹사이트의 디자인과 컨텐츠만 변경하면 휴대폰에 설치가 된 app의 내용도 바뀐다. 그러니 HTML,CSS,Javascript만 공부하면 app을 운영할 수 있는거다.

안드로이드스튜디오로 웹뷰를 만들기까지도 한참이나 헤맸다. 이전에 고수들의 블로그 내용이 안드로이드스튜디오가 업데이트 되면서 적용이 안되는 것도 있고, 코드들을 간단히 복붙했더니 중간에 내용을 import 어쩌고 해야되는 것도 있고해서 안됬다.

서론이 길었는데, 아래와 같이 구현했다.
-----------------------------------------------------------------------

] 안드로이드스튜디오에서 새로운 프로젝트를 생성한다.
  Project template는 Empty Activity로 선택

] 생성된 초기화면에서 activity_main.xml로 이동. 아래의 선택 부분을 LinearLayout으로 변경.

] TextView 부분은 삭제하고, WebView 입력

입력라인 :

<WebView

     android:id="@+id/webview"

     android:layout_width="match_parent"

     android:layout_height="match_parent"></WebView>     

 
] MainActivity.java로 이동해서 private 2개 라인 입력

입력라인 :
private WebView webview;
private String url="https://(화면에 보일 인터넷 주소)";
위에서 WebView가 빨간색이면 그 단어에 커서를 두고 alt+enter를 쳐서 import class 실시해주면 빨간색이 없어진다.

] @Override 아래로 입력

입력라인 :
webview=(WebView)findViewById(R.id.webview);

webview.getSettings().setJavaScriptEnabled(true);

webview.loadUrl(url);webview.setWebChromeClient(new WebChromeClient());

webview.setWebViewClient(new WebViewClientClass());

빨간색 WebChromeClient()에 커서를 두고 alt+enter를 쳐서 import class 실시.
그 아래의 WebViewClientClass()는 잠시 대기

] 이제 휴대폰에서 뒤로가기를 터치했을때의 동작을 지정해줘야한다.
  첫번째 @Override 입력 완료한 아래에서

ctrl+O를 눌러서 onKeyDown을 입력하고 엔터키 누르면 아래에 새로운 @Override가 생성됨.
중간에 아래 두 개 행을 추가해줌. 뒤로가기를 눌렀을 때의 동작을 지정해주는 것임.

입력라인 :
if((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()){ webview.goBack();

return true;}

] 이제 아까 대기했던 빨간색 WebViewClientClass()으로 커서 이동.
  alt+enter를 쳐서 Create inner class 선택. 그러면 맨 아래에 새로운 class 지정라인이 생성된다.

] 생성된 라인에 추가 입력.
  명령을 닫는 } 마크는 항상 주의하자. 이 사소한 입력을 빼먹어서 동작 안되는 이유를 찾느라 많이 고생한다.

입력라인 :
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url);

return true;}

] 이제 인터넷 권한설정이 필요하다.
app > manifests > AndroidManifest.xml 을 열고 입력해준다.

입력문구 :
<uses-permission android:name="android.permission.INTERNET"/>

자 여기까지 하고 build를 해보면 지정했던 web page가 휴대폰 안으로 들어온 것을 확인할 수 있다.

그런데, 화면 상단에 타이틀바가 있어서 그걸 없애야 한다면, res > values > styles.xml에 아래 태그를 추가하자. 

<item name="windowNoTitle">true</item>

이제 우리는 WebView안에 들어갈 내용을 꾸미기 위해서, HTML,CSS,Javascript만 공부하면 된다.!!
그런데, 좀 더 기능을 넣으려면 Vue, 안드로이드스튜디오, Python ......  @_@

나도 크리에이터가 되기로 했다. app을 만들어서 내가 생각만했던 걸 구현해보는거야....

그런데, 난 문돌이잖아....  @_@
무슨 언어부터 배워야하나부터 모르겠다. 무슨 언어는 이렇게 많은지... Java, Javascript, C++, Python, Go...
Java와 Javascript가 아예 다른 언어라는 걸 알고 깜짝 놀랐었다. 이 둘의 관계에 대한 가장 명쾌한 설명은, '인도와 인도네시아의 관계'라는 것이었다. 그냥 이름만 비슷하지, 아예 다른 존재라는 것.
Python이 최근 핫한 언어라는 건 들었는데, 내 선택은 Javascript로 했다.

 ] 그나마 친숙한 HTML과 같이 쓰고, CSS와 같이 사용하면, 약간의 javascript로 대단해보이는 시각적 효과를 거둘 수 있다. 
 ] native App을 만들것도 아니고, Webview 정도로 해야할텐데, Web에는 Javascript라는 것.
 ] Javascript 오픈소스가 많다는 것 (다른 언어들도 많겠지...)

옛날 같으면 책부터 샀겠지만, 유튜버의 조언대로 프로젝트를 꾸며가면서 필요한 부분만 배워가면서 하기로 했다.
내가 만들어야할 첫 번째 프로젝트를 결정했다. 회사 사전(dictionary) app!
회사의 모든 정보를 넣어놓은 사전이다. 실제로 필요하기도 하겠고, 사전 개념이니까 여러 메뉴가 필요한 것도 아니겠다 싶다.

인터넷에 Javascript를 검색했다. 와.... 이렇게 많은 무료강좌,블로그,유튜브 영상이 있음에 놀랐다.

내 앞에 새로운 세상의 문이 열리는 순간이다.

목표를 정하고, 일단 Javascript의 기초는 알아야하니까 하나하나 강의를 본다.
엄청난 강의들을 무료로 올려주신 분들에게 감사를 드리고 싶다.

정보는 넘쳐난다. 내가 어떻게 주워먹느냐가 문제다. 

  생활코딩 : https://opentutorials.org/course/1
  TCP school : http://tcpschool.com/
  MDN web docs : https://developer.mozilla.org/ko/

강의에 올려진 소스들의 내용을 바꿔가면서 해보는데, 웹에서 바로 코딩을 해서 결과를 확인해볼 수 있는 것도 감동이었다.  아래의 사이트는 정말 편하게 이용하고 있다.
https://repl.it/

내가 만든 웹페이지를 인터넷에 바로 띄워볼 수 있는 사이트도 있다. 이런게 무료라니!!!  

로그인 하고 내 사이트 페이지에서 deploy에 웹페이지 폴더를 드래그하면, 바로 인터넷에서 접속할 수 있는 내 웹페이지가 생긴다. 

Netlify: All-in-one platform for automating modern web projects

아래 영상에서 기본 사용법을 배울 수 있다.

https://www.youtube.com/watch?v=LnGgndT308Q&t=468s

그래도, 코드 에디터는 있어야지. 이것을 결정하는 것도 무지 고민이었다. 뭐 알아야 고르지...

Visual Studio code(VS code)와 ATOM, 둘 중에서 고민하다가 VS code로 정착할 것 같다.
내가 코딩하는 걸 바로 볼 수 있는 건 ATOM이 더 좋은데, 한 번 ATOM에서 길게 코딩해놓은 것이 뒤섞이는 걸 경험하고는 바로 VS code로 바꿔탔다.

VS code에 여러 add-on을 설치하고, 코드가 컬러풀하게 색깔도 변하는 것을 보고, 긴 명령어를 단축키로 입력하고 해보면 이미 프로그래머가 된 듯한 기분을 느낄  수 있다. 그러나, 고생은 이제부터...