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

▶︎ DOM

🥥 DOM 이란?

DOM (Document Object Model, 문서 객체 모델)

- 웹 문서에 담겨 있는 모든 요소를 따로 제어 ➡️ 조건에 맞거나 사용자 동ㅇ작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응

- 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 = 내용

- 이미지 요소에 접근 후 src 속성값 바꾸기

이미지 요소.src = 이미지 파일

🥥 자바스크립트로 스타일 수정하기

🍎 css 속성에 접근해서 수정하기

요소.style.속성명

const button = document.querySelector("button");

button.onclick = () => {
	button.style.backgroundColor = "black";
   	button.style.color = "white";
}

🍎 classList

- 클래스 스타일을 추가 또는 삭제 가능

- classList 는 요소에 사용한 클래스 스타일을 모두 모아 놓은 프로퍼티

요소.classList;		// 요소에 사용된 클래스 리스트 모두 볼 수 있음

- 스타일을 추가, 삭제하거나 토글하기

요소.classList.add(클래스명)
요소.classList.remove(클래스명)
요소.classList.toggle(클래스명)

- 특정 클래스 스타일이 있는지 확인하기

요소.classList.contains(클래스명)

🥥 DOM에서 폼 다루기

※ 폼(form) : 사용자가 내용을 입력할 수 있는 웹 요소

🍎  텍스트 값 가져오기

요소.value

document.querySelector("#name-box").value

🍎 name 속성값을 사용해 폼 요소에 접근하기

<form name="order">
	...
    <input name="product">

HTML에서 위와같이 있을경우 input 박스에 접근할 때 아래와 같이 name으로 접근할 수 있다.

document.order.product.value

🍎 form 배열을 사용해서 접근하기

document.forms					// 모든 form을 가져옴
document.forms[0].elements		// 첫번째 form에 있는 폼 요소를 모두 가져옴
document.forms[0].elements[0]	// 첫번째 form 요소에 첫번째 요소를 가져옴

🍎 선택 목록, 항목에 접근하기

- HTML에서 selector를 사용한 선택 목록의 option(항목)에 접근할 때 아래와 같은 방법을 사용할 수 있다.

document.querySelector("#product").options

- HTMLOptionsCollection 형태로 저장

- selectedIndex 에는 사용자가 선택한 옵션의 인덱스 값이 저장 (기본값 0)

➡️ selectedIndex를 활용해 사용자가 선택한 값을 가져올 수 있음

🍎 체크박스, 라디오 버튼에 접근하기

※ 체크박스 : 여러가지 항목 중 여러개를 선택할 수 있음

※ 라디오박스 : 여러가지 항목 중 한가지만 선택할 수 있음

<h1>메뉴 주문</h1>
<form name="orderForm">
<fieldset>
  <legend>메뉴</legend>
  <p>메뉴를 선택하세요</p>
  <label><input type="checkbox" name="menu" value="dolce">돌체라떼</label>
  <label><input type="checkbox" name="menu" value="vanilla">바닐라라떼</label>
  <label><input type="checkbox" name="menu" value="choco">초코라떼</label>
</fieldset>
<fieldset>
  <legend>구매수단</legend>
  <p>구매 수단을 선택하세요</p>
  <label><input type="radio" name="purchase" value="card">카드</label>
  <label><input type="radio" name="purchase" value="cash">현금</label>
  <label><input type="radio" name="purchase" value="gifticon">기프티콘</label>
</fieldset>
</form>

- label 태그에 type 속성으로 checkbox인지 radio인지 구분

- 같은 그룹 별로 같은 name 붙임

- 라디오 버튼에 접근하기

document.orderForm.purchase

name을 사용해 접근

RadioNodeList 라는 노드 리스트 형태로 저장됨

선택한 항목은 value 값이 RadioNodeList의 value에 저장됨

- 체크 박스에 접근하기

document.orderForm.menu

마찬가지로 name 으로 접근

document.orderForm.menu[0].value	// 'dolce'

인덱스로 접근해서 특정값을 가져올 수 있음

- checked 속성

라디오 버튼, 체크 박스에는 checked 속성이 있음

선택했으면 true, 선택하지 않았으면 false

document.querySelectorAll("input[name='menu']:checked")	// 메뉴 중 선택된 항목만 가져옴

🧀  함수

🥨  함수 선언하기

function 함수명(매개변수) {
	명령들
}

function example(a, b) {
	console.log(`${a}, ${b}`);
}

🥨  함수 호출하기

example(10, 20);	// "10, 20" 출력

- 매개변수, 인수, return은 다른 언어와 동일하게 사용한다.

🥨  기본 매개변수

- 에크마스크립트 2015부터 새롭게 생긴 기능

- 함수를 선언할 떄 매개변수의 기본값을 지정할 수 있음

- 값을 전달받지 못한 매개변수 값이 undefined가 되어 결과가 NaN 이 되는 것을 방지

function sum(a, b = 1, c = 2) {
	return a + b + c;
}

console.log(sum(3, 4, 5));	// 12
console.log(sum(3, 4));		// 9
console.log(sum(3));		// 6

🧀  스코프

🥨  스코프(scope), 란?

- 선언한 변수의 적용 범위

- 어느 위치에서 변수에 접근할 수 있는지를 가리킴

🥨  지역 스코프

- 변수를 특정 영역에서만 사용할 수 있을 때 '지역 스코프를 가지고 있다'고 함

- 지역 스코프를 가지고 있는 변수를 '지역 변수'라고 함

- var 예약어(ES6이전) 를 사용해서 변수를 함수내에서 선언할 경우 지역 스코프를 가짐

🥨  전역 스코프

- 프로그램 시작 부분에서 변수를 선언하면 프로그램 전체에서 사용할 수 있음

- 전역 스코프를 가지고 있는 변수를 '전역 변수'라고 함

- var 예약어를 사용하지 않으면 어디서 선언하든 전역 변수로 인식함

- let, const 예약어로 사용한 변수는 '스크립트 스코프'를 가진다고 함

🥨  블록 스코프

- 중괄호 {} 에 둘러싸인 영역 내에서 유효한 변수를 '블록 스코프를 가진다'고 함

- let, const 를 사용해 만든 변수는 블록 스코프를 가짐 (블록 변수)

🔥  자바스크립트 변수 주의사항

var 변수보다 let, const 변수를 사용한다

전역 변수는 최소한으로 사용한다

객체 선언은 const를 사용한다

🧀  함수 표현식

🥨  익명 함수

- 함수에 이름이 없는 함수

변수에 할당해서 사용하는 익명 함수

let multiply = function(a, b) {
	return a * b;
}

- 함수를 마치 하나의 값처럼 사용할 수 있음

- 함수를 변수에 할당할 수도 있고, 함수를 다른 함수의 매개변수로 넘길 수도 있음

🥨  즉시 실행 함수

- 한번만 실행하는 함수일 경우 함수를 정의하면서 동시에 실행할 수도 있음

- 함수를 식 형태로 선언하므로 마지막에 세미콜론 (;) 붙여야함

(function(매개변수) {
	...
} (인수);

(function(a, b) {
	console.log(a*b);
} (5, 10);		// 콘솔 창에 '50'출력

🥨  화살표 함수

- 에크마스크립트 2015 부터 => 를 이용한 화살표 표기법을 사용함

- 함수를 더 간단하게 선언할 수 있어서 많이 사용

(매개변수) => {함수 내용}

매개변수가 없을 때

const hi = () => {
	return 'hi';
}

- 괄호() 안에 비워둠

함수가 한줄일 때

const hi = () => return 'hi';

- 중괄호 생략 가능

함수식에 return문만 있을 때

const hi = () => 'hi';

- return 도 생략가능

매개변수가 1개일 때

const hi = user => console.log(`${user}님, 안녕하세요`);

- 매개변수의 괄호() 생략 가능

매개변수가 2개 이상일 때

const hi = (user, id) => console.log(`${id}, ${user} 님 안녕하세요`);

🥨  콜백 함수(callback function)

- 콜백 함수는 다른 함수의 인수로 사용하는 함수이다.

- addEventListner() 함수에서 함수를 인수로 넣는데 이렇게 다른 함수의 인수가 되는 함수를 콜백 함수라고 함

- 다른 언어와 다르게 자바스크립트에서는 함수이름에 괄호를 제외하고 이름만 작성해서 함수를 호출하는 대신 변수처럼 넣을 수 있음

const button = documnet.querySelector("button");

function display() {
	alert("클릭!");
}

button.addEventListner("click", display);

▶  자바스크립트에서는 함수가 1급 시민

- 1급 시민(first-class citizen) 조건

1. 변수에 할당할 수 있어야 한다.

2. 다른 함수의 인자로 사용할 수 있어야 한다.

3. 다른 함수에서 반환값으로 반환할 수 있어야 한다.

자바스크립트는 '함수'가 1급 시민이다.

🧀  전개 구문

전개구문(spread syntax)은 배열처럼 값이 다양한 자료를 한꺼번에 인수로 넘겨주거나 배열과 배열을 합할 때처럼 배열을 하나의 덩어리로 처리해야할 때 유용하다.

🥨  전개 구문 작성 방법

colors = ["black", "white", "red", "blue", "green"];
console.log(...colors);
/*
black white red blue green
*/

- 다른 정보는 필요없고 값만 꺼내 사용하려고 할 때 전개 구문 유용

🥨  나머지 매개변수

- 함수를 선언할 때 나중에 몇 개의 인수를 받게 될지 알 수 없는 경우 사용 (나머지 매개변수)

const add(...numbers) {
    let sum = 0;
    for (let number of numbers) {
    	sum += number;
    }
    return sum;
}

- 일부분은 변수로 받고 그 외에는 나머지 매개변수로 받을 수도 있음

const add(first, ...numbers) {
    let sum = first;
    for (let number of numbers) {
    	sum += number;
    }
    return sum;
}

🧀  타이머 함수

- 자바스크립트에서 특정 시간이 되었을 때 함수를 실행하거나 특정 시간 동안 함수를 반복하는 등 시간을 재는 함수가 있음 (타이머 함수)

- 실행할 함수와 시간을 인수로 지정

🥨  일정 시간마다 반복 - setInterval()

setInterval(콜백 함수, 시간)

- 시간은 밀리초 단위 사용 (1000밀리초 = 1초)

- 콜백 함수를 미리 선언했다가 인수로 전달해도 되고 함수 표현식으로 선언하면서 동시에 실행 가능

🥨  반복 실행 멈추기 - clearInterval()

clearInterval(타이머)

- setInterval() 함수를 실행하면 웹 브라우저를 종료하기 전까지 실행됨

- setInterval() 의 반복을 멈추는 함수

- setInterval() 에 타이머 이름을 지정해줄 수 있어서 clearInterval() 괄호안에 이름을 넣어서 지정

const timer = setInterval(() => {
  console.log("hi?");
}, 3000);

clearInterval(timer);	// 타이머 종료

- 보통 특정 횟수 또는 시간만큼 반복 후 종료하도록 설정함

🥨  특정 시간 이후에 실행하기 - setTimeout()

- 지정한 시간이 지난 후에 콜백 함수 실행

setTimeout(콜백 함수, 시간)

자바스크립트에서 NaN은 비교연산자(==, ===, !=, !== 등) 으로 비교가 안된다. 왜냐하면 NaN은 자기자신과 비교해도 다르다고 하기 때문이다!! (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN)

let temp = Number("안녕하세요");		// temp는 NaN이 된다.
temp === NaN 		// false!⚠️

자바스크립트는 자료형이 자꾸 바뀌어서 골치아픈데 NaN에서 직접비교하면 원하는 결과가 안나온다. 😭

NaN인제 체크하고 싶다면 함수를 사용하면된다!

또는 자기 자신과 다른지 체크하면 된다.. NaN은 유일하게 자기과 비교했을 때 다르다고 하는 값이다. 

function valueIsNaN(num) {
	return num !== num;		// NaN을 제외한 모든 값은 false, NaN만 유일하게 true로 나온다.
}

🌟  Object.is()

Object.is() 는 객체안의 두 값이 같은지 비교해주는 함수이다.

let isNaN = NaN;
Object.is(isNaN, NaN)	// true!

이 함수를 사용해서도 가능한데 MDN NaN문서에서는 isNaN() 함수를 추천해준다.

🌟 isNaN()

isNaN()과 Number.isNaN() 두가지 방법이 있는데 혼동해서는 안된다.

isNaN() 은 현재 값이 NaN이거나 숫자로 바꾸었을 때 NaN 인경우 true 이다.

Number.isNaN() 은 현재 값이 NaN 이어만 true 이다.

isNaN('NaN인가요?')	// true
Number.isNaN('NaN인가요?')	// false

NaN 인지 비교할 때 상황에 맞춰서 적절한 함수를 사용하면 될 것이다.

🍘  배열

- 하나의 변수에 여러 개의 값 저장

arr = [12, "apple", true]

- 서로 다른 자료형 한 배열에 저장 가능

- 배열의 길이 확인

arr.length // 3

🍘  심벌(Symbol)

- 유일성을 보장

- 객체 프로퍼티의 키(key)로 사용 가능

- 오픈 소스를 가져올 때 같은 키 이름으로 충돌하는 상황 방지

- 잘 사용하진 않음

- 선언

let var1 = Symbol()

- 심벌을 키로 사용할 때는 대괄호로 묶어서 표현

let id = Symbol()
const member = {
	id : 1234,
    [id] : 1
}
member[id]	// 1
member.id	// 1234

- 심벌에 설명 추가 가능

Symbol("설명")

🍘  자바스크립트의 장점이자 단점, 자료형 변환

다른 언어와 다르게 자바스크립트는 변수를 선언할 때 자료형을 지정하지 않고 변수에 값을 할당하면 그 값에 따라 자료형이 결정

--> 느슨한 자료형 체크

편리하지만, 여러 사람이 프로젝트를 진행할 때 변수를 일관성있게 유지하지 못함

▶︎ 자동 형 변환

- 자바스크립트는 '+'가 더하기 연산자이면서 연결 연산자로 사용됨

- '+'를 이용해서 숫자와 문자열을 더하면 숫자가 자동으로 문자열로 바뀌면서 2개의 문자열을 연결해서 보여줌

- 그외 연산자는 자동으로 문자열을 숫자로 변환한 후 계산함

▶︎ 직접 형 변환

- Number()

Number("200")	// 숫자 200으로 변환

- parseInt()

- parseFloat()

- toString()

- String()

값.toString()		// null, undefined 제외한 모든 자료형 문자열로 변환
값.toString(기본값)	// 기본값에 입력한 진수형으로 변환

String(값)		// null, undefined 자료형까지 모두 포함해서 문자열로 변환

- Boolean()

🍘  연산자

산술연산자, 연결연산자, 할당연산자, 논리연산자는 다른 언어와 거의 같다.

▶︎ 비교연산자

비교연산자가 다른 언어와 조금 다르다.

- 프로그램에서 값을 비교할 때는 ===, !== 연산자 사용하는 것이 좋음

- 자바스크립트에서는 문자열끼리 비교도 가능함

- 피연산자가 문자열일 경우 문자들의 아스키코드 값을 비교해서 결정

- 첫번째 문자가 서로 같은 아스키값일 경우 다음 문자 비교 하는 식으로 비교

🍘  ForEach 문

프로그램 중에 배열의 길이가 바뀌어 정확하게 배열의 크기를 알 수 없을 때, 배열의 요소를 가져와서 함수를 실행할 때 사용

fruits.forEach(function(fruit) {
	console.log(fruit);
});

🍘  For...in 문

반복해서 객체의 값을 가져와서 처리할 때 사용

let book = {
    title : "가나다",
    pubDate : "2019-02-04",
    pages : 777
}

for (key in book) {
    document.write(`${key} : ${book[key]}<br>`)
}
/*
title : 가나다
pubDate : 2019-02-04
pages : 777
*/

🍘  for...of 문

문자열이나 배열같이 반복 가능(literable) 자료에서 사용하는 반복문

const students = ["a", "b", "c", "d"];

for (student of students) {
	document.write(`${student}, `);
}
//a, b, c, d

🙌  자바스크립트 시작하기

자바스크립트를 시작하게 된 이유는 프론트에도 관심이 생기면서 백,프론트엔드 전부 만들고 싶어졌기 때문이다. 공부는 강의나 글을 조금보다가 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
}

- key는 문자열이지만 큰따옴표 사용하지 않음

- 키:값 쌍을 객체의 프로퍼티(property)라고 함

- 객체 값 접근하기

object1.name
object1["name"]

첫번째 방법을 많이 사용한다.