nomadcoders_바닐라JS로 크롬앱 만들기_day1

참으로 오랜만에 블로그를 작성하기 시작하는 것 같다. 
작년에 취업한 이래로 한 해가 바뀌면서 회고록을 작성하면서 다짐했지만 동기부여가 크게 되지 않았나 보다...
벌써 입사한 지 8개월 차가 되어 간다. 그동안 미뤄왔던 개인 공부를 솔찬히 시작하면서 블로그 작성을 시작해야겠다. 

크게는 풀스택 개발자를 향하여 프런트 엔드는 자바스크립트를 시작으로 리액트까지 학습하며 어플을 만들어 볼 것이고, 백엔드는 김영한 선생님의 강의를 학습하면서 스프링부트와 JPA를 완전 정복하려 한다. 
오늘이 시작이다. 너무 많은 것을 이루려 하지 말고 하루에 조금씩이라도 꾸준하게 진행하자. 

 무료로 제공되는 강의로 아주 높은 수준의 퀄리티를 자랑한다. 이전에 깃허브를 학습할 때 간간히 유튜브에서 봤던 형인데, 사이트에 방문하여 자신에게 필요한 강의를 들어보면 좋을 것 같다. 모든 내용을 정리하고 싶지만, 너무 기본적인 내용은 배제하려 하니 양해를 부탁한다. 참고로 강의는 영어로 진행하나 한글 자막이 달리고 있으니 참고하길 바란다.

https://nomadcoders.co/courses 

All Courses – 노마드 코더 Nomad Coders

1. 변수(Variable)

const a = 10 
let myName = "leo"

1-1. 변수의 표기법
ㄴ CamelCase -> veryLongVariableName(각 단어의 첫 문자를 대문자로)
ㄴ SnakeCase -> very_long_variable_name(각 단어를 (_) 하이픈으로 연결)

1-2. 변수를 생성하는 방법
ㄴ const -> 상수 Constant의 약자로 사용하며 처음 초기화한 데이터를 바꿀 수 없다. (재선언 금지, 재할당 금지)
ㄴ var -> 값을 언제든지 갱신할 수 있지만, 오래된 버전이기 때문에 사용하지 않는 것을 추천한다. (재선언 가능, 재할당 가능)
ㄴ let -> 값을 정의하고 초기화하는 경우에만 데이터를 바꿀 수 있다. (재선언 금지, 재할당 가능)

1-3. undefined VS null
ㄴ undefined -> 변수는 선언했지만 값은 할당(초기화) 하지 않은 상태 -> 값이 들어갈 박스만 만들어 놓은 상태이다. 
ㄴ null -> 변수에 null이라는 값을 할당한 상태 -> 값이 들어갈 박스를 만들고 아무것도 안 넣은 상태로 포장한 상태이다.  

 

2. 배열(Array)

const daysOfWeek = ["mon" , "tue" , "wed" , "thu" , "fri" , "sat"]

//Get Item from array
console.log(daysOfWeek[4])

//Add one more day to array
daysOfWeek.push("sun")

2-1 특징
ㄴ 데이터를 정리하고 나열하여 사용하기 위한 자료 구조
ㄴ [] -> 대괄호를 사용하여 표현하며, 각 데이터는 (,) 콤마로 구분한다.
ㄴ Index는 1이 아닌 0부터 시작한다. 
ㄴ 배열 내의 데이터를 인덱스로 조회하기 때문에 나열된 데이터에 대한 설명이 필요하지 않은 경우에 사용한다. 

 

3. 객체(Object)

//Object 선언
const player = {
    name : tomato,
    color : red,
    food : true,
};

//props 호출 방법
console.log(player.name); => tomato
console.log(player["name"]); => tomato

//props변경 가능, object는 변경 불가
console.log(player);
player.color = "blue";
console.log(player.color);
--> blue

//props 추가
player.koreanName = "토마토";
console.log(player)
--> {name: "tomato", color: "blue", food: true, koreaName: "토마토"}

3-1 특징
ㄴ property를 가진 데이터를 저장하며, {} 중괄호를 사용하여 표현한다.
ㄴ 호출하는 방법은 2가지가 있다. (.) dot 연산자를 사용하거나, 대괄호를 사용하여 조회하고자 하는 value의 key값으로 조회한다. 
ㄴ Object 내부의 props는 하나의 변수와 같은 개념으로서 값의 변경이 가능하지만, Object자체를 변경하는 것은 불가능
ㄴ Object를 선언한 후에 내부 props는 자유롭게 추가할 수 있다.

 

4. Function

//function 선언 :
function 함수명(argument) {
	실행코드
    ...
    return result
}

ex > Object + functions

const calculator = {
    plus : function(a, b){
        // console.log(a+b);
        return a + b;
    },
    minus : function(a, b){
        // console.log(a-b);
        return a - b;
    },
    multiple : function(a, b){
        // console.log(a*b);
        return a * b;
    },
    divide : function(a, b){
        // console.log(a/b);
        return a / b;    
    },
    power : function(a, b){
        // console.log(a ** b);
        return a ** b;
    }
}

const plusResult = calculator.plus(2,3);
const minusResult = calculator.minus(2,3)
const multiResult = calculator.multiple(2,3)
const divideResult = calculator.divide(2,3)
const powResult = calculator.power(2,3)

4-1 특징
ㄴ 중복되는 코드를 함수로 묶어서 코드를 간결하게 표현하기 위함이다.
ㄴ () : 함수명 뒤에 소괄호를 붙여야만 해당 함수가 실행된다. 
ㄴ {} : 함수가 호출되었을 때 실행할 명령어 코드를 중괄호 내부에 작성한다. 
ㄴ argument or parameter : 함수가 실행되는 동안 사용하도록 보내주는 데이터로 함수 내부에서만 사용가능한 지역변수
ㄴ return 예약어를 통해 함수를 호출한 변수에게 함수의 실행 결과를 돌려줄 수 있다. 
    ㄴ 이때, return 뒤에 있는 코드는 실행되지 않은 Dead Code가 되기 때문에 return문은 반드시 명령어의 마지막에 작성

 

5. 조건문(Condition)

//condition은 boolean으로 판별가능해야 한다, (true , false)
if(condition){
    condition=true ---실행
} else{
    condition=false ----다음 else 값 실행
}

if(isNaN(age)){
	console.log(“please wirte a number”);
} else{
	console.log(“Thank you for writing your age”);
}


1. && : and 즉 '그리고'의 의미로 좌항과 우항이 모두 true여야 true를 반환, 두 항 중 하나라도 false면 false값을 반환
2. || : also 즉 '또는'의 의미로 좌항과 우항 중 하나라도 true이면 true를 반환, 두 항 모두 false일때 false를 출력
3. >= or <= : 작거나 같다 그리고 크거나 같다는 꺽쇠가 먼저오고 =이 와야함
4. == : 값만 비교 
   === : 값과 type을 비교 -> JS에서만  지원되는 문법으로 사용을 추천.

 

6. Document

const title = document.getElementById("title");
console.log(title); // 객체의 요소를 확인할 수 있다.
console.log(title.textContent);
console.dir(title); // 객체의 속성을 확인할 수 있다.

title.innerText = "Got you!"

const hellos = document.getElementsByClassName("hello");
console.log(hellos);
const title1 = document.getElementsByTagName("h1")

//CSS Selector 자체를 전달한다. 
const title = document.querySelector(".hello h1")
console.log(title);
const title = document.querySelector("div.hello:first-child h1")

6-1. 특징
ㄴ 자바스크립트가 브라우저를 제어할 때 사용하는 하나의 거대한 Object이다.
ㄴ 자바스크립트는 이미 (HTML) 브라우저와 연결되어 있기 때문에 자바스크립트를 통해 HTML의 요소들에 접근하여 변경 및 조회할 수 있다.

6-2. 브라우저 요소 검색
getElementById() : 요소의 id값을 사용하여 하나의 값을 찾을 때 사용한다.
getElementsByClassName() : 요소의 클래스 네임을 사용하여 다수의 값을 찾을 때 사용한다. 배열에 결괏값을 할당한다.
getElemnetsByTagName() : 요소의 태그 이름을 사용하여 다수의 값을 찾을 때 사용한다. 배열에 결과값을 할당한다.
ㄴ 위와 같이 자주 사용하는 메서드는 세 가지가 있다. 하지만 실제로 많이 사용할 메서드는 querySelector()를 사용한다.
ㄴ css 셀렉터의 문법을 그대로 사용할 수 있기 때문에 매우 간편하고 유용하다. 
ㄴ 단, 동일한 클래스를 가진 요소가 여러 개라면, 가장 첫 번째로 select 된 요소만 리턴하기 때문에 유의하자. 
ㄴ 동일한 조건에 해당하는 모든 요소를 가져오고 싶다면, querySelectorAll() 메서드를 사용한다.

7. Events

// how to listen event
function handleTitleClick(){
    console.log('title was clicked!');
}
function handleMouseEnter(){
    title.innerText = "Mouse is Here!";
}
function handleMouseLeave(){
    title.innerText = "Mouse is Gone!";
}
title.addEventListener("click", handleTitleClick); //클릭한 경우 리슨되는 이벤트
title.addEventListener("mouseenter", handleMouseEnter)//마우스가 올라간 경우
title.addEventListener("mouseleave", handleMouseLeave)//마우스가 떠나간 경우



/*
    more Events(https://developer.mozilla.org/en-US/docs/Web/API/Window#events)
    1. title.addEventListener("click", function()) -> title.removeEventListener()로 이벤트 리스너를 제거할 수 있다.
    2. title.onclick()
*/

function handleWindowResize(){
    document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy(){
    alert("copier!");
}
function handleWindowOffline(){
    alert("SOS no WIFI!");
}
function handleWindowOnline(){
    alert("ALL");
}

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

7-1 특징
ㄴ 특정 태그에 이벤트 리스너를 등록하면, 해당 이벤트가 발생한 경우 실행되도록 함수를 지정한다. 
ㄴ 모든 이벤트는 자바스크립트나 listen 할 수 있다.
ㄴ 특정 태그에 어떤 행위를 하는 이벤트에 대하여 이벤트 리스너를 등록해 두면, 해당 이벤트 리스너는 자신에게 할당된 이벤트가 발생하는지 listen(지켜보다가)하고 있다가 발생한 경우 함수를 실행하는 것이다.