[Nomad Coders] 바닐라 JS로 크롬 앱 만들기 - 기본기

노마드 코더에서 무료강의인 바닐라 JS로 크롬 앱 만들기!

 

해당 강의는 아래의 사이트에서 찾을 수 있다. 

 

https://nomadcoders.co/

 

바닐라 JS란? 

 - 간단하게 말하자면 그냥 순수한 자바스크립트이다. 즉, 라이브러리가 없는 자바스크립트이다. 

 

 

 

 

들어가기 앞서 기본기 정리 

  알아두면 좋은 기본적인 정보들을 확인해보자. 

 

 

 

 

[변수의 종류] 

let(block-scoped) : 재할당 가능, 재선언 불가능

let name = "GilDong"; 
name = "Amuge"; // 재할당 가능 

 

const(block-scoped) : 재할당 불가능, 재선언 불가능

const name = "GilDong"; 

 

var(function-scoped) : 재할당 가능, 재선언 가능

var name = "GilDong"; 
name = "Amuge"; // 재할당 가능 
var name = "Haha"; // 재선언 가능

일반적으로 무조건 const를 사용하고 필요한 경우에만 let을 사용한다. 

 

const 객체 : 안의 변수는 변경 가능 

const hisInfo = { 
  name:"Jin",
  age:25,
  gender:"Male",
  isHandsome:true,
  favMovies: ["LOTG", "oldboy", "Avengerse"],
  favFood: [
    {
      name: "Pizza",
      fatty: false
    },
    {
      name: "Chicken",
      fatty: false
    }
  ]
}
hisInfo.age = 17 // 가능!!

 

 

 

 

[템플릿 문자열] 

  - 템플릿 문자열은 하나의 문자열을 서식이나 견본처럼 쓰고 싶을 때 사용하는 문자열이다. 예를 들면, 문자열 하나를 만들었는데 다른 곳에서도 써야한다면 그에 맞춰 일부분을 변경해야할 것이다. 근데 쓸 곳이 여러곳이라면 써야하는 곳마다 일일이 문자열을 바꿔주는 것은 너무 번거로운 작업이다. 이를 간편화해줄 수 있는게 템플릿 문자열이다. 

 

템플릿 문자열은 ` `(백틱)을 이용하고,

일반 문자열은 " "(큰 따옴표) 혹은 ' ' (작은 따옴표)를 사용한다. 

 

1. 일반 문자열

function sayHello1(){
  return "Hello GilDong you are 15 years old"
}

function sayHello2(){
  return "Hello ZoneDo you are 51 years old"
}

function sayHello3(){
  return "Hello Jin you are 25 years old"
}

보이는 것과 같이 필요한 이름과 나이만큼 새로운 function을 구현해야했다. 

 

아니라면 더 귀찮음을 감수하고 다음과 같이 코딩하면 된다. 

function sayHello(name, age){
  return "Hello " + name + " you are " + age + " years old";
}

변수가 들어갈 때마다 문자열을 끝내고 '+'를 일일이 사용한다면 템플릿 문자열과 같은 기능을 구현할 수 있다. 

But. 굳이 그럴 필요가 있을까? 

 

 

2. 템플릿 문자열

function sayHello(name, age){
  return `Hello ${name} you are ${age} years old`;
}

helloGilDon = sayHello("GilDong", 15);
helloZoneDo = sayHello("ZoneDo", 51);
hellojin = sayHello("jin", 25);

일반 문자열은 세 개의 function으로 구현했지만, 템플릿 문자열을 구현하니 

한 개의 function으로 해결했다. 

 

 

 

 

[객체 만들기] 

객체는 {중괄호}로 만들수 있다.

  

const calculator = {
  plus: function(a, b){ // 객체 안의 funciton
    return a + b;
  }
}

const calcul = calculator.plus(2,3) // 객체 안의 function을 호출하려면 .을 이용해야한다

 

 

 

 

DOM(Document Object Model) 

  - XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스

 

1. HTML의 문서에 접근해서 데이터를 가져오기

const title = document.getElementById("title"); // 아이디로 검색하여 해당하는 html 문서를 불러온다.
const title = document.querySelector("#title"); // 노드의 첫 번째 자식을 반환
const title = document.querySelector(".title"); // . : class , # : id 로 검색 

 

2. DOM의 요소와 추가하기

const title = document.getElementById("title") 
title.innerHTML = "Hi! JavaScript"; // 창의 최상단에 표시할 글을 지정
document.title = "I own you now" // innerHTML을 변경한다.
console.dir(title) // dom의 요소를 보여줌

 

 

 

 

[이벤트 호출] 

  만약 웹에서 어떠한 조건이 만족했을 때, 함수를 실행하고 싶다. 즉, 이벤트를 호출하고 싶다면 window.addEventListener("호출 조건", 호출할 함수) 을 사용하면 된다. 

 

1. 클릭하면 컬러 바꾸기

function handleColor(event){
  if(title.style.color === "red"){
    title.style.color = "blue";
  } else {
    title.style.color = "red";
  }
}

window.addEventListener("click", handleColor);

title의 색이 red 면 blue로, blue면 red로 바꿔준다. 

 

해당하는 이벤트 찾는 방법 : Google에 "javascript dom event mdn"을 검색

 

주의점!!

함수이름() : 즉시 호출한다.

  - ex) window.addEventListener("click", handleColor()); ==> 웹이 실행되자마자 함수를 호출한다. 그리고 클릭하면 함수 실행이 안됨!!!(주의) 
함수이름 : 이벤트 발생 시에 호출한다. 즉, 바로 실행x 

  - ex) window.addEventListener("click", handleColor); ==> 클릭하면 함수를 호출한다.  

 

 

 

 

IF 조건문

if(true){

} else if("a" === "a" && 1 === 1){ 
	// &&(and) : a조건 && b조건 이라면 a,b 조건 모두 일치해야 True  
} else if("a" !== "b" || 1 === 2){
	// ||(or) : 두 조건 중에 하나만 일치하면 True 
}

 

 

 

 

ID와 CLASS의 혼용 

<h1 id="title" class="clicked">Hello Guy!<h1>

이유 : DOM조작을 위해 사용되는 class 키워드와의 혼란을 줄이기 위해 className이라는 property를 사용한다.

 

아래의 css를 보면 .clicked를 이용하여 className="clicked"인 요소를 찾아서 스타일을 적용해주고 있다. 

 

transition 으로는 클릭할 때 색이 느리게 변하는 효과를 준다.

css