[JSClock 클론코딩] 0. VanillaJS??

쿠챌린저스 프로젝트를 하기 위해서 JS에 대해 아무것도 모르는 저는 JS공부를 위해서 이것저것 찾아봐야 했습니다.

여러 사이트를 돌아다니고 유튜브를 전전하며 공부하고 있을 때쯤 각자 공부한 내용을 발표하는 시간에 친구가 Nomadcoders 사이트를 유용하게 사용중이라고 해서 들어갔다가 챌린지라는걸 정말 우연히 발견해서 참여하게 되었고, 그 과정에서 배우고 따라한 내용들을 블로깅하려고 이렇게 글을 남깁니다.

 

어떤 회의였나..는 아래 링크에 담겨있습니다!!

https://ssocoit.tistory.com/56?category=929575 

[쿠챌린저스] 5. 피그마.. 피그마!!

 

그리고 혹시나 저와 같은 고민으로 JS에 대해 입문하고자 하시는 분들은 아래 노마드코더 VanillaJS 클론코딩 수업으로 연결되는 링크를 남겨놓았으니 참고하세요! 무료로 좋은 강의와 챌린지를 제공해주신 니꼬선생님께 감사의 인사를 올립니다 (_ _)

https://nomadcoders.co/javascript-for-beginners

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

 

목차

---

0. VanillaJS?

VanillaJS 로고

처음에는 바닐라JS가 무엇을 뜻하는 지도 잘 몰랐습니다.

 

이 바닐라JS는 말 그대로 순수한 Javascript를 뜻합니다. 흔히 js로부터 파생된 vue.js, react.js, node.js 등등..의 기초가 이 친구라고 보면 됩니다. 

 

고로, 가장 먼저 순수한 JS를 배워놓아야 다음 JS들을 배워도 꼬이지 않고 쉽게 배울 수 있기 때문에 VanillaJS가 중요하다고 볼 수 있습니다. 추가로 가장 순수하기 때문에 속도도 빠르다는 장점을 가지고 있습니다.

 

---

1. JS에 대한 기초 - 변수

여기서는 HTML과 CSS에 대한 설명을 하지 않습니다. 이에 대한 내용은 나중에 따로 정리하도록 하겠습니다.

JS에서 변수를 설정할 때는 기본적으로 var을 사용했습니다.

하지만 ES6(ES2015)부터는 let와 const가 추가되어서 이를 이용해서 변수를 선언할 수 있게 되었죠.

 

너무 자세하게는 설명하지 않겠지만, var보다는 let와 const를 사용하는 것을 권장합니다.

var의 두루뭉술함을 보다 명료하게 표현하고, 다른 객체지향 언어처럼 사용할 수 있게 만든 것이 바로 let과 const입니다. 머리가 아프시다구요? 그럼 var은 잊어버리고 let와 const만 사용합시다!!

 

기본적인 특징은 let은 변경이 가능하고, const는 변경이 불가능합니다. 변수와 상수라고 보시면 됩니다.

대신 const로 만든 객체 안의 변수는 수정이 가능합니다. 이 부분은 잘 이해가 안되신다면 지금은 이런게 있구나 생각하고 넘어가셔도 됩니다.

선언할 때 let과 const는 앞에 붙고, 그 뒤에 변수/상수의 이름이 붙게 됩니다.

var name0 = "Ssoco"; // function-scoped
name0 = "IT"; // 재할당 가능!!
var name0 = "NANA"; // 재선언도 가능!! - 비추

let name1 = "Ssoco"; // block-scoped
name1 = "IT"; // 재할당 가능!!

const name2 = "Ssoco"; // block-scoped
name2 = "IT"; // 오류 발생!! 재할당 불가능!!

 

---

2. JS에 대한 기초 - 문자열

다른 언어들에서는 문자열을 사용해야 할 때 " "(쌍따옴표)를 많이 사용했습니다.

JS도 동일하게 사용이 가능합니다. 하지만, 쌍따옴표 안에 들어가야 할 변수들이 많다면?

매번 " " + a + " " + b + " "..  얼마나 귀찮습니까?

` `(백틱)을 이용하여, 변수/상수 부분을 넣어야 할 때는 ${변수/상수명} 을 사용하면 보다 편리하게 문자열을 구현할 수 있습니다.

function car1(name,color){
	return "This car is " + name + "and color is " + color + ".";
}

function car2(name,color){
	return `This car is ${name} and color is ${color}.`;
}

// 함수를 선언할 때는 function 함수명(파라미터){내용} 순서대로!

 

---

3. JS에 대한 기초 - 객체

여타 객체지향 언어들에서 객체를 만드는 것처럼, JS 역시 객체를 만들 수 있습니다.

속성 객체명 = {내용} 순서대로 만들면, 객체가 생성됩니다.

const game = {
	attack: function(strength, health){
    	return health - strength;
    }
}

const remain = game.attack(10,60) // remain에는 50이 저장

 

---

4. JS에 대한 기초 - DOM

DOM은 document object model의 준말로, html 요소를 가져와서 js 내부에서 객체로 만들고 JS의 기능들을 이 객체에서 사용할 수 있도록 만들어주는 것을 말합니다.

어렵게 말했지만 쉽게 풀면, html에 있는 요소들을 JS를 이용해서 컨트롤할 수 있게 해 주는 것이죠. 이것을 통해 우리는 정적인 html/css 기반의 페이지를 JS를 이용하여 동적으로 만들어줄 수 있게 됩니다!

const title0 = document.getElementById(title) // id로 찾기

// querySelector은 맨 처음 1개, quertSelectorAll은 전부 가져온다!

const title1 = document.querySelector("#title") // id로 찾기
const title2 = document.querySelector(".title") // class로 찾기

const title3 = document.querySelectorAll(".title") // class로 전부 찾기

// getElementById와 querySelector간의 차이는 존재하지만, 사용할 때는 거의 유사하게 사용된다.
// 이번 클론코딩 강의에서는 querySelector를 중점적으로 사용하게 될 것!!

title1.innerHTML = "Hello World!"
// title1에서 선택한 부분에서 출력하는 내용(text)를 가져와서 Hello World! 로 바꿔준다.

 

---

5. JS에 대한 기초 - 조건문

C++와 거의 동일합니다. if(조건문){수행문}의 형식으로 사용할 수 있으며, 추가적으로 else if와 else를 사용할 수 있습니다.

다만 비교할 때 == 가 아닌 === 를 주로 사용합니다. ==는 단순히 값이 같은지를 판단하고, ===는 값과 값의 종류가 같은지를 판단합니다. 비교하는 대상이 숫자와 문자열일 경우 내용이 같다고 해서 완벽하게 같은 것은 아니라고 생각하는 것이 보다 엄격하고 맞는 비교이기 때문에 기본적으로는 ===을 사용합니다.

 

TMI : 실제로 Javascript에서 파생된 Coffeescript에서는 is를 ==가 아닌 ===으로 판단하여 적용합니다.

그만큼 ===를 많이 쓴다는 거지

const h3 = 3;
if(h3 === 3){
	console.log("Wow!");
}
else{
	console.log("Hmm...");
}

// h3이 숫자 3이고, if문 안에서 비교하는 부분 (rvalue) 역시 숫자 3이기 때문에 Wow!가 출력된다.

 

---

6. JS에 대한 기초 - 이벤트

우리가 JS를 사용하는 가장 큰 이유중 하나는 동적인 상황을 대처하기 위해서입니다.

무언가를 클릭했을 때 반응이 일어나게 한다거나.. etc...

이럴때, 이벤트가 발생했음을 확인하고 함수가 작동하도록 도와주는 것이 바로 addEventListener입니다.

addEventListener의 매개변수값으로는 앞에는 특정행동, 뒤는 함수가 들어가게 됩니다.

특히, 뒷 부분에 함수를 넣을 때는 일반적으로 () 없이 바로 넣습니다.

만약 ()를 넣으면, 창이 뜨자마자 바로 작동하고, 이벤트가 발생하더라도 더이상 작동하지 않으므로 조심해야 합니다.

 

아래 예시에서 init()가 등장하는데, init() 함수 안에 존재하는 여러 행동과 반응을 통해 상황에 대처할 수 있게 됩니다. 그리고 맨 아래 init();를 넣어서 페이지로 접근하자마자 init() 안의 내용들이 정상적으로 작동을 할 수 있게 되는 그런 메커니즘이죠.

const title = document.querySelector("#title");
// html 내에 title이라는 아이디를 가진 요소 title에 불러옴

const BASE_COLOR = "rgb(128, 0, 0)"; // 색 설정
const OTHER_COLOR = "rgb(0, 255, 127)";

function handleClick() { // 클릭했을 때 작동할 함수
	const currentColor = title.style.color;
	if (currentColor === BASE_COLOR) { // 현재 색이 BASE_COLOR과 같으면
		title.style.color = OTHER_COLOR; // OTHER_COLOR로 변경
	}
}

function init() { // 페이지가 떴을 때 작동하게 할 내용들 설정
	title.style.color = BASE_COLOR; // title의 color를 BASE_COLOR로 할당
	title.addEventListener("click", handleClick); // title 부분을 클릭하면 handleClick 함수 작동
}
init(); // 페이지에 접근하면 init()함수 작동

 

---

지금까지 VanillaJS에 대한 가장 기초적인 내용들에 대해 알아봤습니다.

다음 포스팅부터는 실제로 크롬 앱인 Momentum을 클론코딩하는 과정을 올리도록 하겠습니다!

감사합니다 :)