NativeScript와 구동하는데 필요한 android studio및 xcode와 cocoapods, xcodeproj를 모두 설치한 후 첫 ns 프로젝트에 신나는 마음으로 ns 상태 확인하는 명령어인 ns doctor ~와 nativescript --version 을 터미널에 입력해서 상태를 확인하였다.
그런데 공식문서를 따라서 정상적으로 메뉴얼대로 설치했는데 node module이 호환되지 않는 문제가 발생하였다.
분명..모두 제대로 설치되었는데... xcode 최신 버전 다운로드하면서 MAC 현재 최신 os인 sonoma로 업데이트까지 해놓은 상태였다..
J in ~ λ nativescript --version
node:internal/modules/cjs/loader:927
throw err;
^
Error: Cannot find module 'node:process'
Require stack:
- /Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/node_modules/marked-terminal/index.cjs
- /Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/lib/common/logger/logger.js
- /Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/lib/common/yok.js
- /Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/lib/bootstrap.js
- /Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/lib/nativescript-cli.js
- /Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/bin/tns
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
at Function.Module._load (node:internal/modules/cjs/loader:769:27)
at Module.require (node:internal/modules/cjs/loader:996:19)
at require (node:internal/modules/cjs/helpers:92:18)
at Object.<anonymous> (/Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/node_modules/marked-terminal/index.cjs:3:17)
at Module._compile (node:internal/modules/cjs/loader:1092:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
at Module.load (node:internal/modules/cjs/loader:972:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Module.require (node:internal/modules/cjs/loader:996:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/node_modules/marked-terminal/index.cjs',
'/Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/lib/common/logger/logger.js',
'/Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/lib/common/yok.js',
'/Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/lib/bootstrap.js',
'/Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/lib/nativescript-cli.js',
'/Users/J/.nvm/versions/node/v15.14.0/lib/node_modules/nativescript/bin/tns'
]
}
터미널에서 nativescript와 그 외 프로그램들을 여러번 install과 uninstall을 반복했는데 node:process 모듈을 찾지 못한다고 계속 실행을 못하고 있다... node process 모듈은 실행에 반드시 필요한 필수 모듈인데 이것도 여러번 깔았다 지웠다를 반복했다.😭
그래서 유튜브와 ns 공식디코채널 등을 뒤져서 하나의 아이디어를 찾을 수 있었다.
바로 nativescript 최신 버전이 아직 apple silicon arm의 호환이 완벽하진 않을 수 있다는 생각이 들었다. 그래서 nativescript를 지운후 바로 이전 버전으로 설치하였더니 문제가 해결되었다.
npm install -g nativescript@8.5.3
J in ~ λ nativescript --version
8.5.3
ℹ New version of NativeScript CLI is available (8.6.1), run 'npm i -g nativescript' to update.
정확하게 호환이 왜 안되는지 내 컴퓨터에서만 안된 건지는 모르겠지만 ns를 다운그레이드하니까 같은 오류가 뜨지 않았다!
문제는 여기서 끝나지 않았다... android studio 설치하면서 android sdk와 필요한 옵션을 모두 설치하였는데 호환이 안된다고 한다. NativeScript를 다운그레이드하면서 android, ios(cocoapods,xcodeproj) 모두 맞는 버전으로 설치해주어야 호환이 되는 것으로 보인다.
J in ~ λ ns doctor android
✔ Getting environment information
TIP: To avoid setting up the necessary environment variables, you can use the Homebrew package manager to install the Android SDK and its dependencies.
There seem to be issues with your configuration.
✔ Getting NativeScript components versions information...
⚠ Update available for component nativescript. Your current version is 8.2.3 and the latest available version is 8.6.1.
✔ Your ANDROID_HOME environment variable is set and points to correct directory.
✔ Your adb from the Android SDK is correctly installed.
✔ The Android SDK is installed.
✔ Javac is installed and is configured properly.
✔ The Java Development Kit (JDK) is installed and is configured properly.
✖ Cannot find a compatible Android SDK for compilation. To be able to build for Android, install Android SDK 28 or later.
Run `$ sdkmanager` to manage your Android SDK versions.
✖ No compatible version of the Android SDK Build-tools are installed on your system. You can install any version in the following range: '>=23 <=32'.
Install the required build-tools through Android Studio. In case you already have them installed, make sure the `ANDROID_HOME` environment variable is set correctly.
Your environment is not configured properly and you will not be able to execute local builds.
그래서 아래와 같이 android sdk 버전을 변경하였다. android studio > More Actions > SDK Manager - Hide Obsolete Packages 체크 해제 - Show Package Details 체크 - SDK Platforms 에서 Android 12L 다운 후 적용 - SDK Tools에서 Android SDK Build-Tools 32.0.0 다운 후 적용
android sdk도 다운그레이드 하고나니 제대로 동작했다.😂
J in ~ λ ns doctor android
✔ Getting environment information
No issues were detected.
✔ Your ANDROID_HOME environment variable is set and points to correct directory.
✔ Your adb from the Android SDK is correctly installed.
✔ The Android SDK is installed.
✔ A compatible Android SDK for compilation is found.
✔ Javac is installed and is configured properly.
✔ The Java Development Kit (JDK) is installed and is configured properly.
✔ Getting NativeScript components versions information...
⚠ Update available for component nativescript. Your current version is 8.2.3 and the latest available version is 8.6.1.
ios는 xcode 15.0.x 버전에서 ns 8.5.3이랑 호환이 되었다. (다행이다...)
cocoapods와 xcodeproj가 호환이 안되었는데 공식문서에서 ruby gem을 설치할때 2.7버전으로 설치해서 너무 이전버전이라 안 맞는 것 같다. 그래서 최신 ruby로 설치 후(환경변수도 ruby@2.7이라고 하면 안된다!!) 다시 cocoapods와 xcodeproj를 설치하니까 잘 돌아갔다. 😅 개발환경 셋팅부터가 만만치 않은 ns였다..
결론
Device : Mac M1 OS : sonoma 14.1.1 NativeScript : 8.5.3 android sdk : android 12L xcode : 15.0.x
- 웹 문서에 담겨 있는 모든 요소를 따로 제어 ➡️ 조건에 맞거나 사용자 동ㅇ작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응
- DOM에서는 웹 문서를 하나의 객체로 정의
- 텍스트, 이미지, 표 등 모든 요소를 각각 객체로 정의
- 웹 문서들도 객체이므로 프로퍼티, 메서드를 갖고 있음
🥥 DOM 트리
- 웹 문서는 여러가지 태그가 서로 포함 관계('부모', '자식')를 가지고 있음
- DOM을 활용해 웹 문서의 요소를 부모와 지식으로 구분해서 표시하면 트리모양이 되서 DOM 트리라고 부름
- 노드(node) : DOM 트리에서 가지가 갈라져 나가는 부분
- 루트 노드(root node) : html 노드
- 형제 노드(sibling node) : 같은 부모를 가진 노드
🥥 웹 요소에 접근하기
🍎 querySelector() 함수
- 선택자를 사용해 웹 요소의 1가지만 가져올 때 사용
- document 객체에 포함된 함수
document.querySelector("p") // p태그 요소 중 첫번 째 요소
document.querySelector("#container") // id가 container인 요소
document.querySelector(".box") // class가 box인 요소 중 첫번째 요소
- 조건에 맞는 요소가 여러개 일 경우 첫번째 요소 1개만 가져옴
🍎 querySelectorAll() 함수
- 한꺼번에 여러개 요소를 가져와 노드 리스트 형태로 저장
- 노드 리스트에 저장된 요소는 배열처럼 인덱슬ㄹ 사용해서 접근
🍎 웹 요소 내용 수정하기
- 프로퍼티를 사용
웹요소.innerText
웹요소.innerHTML
웹요소.textContent
innerText : 웹 브라우저 창에 보이는 내용만 가져옴 (감춰진 것은 안보임)
innerHTML : 요소 안에 있는 태그 내용을 함께 가져옴
textContent : 소스에 있는 대로 요소의 내용을 가져옴 (감춰진 것까지 보임)
- 내용을 가져와서 내용 수정하기
웹요소.innerText = 내용
웹요소.innerHTML = 내용
웹요소.innerContent = 내용
워낙 유명해서 알고는 있었지만 한번도 관심이 안갔었는데 서점에서 조금 읽어보니까 흥미로워서 바로 충동적으로 사버렸다.
이 책은 사람들이 본능적으로 하게되는 오해에 대해서 직관적이면서 이해가 쉽도록 잘 풀어서 쓴 책이다.
저자는 이 책을 아들 며느리와 함께 집필하였는데 이 책을 출간하기 전에 세상을 떠났다.
저자는 다양한 단체와 기업, 유명인사들을 만나면서 사람들이 세계에 대해 오해하고 있는 부분을 강연하고 다닌 사람이었다.
나도 마찬가지로 세계에 대해서 오해하고 있는 사람중 한명이었고 이 책 덕분에 내가 본능적으로 오해를 하고 얼마나 왜곡된 시각을 갖고 있는지 알게 되었다.
현대시대에서 많은 정보와 통계가 오픈되어 있고 인터넷으로 전세계가 연결되어 있지만 사람들은 세계를 보는 시각이 왜곡되었다고 소개해준다.
사람들은 '개발도상국'과 '선진국' 이란 단어로 서로 큰 차이가 있다 생각하고 그 사이엔 국가가 없거나 적다고 생각한다. (간극 본능)
하지만 사실 개발도상국과 선진국으로 나눌수 있을 정도로 세계는 나뉘어 있지 않고 세계적으로 기술의 발전과 노력으로 이미 대부분 많은 개발도상국이었던 나라들은 커다란 발전을 이루어서 개발도상국이라 부르는 것은 실례이다.
대신 저자는 소득에 따른 4개의 단계로 나누어서 1단계부터 4단계로 나누어서 표현하라고 추천해준다.
내가 보기에도 두개로 나누는 것보다 4단계로 나누는게 더 올바르다고 생각한다. 하지만 나도 이 책을 읽기 전까지는 오해를 하고 있었고 아직도 아프리카와 동아시아를 제외한 다른 아시아 국가들은 개발도상국이라고 생각하고 있었다.
이런 오해는 사람들이 일부러 하거나 누군가 세뇌를 한 결과물이 아니라 저자는 인간의 본능에서 나오는 오해라고 얘기한다.
집 밖에 야생동물들이 다니는 시대에는 위험으로부터 몸을 보호하기 위해 이러한 본능들이 반드시 필요했지만 이제는 그런 시대는 지나갔고 그런 위험은 밖에 없다. 그래서 그런 위험에서 지키던 본능으로 사람들이 세계를 이상하게 왜곡해서 보고있다고 해석한다.
앞서 소개한 간극본능 처럼 다른 본능들이 사람들이 세계를 오해하게 한다.
저자가 소개한 본능은 간극본능, 부정본능, 직선본능, 공포본능, 크기본능, 일반화본능, 운명본능, 단일관점본능, 비난본능, 다급함본능 총 10가지 이다. 각 장에서 하나씩 소개하면서 적절한 일화와 어떻게 이 본능이 잘못되었고 도표와 자료들을 통해 왜 틀렸는지 설명해주었다.
이 책 덕분에 올바르게 세계를 볼 수 있는 시각이 생겼고 전체를 보는 올바른 틀을 갖게 되었다. 또한 전세계가 얼마나 발전했으며 그만큼 기아와 아동사망률이 줄어서 희망이 있고 절망적이지만은 않다는 것을 알게 되었다. 그리고 전세계에 대한 시각 뿐 아니라 어떠한 현상을 볼 때 전체적인 것을 냉정하고 올바르게 분석하는 사고방식을 알게 되어 고마운 책이다.
이 책은 전체를 보는 통찰력이 필요한 사람에게 적극 추천한다. 조직에서 의사 결정권을 갖고있는 사람이거나 전체적인 시장을 분석해야하는 사람에게는 필수적이다.
이런 사람의 본능을 이해하지 못한 채로 전체를 해석하려고 하거나 무언가를 결정하려고 한다면 잘못된 결과가 나올 수도 있을 것이다.
요즘 사람들은 너무 자극적인 자료로 편파적이게 세상을 보고 점점 시스템이 복잡해지다보니 전체를 보는 능력이 떨어진다. 그래서 자기가 하는 역할에만 집중해서 그런지 전체적인 시각은 많이 부족하다고 느낀다.
황농문 박사는 평소에 유튜브를 통해 알고있던 사람이었다. 몰입에 대한 이론과 실천을 통해 과학분야에서 업적을 세운 사람이다. 그런데 계속 하나씩 찾아보다보니 '몰입'에 대해 깊이 알고 싶어져서 책을 알아보게 되었고 기왕 사는김에 100쇄 기념 에디션으로 나온 책을 작년에 구매하고 읽었었다. 그런데 계속 만나는 사람마다 몰입을 얘기하고 책을 추천하다보니 글로 남겨놓으면 좋을 것 같아 간단한 생각을 정리해본다.
몰입은 대부분의 사람들이 못하고 있고 소수의 사람들만 실천해오던 것이다. 몰입 이론을 모르더라도 무언가에 업적을 내거나 성공을 이룬사람들 대다수는 몰입을 자동적으로 하고 있었다. 이 책의 저자가 말하는 몰입은 한 문장으로 설명할 만한 간단한 개념이 아니다. (몰입이 무엇인지는 책이나 유튜브를 통해 직접 확인하길 바란다.)
몰입은 무언가를 연구하거나 공부하거나 문제를 해결할 때 매우 효과적이다. 몰입을 하게되면 이 세상에 그 문제(혹은 사물)과 나 단 둘이 있는 느낌을 받고 평소 발휘할 수 있는 것보다 훨씬 큰 능력을 발휘할 수 있게 된다. 그리고 스포츠선수나 무용수등 전문가들이 '물아일체', '무아경'에 들어간다는게 몰입을 해서 지금 자신이 몰입하고 있는것과 자신만 있는 것 처럼 느껴지고 고도의 집중된 사태를 보여준다. 그리고 신기한건 어느 분야든 몰입은 가능하고 그것을 통해 내가 해낼 수 없을 것이라 생각했던 것을 해낼 수 있다는 것이다.
물론 몰입을 오래 지속하게 되면 주변 다른 것엔 소홀해지게 된다. 가족, 친구 등 특히 인간관계에서 소홀해지는 것은 어쩔 수 없다. 그래서 저자는 몰입을 장기적으로 들어가기 전에 미리 주변에 얘기해서 인간관계가 틀어지는 것을 방지하라고 조언해준다.
이 책의 장점은 몰입을 체계적으로 실천하는 방법을 알려줄 뿐만 아니라 모든 분야에 적용할 수 있다는것을 알려주고 있다. 몰입은 연애나 결혼 생활에서 까지 적용이 가능한데 내가 만나는 사람의 장점이 나중엔 단점으로 보이게 되고 그 때문에 싸우고 불행한 결말을 겪는 경우가 많다. 하지만 몰입을 통해 내가 그 사람을 처음 만났던 그 때를 기억하면서 그 사람의 장점에 몰입하게 되면 상대방이 너무 매력적으로 보이고 심지어 함께 있어주는 것만으로도 감사한 마음마저 들게 된다.
나는 이 책을 연구직이나 학생 외에도 주변 모든 사람에게도 추천해주고 싶다. 직장일을 하는 사람에게도 몰입은 꽤나 큰 도움이 된다. 일을 하다보면 해결해야하는 문제들을 몰입을 통해서 빠르게 간파하고 해결하게 되면 주변에서 평판이 좋아질 뿐아니라 연봉을 올리거나 승진을 하는데도 큰 도움이 될것이다. 나는 원래 체질 때문에 산만해서 고치려는 과정에서 몰입을 느낄 수 있었고 내가 두루뭉실하게 알고 있던 몰입에 대한 이론을 체계화해서 정리해준 책이라 인생에 정말 중요한 지표같은 책이다.
그리고 글이 가독성이 좋고 예시도 적절해서 평소 독서를 하지 않더라도 이해하는데 무리가 없는 좋은 책이다.
자바스크립트를 시작하게 된 이유는 프론트에도 관심이 생기면서 백,프론트엔드 전부 만들고 싶어졌기 때문이다. 공부는 강의나 글을 조금보다가 DOIT이라는 시리즈의 '모던자바스크립트 프로그래밍의 정석'으로 시작한다. 아무도 안 읽을 기초 개념에 대한 글을 쓰게 된 이유는 일을 하느라 힘들다고 핑계대면서 게을러지는데 하루이틀 쉬더라도 꾸준히 이어갈 수 있도록 하기 위함이다.
자바스크립트를 배운 후에 가능하다면 타입스크립트도 좀 해보고 Vue.js 를 배워서 프론트를 직접 짜보고 싶다. 백엔드도 재밌었지만 프론트도 나름의 매력이 있는 것 같다. 다양한 요소들로 화면을 예쁘게 꾸며보는것도 재밌을 것 같다. 컴포넌트니 아톰이니 모르는 개념이 아직 많지만 조금씩 하다보면 풀스택이 되어 있을 것이다. ㅎㅎ Vue 를 하고 싶은 이유는 리액트를 공부하려 했다가 요즘 Vue를 쓰는 회사가 많아진 것으로 보여서 알아보았더니 소규모 프로젝트를 하기엔 Vue가 적절할 것 같아 보였다. 리액트가 아직은 프론트 시장을 장악하고 있지만... 혼자 프로젝트도 할 수 있을라면 Vue를 배우는게 좋을 것고 여러가지 갖다붙이기에도 Vue가 좋다고 한다.
👀 에크마스크립트? ES6?
우선 들어가기전 '자바스크립트' 이름에 왜 '자바'가 들어가있는 이유가 무엇일까?
전혀 비슷한 면도 없고 자바를 토대로 만든 언어도 아닌데 이름에 자바가 들어가는 이유는 따로있다. 우선 인터넷 초창기에 자바스크립트의 전신인 '라이브스크립트'를 '넷스케이프(Netscape)라는 회사가 개발했다. 그러다 '썬 마이크로시스템즈'가 라이브스크립트의 개발권을 넘겨받았는데, 그 회사가 '자바(java)'를 만든 회사라 그 이름을 따서 '자바스크립트'가 된것이다.
자바스크립트를 부를 때 '에크마스크립트(ECMAScript)'라고도 많이 한다는데 그 이유는 아까 '라이브스크립트'를 만든 '넷스케이프'에서 자바스크립트 기술 규격을 표준화하기 위해 '유럽컴퓨터제조연합(ECMA)'에 제출했는데, 이후 자바스크립트가 스크립트 표준으로 채택되면서 공식 이름이 '에크마스크립트'로 정해진 것이다.
그 이후 에크마스크립트는 새로운 기능이 추가되면서 업그레이드 됐는데 그때마다 edition이 달려서 ES2, ES3,... 이렇게 이어졌는데 에크마스크립트위원회에서 매년 업그레이드 되니까 이름뒤에 년도를 붙여서 '에크마스크립트 2015' 라고 부르게 되었다. 그래서 ES6라고도 하고 에크마스크립트 2015라고도 한다.
그럼 에크마스크립트는 자바스크립트인걸까? 아니다. 에크마스크립트는 자바스크립트를 기반으로 표준화된 스크립트 언어이다. 그래서 자바스크립트는 에크마스크립트의 표준사양을 따르는 가장 유명한 언어이지만, 그외에도 여러 스크립트 언어가 있다.
🖥 기본 입출력
▶︎ alert()
- 알림창 (확인만 가능)
- 괄호 안에 내용 작성
▶︎ confirm()
- '확인' or '취소' 가 가능한 창
- 확인 클릭하면 true, 취소 클릭하면 false 리턴
- 괄호안에 내용 작성
▶︎ prompt()
- 사용자가 값을 입력할 수 있는 창
- 입력후 '확인' or '취소'
- 괄호안에 사용자에게 보여줄 내용 작성
- 값 입력 후 확인 클릭하면 사용자가 입력한 값 리턴
- 값을 입력하지 않으면 빈 값 리턴
- 취소를 누르면 null 값 리턴
- prompt(내용, 기본값) 으로 기본값을 지정가능
▶︎ console.log()
- 콘솔 창에 내용 표시
✳︎ 기본적으로 자바스크립트에서 문자열에 변수를 삽입할 때 연결연산자 '+'를 사용하지만 '템플릿 리터럴' 방식으로도 가능
템플릿 리터럴 방식이란?
큰따옴표(" ") 대신 백틱(` `)을 이용해서 문자열을 감싸고 변수는 ${변수명}을 이용해서 문자열 안에 쉽게 넣는 것이다. 더 직관적이어서 틀릴 확률이 낮아지고 띄어쓰기, 이스케이프 문자를 그대로 표시할 수 있어서 편리하다.
name = "wisejade"
class = "javascript"
console.log(`${name}은 ${class}를 공부중입니다.`)
▶︎ document.write()
- 간단한 내용을 웹 브라우저 창에 보여줄 때 사용
⛅️ 변수
변수는 다른 언어를 배웠을 때와 마찬가지로 사용하면 된다. 숫자가 앞에올 수 없고 공백을 포함하면 안된다. 단어 하나로 이루어져있을 경우 모두 소문자로 사용하면 되고 여러 단어로 이루어져있을 경우엔 카멜 표기법을 쓰거나 언더바(_)를 쓰면 된다.
유니코드 문자를 변수에 사용해도 되지만 인코딩할 떄 문제가 생길 수 있으므로 사용하지 말자!
변수 선언은 변수는 예약어 let을 사용하고 상수는 예약어 const를 사용한다.
(var도 많이 썼지만 호이스팅 문제 때문에 이제 안쓴다.)
😮 자료형
자바스크립트의 자료형은 크게 원시타입(Primitive type)과 객체(Object)로 나뉜다.
원시 유형은 하나의 값만 저장하는 자료형으로 number, string, boolean, undefined, null, symbol 이 있다.
이외의 모든 건 객체이다.
▶︎ typeof()
- 자료형을 알수 있는 함수
- 괄호 안에 값이나 변수를 넣으면 어떤 자료형인지 알려준다.
✳︎ 자바스크립트는 실수 계산에 적합하지 않다. 자바스크립트는 실수 정수 자료형 나누지 않고 모든 수는 number형으로 저장된다. 하지만 실수를 저장하는 방법 때문에 실수 계산이 틀릴 수도 있다.
▶︎ NAN
- Not a Number (숫자가 아님) 을 의미
- 변수를 선언만 하고 값이 할당되지 않은 상태에서 그 변수를 연산에 사용할 경우 NaN 값이 됨
▶︎ 자바스크립트에서 falsy로 인정하는 값
- 0
- ""
- NaN
- undefined
- null
▶︎ undefined vs null
- undefined는 값이 할당되지 않았을 때 변수의 초기값
- null은 변수에 값이 없거나 유효하지 않다는 의미로, 자바스크립트에서 반환하거나 사용자가 할당할 수 있는 값
🛌 객체(Object)
- 중괄호({}) 안에 key, value 쌍으로 여러개를 만들 수 있음
let object1 = {
name : "table",
color : "brown",
height : 100
}
