Vue와 NativeScript를 사용하여 하이브리드 앱을 개발하려고 설치하고 있었다.

NativeScript-Vue 앱 프로젝트를 만드는 방법은 공식사이트에 잘 정리되어 있다. (한국어 버전은 아무래도 업데이트가 느려서 영어 버전을 읽는 것이 가장 최신 정보를 볼 수 있다!)

https://nativescript-vue.org/ko/docs/introduction/

MAC OS에서 NativeScript 셋팅하기

https://docs.nativescript.org/setup/macos

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

1. 현재 열려있는 포트 확인하기

sudo lsof -PiTCP -sTCP:LISTEN

2.  포트 닫기

sudo lsof -i :8080

: 뒤에 원하는 포트번호 입력

3. 확인한 PID 번호로 닫기

sudo kill -306 PID

이번에 공부를 시작하면서 맥북을 사기 전까지 나는 맥 OS를 접해본 적이 없었다.

그래서 처음 맥북을 써보면서 복붙부터 모든 기능을 검색해가면서 쓰고있었는데

어제 갑자기 바탕화면에 사이트 바로가기를 만들고 싶어졌다.

그래서 먼저는 윈도우 처럼 될 줄 알고 바탕화면에서 마우스 우클릭을 시도해보았다.

그런데...

바로가기 새로만들기가 없다..!

나중에도 필요할 것 같아서 구글링을 해봤는데

크게 두가지 방법이 있었다.

1. 사이트 주소 드래그 하기

첫번째 방법이 쉽고 간편하다.

바탕화면에 바로가기를 만들고 싶은 사이트의 주소창을 드래그 하면된다.

드래그 앤 드롭이 맥OS가 직관적이고 편리하게 만드는 기능 중 하나이다.

원하는 사이트 주소창 선택이 안되면 한번 클릭하고 Command + A를 누르면 주소가 전체 선택된다.

그 상태에서 마우스로 클릭하고 드래그해서 바탕화면이나 원하는 폴더에서 놓기만 하면 된다.

그러면 위 그림처럼 사이트 바로가기가 생긴다.

아이콘이 기본 아이콘이라 별로라면 아이콘도 바꿔주면 된다.

나는 기본 아이콘이 맘에 들지 않아 사진으로 교체하려고 했다.

< 아이콘 바꾸는 방법 >

마우스 우클릭 → 정보 가져오기를 누른다.

이 창에 원하는 사이트의 아이콘을 드래그해서 놓으면 된다.

나는 원하는 이미지가 로컬 폴더에 있어서 원하는 이미지 파일을 드래그했다.

드래그하고 원래 아이콘에 가져다 대면 위에 사진처럼 초록색 플러스가 생긴다!

초록색 플러스가 생겼을 때 놓으면 된다.

그러면 아이콘도 원하는 이미지로 바뀐다!

2. Automator 를 이용해서 바로가기 만들기

두 번째 방법은 첫 번째 보다는 꽤 복잡한 방법이다.

바로가기를 앱처럼 만들어서 Spotlight에서 검색해서 쓰거나 원하는 폴더마다 넣어주고 싶을 때 이 방법을 사용하면 된다.

Spotlight에서 automator를 검색해서 들어간다.

들어가서 '유틸리티'를 클릭하고 'AppleScript 실행'을 클릭한다.

그리고 스크립트가 생성되면 아래 처럼 작성하면 된다.

tell application "Google Chrome"
	activate
    open location " "
end tell

'Google Chrome' 이라고 작성한 부분은 사파리로 열고 싶다면 'Safari' 또는 다른 브라우저 앱 이름을 써주면 된다.

그리고 open location " " 따옴표 안에 바로가기를 만들고 싶은 사이트 주소를 붙여넣으면 된다.

이제 이름을 지정하고 위치를 '응용 프로그램' 폴더에 넣어주고 저장하면 바로가기 앱이 생성된다!

앱 아이콘 바꾸는 방법은 첫 번째 방법 아래에 작성한 방법과 똑같이 하면 된다.

이제 Finder를 켜서 응용프로그램 폴더에서 방금 만든 앱을 바탕화면에 드래그만 해주면 완성이다~!

여기까지 긴 글 봐주셔서 감사합니다. 🙃

좋은 하루되세요.

이 글은 맥 OS를 기준으로 작성되었습니다.

○ CLI 와 GUI

명령줄 인터페이스(Command-Line-Interface, CLI)

• 명령어로 컴퓨터를 제어하는 방식
• 그래픽 작업을 안 거치기 때문에 빠르고 안정적
• AWS(Amazon Web Service) 같은 서버는 CLI 사용
• 터미널, 도스 등

그래픽 사용자 인터페이스(Graphic User Interface, GUI)

• 사용자가 편리하도록 입출력 기능을 쉽게 그래픽으로 나타내어 클릭 등으로 쉽게 컴퓨터를 제어하는 방식
• 그래픽에 컴퓨터 자원을 사용해서 CLI 보다는 느림
• 윈도우, 맥 등

프롬프트(Prompt)

• 터미널에서 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 공간
• CLI의 명령줄 대기모드

○ CLI 기본 명령어

※ CLI에서 명령어와 생성할 폴더 이름 사이 공백으로 구분

ex) mkdir wjcodding

pwd : 현재 위치 확인하기

print working directory의 약자

현재 작업중인 폴더 위치 출력

mkdir : 새로운 폴더 생성

make direcotries

ls : 특정 폴더에 포함된 파일, 폴더 확인하기

• list의 약자
• 자주 같이 사용하는 옵션(‘ - ‘를 이용해 옵션을 입력했다고 컴퓨터에 전달)
• ls -l (파일의 포맷을 전부 표현)
• ls -a (all, 숨어있는 폴더나 파일을 포함한 모든 항목 출력)
• ls -al 또는 ls-la (옵션의 순서는 기능에 영향 미치지 않음)로 사용
• -l 옵션에서 맨 앞에 d로 시작하는 건 폴더(directory), -로 시작하는 건 파일

open .

현재 위치를 GUI로 열음

cd

change directory의 약자

폴더로 진입

touch

파일을 생성

cat

• 파일의 모든 내용을 터미널에 출력
• 파일을 연달아 입력하면 순차적으로 출력
• 크기가 큰 파일을 출력할 때는 비효율적

rm

• remove 폴더나 파일 삭제
• 휴지통을 거치지 않고 삭제됨
• 파일 삭제할 떄는 'rm [파일명]' 으로 사용
• 폴더 삭제할 때 rm [폴더명]만 입력하면 오류 뜸
• 폴더 삭제시에는 'rm -r [폴더명]'

<자주 사용하는 옵션>

-f : force, 강제로 파일이나 폴더를 삭제하고 대상이 없는 경우에는 메시지를 출력하지 않음

-r : recursive(재귀적), 폴더 지움

-d : 비어있는 폴더들만 제거

-i : 매번 삭제할때마다 사용자에게 삭제할것인지 물어봄

-l : 3개의 이상의 파일을 삭제하거나 폴더 내부가 비어있지 않을때만 삭제할것인지 물어봄

-v : 삭제되는 대상의 정보를 출력

mv

• move의 약자
• 폴더나 파일의 이름 변경, 또는 위치 옮기기
• 위치 옮기기: mv [옮길 폴더나 파일의 이름] [도착할 폴더 이름]
• 이름 바꾸기: mv [바꿀 폴더나 파일 이름] [변경하고자 하는 이름]

cp

• copy의 약자
• 폴더나 파일 복사하기
• 파일 복사하기: cp [원본 파일 이름] [복사할 파일 이름]
• 폴더 복사하기: cp -rf [원본 폴더 이름] [복사할 폴더 이름]

clear

터미널 정리하기

history

이전에 사용한 명령어 확인하기

man

명령어 메뉴얼 확인하기

-h 또는 --help

명령어의 옵션 확인하기

명령어 이름만 입력해도 됨

○ 관리자 권한

절대 경로와 상대경로

절대경로

처음부터 시작하여 현재까지 절대적인 경로

기준점 : 루트 폴더(/,최상위)

' / '(root, 루트)는 Linux의 관리자 영역

Linux는 사용자와 관리자 명확히 분리

• 사용자가 필요할 때마다 관리자권한(프로그램 변경, 설치, 삭제)만 부여받음
• 루트폴더로 이동해서 mkdir로 폴더 생성하려하면 Read-only file system 에러(파일을 읽을 수만 있고 생성,변경,삭제는 할 수 없다는 뜻)

루트 폴더는 관리자의 영역임, 사용자 권한으로는 할 수 있는 일이 없음

현재 로그인된 사용자를 확인하는 명령어 : whoami

관리자는 사용자 폴더는 물론 시스템 자체에도 접근이 가능

관리자 권한으로 변경한 내용은 사용자 권한으로 해결 못함

상대경로

현재 위치를 기준으로 상대적인 경로

최상위(/)를 거치지 않고도 이동이 가능

사용자와 관리자

※ CLI 경로

.

현재폴더

..

현재 폴더보다 앞에 있는 폴더

/

경로 사이에 쓰는 슬래시는 폴더를 의미

폴더 대상일 땐 마지막 슬래시 생략 가능

~/helloWorld/hello/ 와 ~/helloWorld/hello 는 동일한 위치

~

현재 작업 폴더가 홈폴더라는 의미, 홈폴더로 이동하는 명령어

(Mac은 [사용자이름]@Macbook ~ %)

sudo

• 사용자가 관리자 권한을 얻을 수 있는 명령어
• 명령어 앞에 작성하면 관리자 권한으로 명령 실행
• ex) sudo mkdir hello
• 관리자(staff또는 root) 소유의 폴더
• 관리자 권한으로 프로그램 설치,변경 또는 삭제하는 권한을 차단하여 시스템을 안전하게 보호
• sudo를 사용한다고 사용자가 관리자가 되는 것은 아님!

○ CLI 환경 에디터

• vim(vi), emacs, nano 등
• vim과 emacs는 진입장벽이 있음
• nano는 리눅스, 맥에 기본으로 깔려있고 난이도가 쉬운 편

nano

실행: 'nano [파일명]' 또는 'nano' 명령어로 그냥 실행할 수 있다.