[노마드코더 바닐라JS로 크롬 앱 만들기] #1.4 ~ #2.16

📌 JS란?

브라우저가 이해하는 언어로 HTML, CSS, JS가 있는데, 이중 JS는 FE가 쓰는 유일한 프로그래밍 언어다.

JS를 사용하면 3D를 구현하게 하는 라이브러리(three.js)나 리액트 네이티브(JS로 AOS, IOS 앱 구현하는 도우미), 일랙트론(FE 언어로 데스크탑 앱을 만드는 도우미) 등을 사용할 수 있다. FE의 유일한 프로그래밍 언어인 동시에 범용성이 넓은 언어로 FE을 고려한다면 반드시 배워야 한다.

 

 

📌 데이터 타입

데이터 타입은 전체적으로 Python과 매우 유사하다.

1) number > 정수/소수

2) string

 

Python의 print와 유사하게 console.log()를 사용한다.

웹 브라우저의 개발자 모드 console 부분에 출력값이 찍힌다.

print할 때처럼 괄호 안에 상수를 입력해주어도 되지만 변수 지정이 훨씬 편하다.

 

변수 정리

JS에서는 변수를 지정하는 방법이 const, let, var로 총 3가지인데 var는 거의 쓰지 않아 제외했다.

 

const는 한번 변수를 선언하면 수정할 수 없다. 선언한 const 코드 자체를 바꿔주어야 한다.

아래와 같이 const로 선언 후에 업데이트를 할 수 없고, 동일한 변수로 다시 선언할 수 없다.

const로 어떤 object를 선언했다면 object 자체를 바꿀 순 없지만 object 안의 추가나 변경은 가능하다.

이 내용은 object 리뷰에서 다시 정리하겠다.

const greeting = "say Hi";
greeting = "say Hello instead";// error: Assignment to constant variable. 
    
const greeting = "say Hi";
const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

 

let은 업데이트는 되지만 재선언은 안된다.

아래와 같이 let을 선언한 후 업데이트는 오류가 없지만, 재선언하면 이미 선언되어 오류가 나타난다.

let greeting = "say Hi";
    greeting = "say Hello instead";
    
let greeting = "say Hi";
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

 

var는 재선언도 되고 업데이트도 된다.

이런 장점 아닌 장점 때문에 원래 값을 인지하지 못하거나 어떤 목적으로 바뀌었는지 파악하기가 어렵다.

그래서 잘 사용하지 않는다고 한다.

 

셋의 차이점을 정리하자면,

1) var 선언은 전역범위 또는 함수범위 / let, const 블록 범위 (해당 블록에서만 적용)

2) var 재선언, 업데이트 / let 업데이트 / const 모두 불가

 

아래 내용을 참고했다.

 

Var, Let, Const의 차이점은?

 

더불어 Boolean도 Python과 유사하다.

Boolean은 true or false로 이루어져 있다.

Python에서의 None(값이 없음인 상태)은 null로 표현된다. 

참고로 None도 null도 값이 '없음'으로 정해져 있는(defined) 상태로 undefined와 다르다.

undefined는 값이 아닌 'type'으로 변수의 공간은 정해져 있으나 값이 '아예 정해지지 않은' 상태를 말한다.

 

Array 정리

Array란 Python에서의 리스트같은 개념이라고 보면 된다.

모든 것이 들어갈 수 있고 대괄호로 여닫으며 각 항목은 쉼표로 분리된다. 인덱스도 똑같다.

Array에 무언가를 추가할 때는 push를 사용한다.

삭제할 때는 인덱스를 delete하거나 제일 오른쪽일 경우 동일하게 pop를 사용한다.

제일 첫번째를 삭제할 때는 shift를 사용한다고 한다. 오. 아니면 splice로 슬라이스처럼 사용할 수 있다.

 

https://sentry.io/answers/remove-specific-item-from-array/

 

Object 정리

const player = {
	name: "yoon",
	points: 718,
	fat: false,
};

console.log(player);
→ {name: 'yoon', points: 718, fat: false}

console.log(player.name);
→ yoon

console.log(player["name"]);
→ yoon

Object는 Python의 딕셔너리랑 유사하다.

key와 value가 있고 해당 항목을 짝지어 볼 수 있다.

console.log할 때에는 object명.key를 입력해도 되고 object["key"] 를 입력해도 된다.

 

아까 위에서 const의 경우 재선언, 업데이트가 안된다고 했는데

저 player 자체를 건드리는 것이 아니라 player 안을 조정하는 것은 무관하다.

추가하려면 object명.추가할key = "추가할value"; 를 입력한 후 object를 다시 console.log하면 추가가 된다.

삭제는 동일하게 delete 하면 된다. 기본적인 문법은 다 유사하다.

 

 

📌 Function이란?

반복해서 사용할 수 있는 코드 조각을 function이라고 한다. (이 표현 역시 네이버 모위파에서 나왔는데 똑같다.)

function sayHello() {
	console.log("Hello my name is");
}

sayHello()
sayHello()
sayHello()

 

이러면 Hello my name is가 3번 출력된다.

그런데 나는 is 뒤에 내 이름이 같이 출력되게 하고 싶다.

그럼 함수 안에 인수(Argument)를 받아서 사용해주자.

 

function sayHello(name) {
	console.log("my name is "+ name);
}

sayHello("윤");
sayHello("영석");
sayHello("메타몽");

 

name은 sayHello 안에 있는 윤, 영석, 메타몽을 인수로 받았다.

my name is 윤, my name is 영석, my name is 메타몽이 이렇게 출력된다.

 

이런 함수와 인수를 사용하여 계산기도 만들 수 있다. (당연히 그냥 계산기가 더 효율적이긴 하다)

const calcurator = {
	add: function(a, b) {
		console.log(a+b);
	},
	minus: function(a, b) {
		console.log(a-b);
	},
	div: function(a, b) {
		console.log(a/b);
	},
	multi: function(a, b) {
		console.log(a*b);
	},
	power: function(a,b) {
		console.log(a**b);
	}
}

calcurator.add(4, 2)
calcurator.minus(4, 2)
calcurator.div(4, 2)
calcurator.multi(4, 2)
calcurator.power(4, 2)

 

 

📌 Return이란?

지금까지는 어떤 결과든 console.log로 출력하여 보았는데,

이제는 그렇게 출력하지 않고 function의 반환값 같은 변수 자체를 통해 console.log하여 확인한다.

const age = 27;
function calculateKrAge(age) {
	return age + 3;
}

const krAge = calculateKrAge(age);
console.log(krAge)

 

위와 같이 age는 27이고, 이 age를 인수로 사용하는 함수에서는 age에서 3을 더한 값을 return한다.

krAge는 이 return값을 갖고 있으며, 이를 출력하면 우리는 리턴값을 가지고 출력한 모양이 된다.

참고로 한번 return하면 함수의 기능은 끝난다.

 

이렇게 retrun을 사용하는 이유는 console.log로 보는 값은 그 계산에서 끝나고 꺼내지지 않지만,

return을 쓰면 해당 값을 다른 변수에 저장할 수 있기 때문이다.

 

 

📌 JS에서의 조건문

1) isNaN이라는 함수가 있다.

이 함수를 사용하면 NaN인지(Not a Number) 불리언으로 알 수 있다.

const age = parseInt(prompt("How old are you?"));
console.log(isNaN(age));

몇살인지 입력하라는 프롬프트(얼럿 같은)게 뜰 때 숫자를 입력하면(string)이 parseInt를 거쳐 int가 되는데

이 int가 숫자인지 아닌지를 판별해달라고 말하는 중이다.

 

숫자를 입력했다면 Not a Number, 숫자가 아닌 게 아닌 것(이중부정?)으로 false가 뜬다.

만약 문자를 입력했다면 True가 뜬다.

 

2) if문

if(condition) {
	// condition === ture
} else {
	// condition === false
}

 

Python과 조금 달랐던 부분은 바로 if, else 이후 ()에 변수를 넣어줘야 한다는 것이다.

괄호를 빼먹으면 오류가 난다. 이외에도 중괄호가 걸려 있어서 개수를 잘 확인해야 한다...

 

이외에도 JS에서는 and가 &&, or이 || 으로 표시된다.

같다 역시 ===로 3개이며, 같지 않다는 !== 로 표시된다.

 

---

 

HTML도 CSS도 잘 모르는 상황에서 시작한 첫 JS 클론 코딩.

생각보다 그렇게 어렵지만은 않았지만 또 그렇게 만만콩떡은 아니었다.

그래도 육안으로 내가 만든 것을 확인할 수 있다는 게 값진 경험이었다.

 

thanks to nico !

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders