[바닐라 JS로 크롬 앱 만들기] #1 ~ #3 정리

• 강의 링크: https://nomadcoders.co/javascript-for-beginners/lobby
• 강의 주제: 모멘텀 클론 코딩 with Vanilla Javascript

- 크로미움 기반 브라우저 사용 권장

  * 크로미움: 오픈 소스 웹 브라우저 프로젝트. 구글 크롬 개발의 코드로 사용된다. 최신 기술을 시험하는 가늠터의 역할을 한다.

 

Framework

• React Native: 안드로이드, iOS 앱
• 일렉트론: Desktop 앱 (ex. VSCode), Slack, Twitch ...
• socket.io: 실시간 채팅 가능
• ml5.js: 머신러닝 모델 생성하는 웹사이트 구축 + 훈련 가능

브라우저에서 여는 것은 js, css 파일이 아닌 html 파일이다

• Basic Data Types
  1. Integer (정수)
  2. float (실수)
  3. string (문자열)
• variable: 값을 저장하거나 유지하는 역할
  1. const: 상수. 바뀌지 않는 값
  2. let: 바뀌는 값에 대해서 새롭게 생성할 때만 붙여줌
  • 변수명 작성 방법 (camelCase)
    • 첫 번째 단어는 소문자 이후 단어의 시작 부분을 대문자로 표시 (ex. newName, veryLongVariableName)
  • var: const + let 그냥 변수 표현할 때 사용하는 구 버전 (하지만 lsb의 교재에는...)

Always const, sometimes let, never var

• Boolean
  1. true
  2. fale
• null: 빈 값을 가지고 있음. 절대 자연적으로 발생하지 않음. 변수 안에 어떤 것이 없다는 것을 확실히 하기 위해 사용
• undefined: 초기화 X
• Array
  1. push: 항목 하나를 array에 추가

object

property를 가진 데이터를 저장하도록 해줌

cost player = {
	name: "nico".
	points: 10,
	fat : true,
}

console.log(player);        //{name:"nico", points:10, fat:true}
console.log(player.name);   //nico
console.log(player["name"]);  //nico

player.fat = false;
console.log(player)         //false

player.lastName = "potato";
console.log(player);        //{name:"nico", points:10, fat:true, lastName:"potato"}

player.points = player.points + 15;
console.log(player);        //{name:"nico", points:25, fat:true, lastName:"potato"}

• constant인데 어떻게 수정이 가능할까?
  • 수정하는 것이 object 안의 무언가이기 때문에 가능
  • constant 전체를 하나의 값으로서 업데이트 하려고 하면 에러 발생
  • ex. player = false; ⇒ error!
• function: 반복해서 사용할 수 있는 코드 조각
• argument: function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법
• object 내부에 function 사용

  const player = {
  name : "nico",
  sayHello: function(otherPersonsName){
  	console.log("hello" + otherPersonsName + "Nice to meet you");
  },
  };
  
  console.log(player.name);
  player.sayHello("lynn");​

 

 

 

---

#3 JS on the Browser

document

브라우저에 이미 존재하는 object

우리가 접근할 수 있는 HTML을 가리키는 객체

javascript에서 정보를 가져오는 방법은, document 객체와 element를 가져오는 수 많은 함수들을 이용하는 것이다!

document.getElementById()

→ id를 통해 element를 찾아준다

Uncaught TypeError: Cannot set property 'innerText' oif app.js:3 null

→ 없는 id값을 호출해서 나는 오류

document.getElementsByClassName()

요즘은 id보다 class를 사용하거나 같이 쓰는 편

해당 클래스가 list 형태로 전달됨

document.getElementByTagName()

→ h1, div, anchor, section, button 등 tag를 불러올 수도 있음

querySelector & querySelectorAll

nico's pick (to get Element)

querySelector는 element를 css 방식으로 검색할 수 있게 함

→ 아래 코드에서 hello란 class 내부의 h1을 가지고 올 수 있음

<!--HTML-->
<div class="hello">
	<h1>Grab me!</h1>
</div>

//javascript
const title = document.querySelector(".hello h1");
console.log(title);

//result
<h1>Grab me!</h1>

//javascript
const title = document.querySelector(".hello h1:first-child");
console.log(title);

//result

//javascript
const title = document.querySelector("#hello");
const title = document.getElementById("hello"); //같은 기능

getElementsByClassName()을 사용할 때는 이미 class임을 알려줬으므로 "hello"만 써도 됐지만

querySelector()를 사용할 때는 class name과 그 안의 h1을 명시해야 함

querySelector를 사용할 때, 하나의 class 안에 여러 개의 같은 요소(ex. h1)가 존재할 수 있음

이 때는 첫 번째 요소에 대한 값만 return 해줌

→ 전부 가져오고 싶다면?

→ querySelectorAll 사용! → selector 안의 조건에 부합하는 모든 요소들을 모은 array 반환

 

---

Event

작성 방법1

addEventListener("이벤트이름", 함수명); → 무슨 event를 listen하고 싶은지 알려주어야 함

**함수명 뒤에 () 넣지 않아야 함 (why? 실행을 원하는 것이 아니기 때문에)

nico's pick! 나중에 removeEventListener를 통해서 event listener를 제거할 수 있음

title.addEventListener("click", handleTitleClick);

작성 방법2

이벤트 = 함수명;

title.onclick = handleTitleClick;

event를 찾는 방법1

1. 구글에 찾고 싶은 element의 이름을 MDN(Mozilla Developer Network)에 검색한다
2. 링크에 'Web APIs'라는 문장이 포함된 페이지를 찾는다 (why? JS관점의 HTML element라는 의미이기 때문에)
3. event 문서 참고

event를 찾는 방법2

1. element를 console에 출력
2. 출력된 property 중 'on'이 붙어 있으면 event listener
3. event를 사용할 때는 'on'을 떼고 사용 (ex. onclick → click)

• click event

  const title = document.querySelector("div.hello:first-child h1");
  console.log(title);
  
  function handleTitleClick(){
    console.log("title was clciked!");
  }
  
  title.addEventListener("click", handleTitleClick);
  //click event listen -> 발생시 handleTitleClick function 실행​

• mouseenter
• mouseleave
• resize
  • window: 기본 제공

  function handleWindowResize(){
    document.body.style.backgroundColor="tomato";
  }
  
  window.addEventListener("resize",handleWindowResize);​

• window - copy
• offline / online: wifi에 연결되었는지 브라우저에서 확인 가능

---

CSS in JS

글씨색 번갈아 가며 나오게 하기

const h1 = document.querySelector("div.hello:first-child h1");
console.log(h1);

function handleTitleClick(){
    if(h1.style.color === "blue"){
        h1.style.color = "tomato";
    }
    else{
        h1.style.color = "blue";
    }
}

h1.addEventListener("click", handleTitleClick);

clean code ver

const h1 = document.querySelector("div.hello:first-child h1");
console.log(h1);

function handleTitleClick(){
    const currentColor = h1.style.color;
    let newColor; 
    if(currentColor === "blue"){
        newColor = "tomato";
    }
    else{
        newColor = "blue";
    }
    h1.style.color = newColor;
}

h1.addEventListener("click", handleTitleClick);

style에 대한 내용은 js보다 css에 적는 것이 맞음

//style.css
body {
    background-color: beige;
     
}

h1{
    color: cornflowerblue;
    transition: color .5s ease-in-out;
}

.clicked{
    color:tomato;
}

const h1 = document.querySelector("div.hello:first-child h1");
console.log(h1);

function handleTitleClick(){
    if(h1.className === "clicked"){
        h1.className="";
    }
    else{
        h1.className="clicked";
    }

}

h1.addEventListener("click", handleTitleClick);

 

clean code ver1

string("clicked") → 변수(clickedClass)

바꾸는 이유: 오타 등으로 인해 실행하지 못하는 문제가 생겼을 때, javascript (console창)내에서 확인할 수 있게 하기 위하여

const h1 = document.querySelector("div.hello:first-child h1");
console.log(h1);

function handleTitleClick(){
    const clickedClass = "clicked"
    if(h1.className === clickedClass){
        h1.className="";
    }
    else{
        h1.className= clickedClass;
    }

}

h1.addEventListener("click", handleTitleClick);

문제점!

→ 이미 class name이 존재하는 상황이면 해당 이름은 변경하는 순간 사라져 버린다 → css에 이름을 맞춰서 작성하는 것은 비효율적! (class name이 변경되면 js, css 다 업데이트 해줘야 함) → JS로 모든 class name을 변경하지는 않도록 해야 함

 

clean code ver2

classList 활용 + contains()

→ class들의 목록으로 작업할 수 있음

const h1 = document.querySelector("div.hello:first-child h1");
console.log(h1);

function handleTitleClick(){
    const clickedClass = "clicked"
    if(h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    }
    else{
        h1.classList.add(clickedClass);
    }

}

h1.addEventListener("click", handleTitleClick);

이 작업(추가, 삭제)은 개발자들이 많이 사용하는 기능으로 toggle function으로 구현되어 있음

• toggle(): class name이 존재하는지 확인

const h1 = document.querySelector("div.hello:first-child h1");
console.log(h1);

function handleTitleClick(){
    h1.classList.toggle("clicked");
}

h1.addEventListener("click", handleTitleClick);

"clicked" class가 있는지 확인

있으면 → clicked 제거

없다면 → clicked 추가

⇒ 한 줄로 원하는 동작 가능..!