[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 (1)

interpretation : 실시간 통역이므로 에러가 발생하면 그대로 직격탄 / 파일썬, 자바스크립트 → 느림 파일썬을 컴파일 언어로 만들 수도 있긴 함

compilation : 한번에 통역하고 알려줌 , 컴파일을 했을 때 에러가 발생하면 수정하라고 지적질을 할 수 있음/ C → 빠름

라이브러리 / 프레임워크

라이브러리 : 내가 필요할때 갖다 쓸수 있음 예 ) 제이쿼리

프레임워크 : 프레임워크의 룰을 따라서 사용해야함 예 ) 장고 웹 프레임워크

visual studio code

index.html : js 와 css 를 브라우저에 열수있게 도와주는 접착제 같은 역할 . index.html 파일을 브라우저에 열어야함.

app.js : 브라우저에 바로 파일을 연다고 실행되는게 아님

style.css : 브라우저에 바로 파일을 연다고 실행되는게 아님

javascript type → number / string

number = integer = 2

float = 2.2

text = string = “hello”

변수 (variable)

const a = 5;
const b = "2";
const myName = 'nico';

console.log(a + b);  //52
console.log(a * b);  //10
console.log(a / b);  //2.5
console.log("hello " + myName); //hello nico

const (상수) , let (변수)

const 는 업데이트가 안됨

let 은 업데이트 가능

→ 기본적으로는 const를 쓰지만 후에 업데이트가 필요한 변수인 경우 let을 사용함. var 은 사용하지말자

boolean , null, undefined

true or false

const amIFat = null;
console.log(amIFat);  //null

여기서 null 은 비어있다기보다는, 아무것도 없는 상태로 채워진 것. 값이 null 이지만 “아무것도 아닌 것” null 은 절대 자연적으로 발생하지 않는다.

const amIFat = null;
let something;
console.log(something);  //undefined

undefined 도 문자가 아닌 타입이다. something이라는 변수는 정의했지만 값을 안주었음

컴퓨터 메모리 안에는 존재하지만, 공간은 있지만 값이 들어가지 않은것

Array (배열)

하나의 변수 안에 데이터 타입들을 list 로 묶어 가지는 것

월요일부터 ~ 일요일까지를 한번에 묶어보자

const mon = "mon";
const tue = "tue";
const wed = "wed";
const thu = "thu";
const fri = "fri";
const sat = "sat";
const sun = "sund";

const daysOfWeek = mon + tue + wed + thu + fri + sat + sun ;
console.log(daysOfWeek);  //montuewedthufrisatsund

한번에 묶긴했지만 매우 보기가 안 좋다. 그리고 이중 수요일만 빼서 달라고 할때 수요일만 뺄수가 없다.

const mon = "mon";
const tue = "tue";
const wed = "wed";
const thu = "thu";
const fri = "fri";
const sat = "sat";

const daysOfWeek =[mon , tue , wed , thu , fri , sat] ;
console.log(daysOfWeek);  
//['mon', 'tue', 'wed', 'thu', 'fri', 'sat']

이때 + 를 , 로 바꾸고 앞뒤로 [ ] 를 붙여주면 배열로 그룹화 시킬 수 있음

string → array 로 바꾼거임

이제 여기서 fri 만 뽑고 싶다면

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

// Get Item from Array
console.log(daysOfWeek[4]);   //fri

또 여기서 배열 끝에 일요일을 추가를 하고 싶다면

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

// Add one more dat to the array
daysOfWeek.push("sun");
console.log(daysOfWeek);
// ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']

const playerName = "nico";
const playerPoints = 10;
const playerHandsome = false;
const playerFat = "little bit";

여기서 Name, Points, Handsome, Fat 등은 player 이라는 entity(개체)에 대해 설명하고 있는 속성(property)이다.

player.name

player.points

player.handsome

player.fat

이런식으로 정리를 해야 더 잘 정돈된다

그럼 Array 로 정리를 해보자

const player = ["nico", 10 , false, "little bit"];

깔끔하게 정리가 되긴 했지만 nico, 10, false, little bit 이 뭘 가르키고 있는지 모른다.

그럼 object를 사용해보자

const player = {
    name : "nico",
    points : 10,
    fat : true
};

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

여기서 player 의 name을 불러내는 방법은 두가지다

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

여기서 fat이 false 라고 변경해보자

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

const는 상수로써 값을 변경할 수 없다 그랬는데 어떻게 변경이 되었을까?

에러는 const 전체를 하나의 값으로 업데이트 하려고 할때 발생된다.

지금은 object 안에 무언가를 수정하는 것이다.

즉 player 자체를 다른 걸로 업데이트 할경우는 에러가 발생하지만, player 개체 안에 fat이라는 속성을 변경하는 것에는 아무 문제가 없다.

player= false;  // Error

이렇게 player 자체를 false 로 바꾼다면 error 가 발생한다.

그럼, object 에 무언갈 추가하는 건 가능할까?

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

가능하다.

object는 Property 를 가진 데이터를 저장하도록 해줌

계속 반복해서 사용할 수 있는 코드 조각이라고 생각하면 됌

만약, function 없이 내 친구 모두에게 인사를 하고 싶다면

console.log("hello my name is michelle");
console.log("hello my name is nico");
console.log("hello my name is jigu");
console.log("hello my name is jihyun");
console.log("hello my name is mija");

이렇게 다 적어야함…

여기서 바뀌는건 맨 마지막 이름 뿐임

그러므로 이름 빼고 앞에 있는 것들을 하나로 묶자

function sayHello(){
    console.log("hello!");
}

sayHello 를 부르면 이제부터 { } 안에 써져있는게 불러져 올거임

그럼 함수를 어떻게 불러야될까?

sayHello(); //hello!
sayHello(); //hello!
sayHello(); //hello!
sayHello(); //hello!

alert()

Array.push()

console.log()

여기서 () 가 function을 실행하는 방법이다.

하지만 여기의 function을 계속 같은 값만 출력하고 있다.

우리는 hello my name is ___ 를 반환하고 싶다.

그럴땐 인자(argument) 를 이용한다.

인자는 function이 실행하는 동안 어떤 정보를 function 에게 보낼 수 있는 방법이다.

인자가 없이 함수를 출력해보자

alert();  // 빈 alert 창만 뜬다
console.log(); // 아무것도 안뜬다

아무것도 안 뜨는 이유는, function 실행버튼을 눌렀지만 아무 데이터를 안 보냈기 때문이다

console.log("Hello");
sayHello("nico");

console.log 라는 함수에 “Hello” 라는 데이터를 보낸거다

console의 경우 이 데이터를 그대로 인쇄한다.

sayHello 는 괄호를 썼으니까 실행버튼을 누른거고

sayHello 라는 함수에 “nico” 라는 데이터를 보낸거임

우리는 이제 데이터를 보내는 법은 안다. 그럼 받는 법을 알아보자

function sayHello(){
    console.log("hello! my name is C");
}

sayHello("nico");
sayHello("michelle");
sayHello("jihyun");

sayHello 같은 경우 “hello my name is” 와 우리가 보낸 데이터를 같이 출력해야함

우리가 데이터를 받는 방법은 () 안에 데이터를 추가해주는 거임

function sayHello( nameOfPerson ){
    console.log();

sayHello("nico");  //nico
sayHello("michelle");  //michelle
sayHello("jihyun");  //jihyun

이렇게 하면 자바스크립트는 sayHello로 보내진 첫번째 데이터가 nameOfPerson 이라는 variable로 가게 된다는 것을 안다

인자는 2개도 받을 수 있다

그리고 그 데이터는 {} 안에서만 받아서 출력된다

function sayHello( nameOfPerson, age ){
    console.log("Hello my name is " + nameOfPerson + "and I'm " + age);
}
sayHello("nico", 10); // Hello my name is nicoand I'm 10
sayHello("michelle",20); // Hello my name is michelleand I'm 20
sayHello("jihyun",30); // Hello my name is jihyunand I'm 30

단순한 계산기를 만들어보자

function plus(a,b){
    console.log(a,b);
}

plus();  //undefined undefined

plus(); 에 아무 데이터도 보내지 않았기 때문에 undefined 가 뜬다

function plus(a,b){
    console.log(a+b);
}

plus(); // NaN

NaN = Not a Number 라는 뜻이다

function plus(a,b){
    console.log(a+b);
}

plus(8, 60);  //68

a,b 에 뭐가 들어가든 상관없다.

function plus(a,b){
    console.log(a+b);
}
function divide(c,d){
    console.log(c/d);
}
plus(8, 60);
divide(100, 20);

자 이번에는 player object 를 만들어보자

const player = {
    name: "nico",
    sayHello : function(otherPersonsName){
        console.log("hello " + otherPersonsName + " nice to meet you!");

    }
};

player.sayHello("nico"); // hello nico nice to meet you!
player.sayHello("michelle"); // hello michelle nice to meet you!

여기서 otherPersonName은 function의 body에서만 사용이 가능하다.

{} 안에서만 사용가능

지현이가 만든 계산기

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

calculator.add(2, 4);  //6
calculator.minus(10, 4);  //6
calculator.divide(100, 5);  //20
calculator.multi(2,3); //6
calculator.power(2,2); //4

자 이제 console.log는 그만 쓰기로 해보자

왜냐하면 우리는 사실 function 밖에서 결과값을 얻기를 원하기 때문이다

console.log 대신 alert를 쓴다면 브라우저에서 alert 창이 뜨고 거기에 답이 나온다

return 을 사용해보자

대신 어떤 작업을 처리하고 그 결과를 return 하기 위해 funtion 을 사용해보자

const calculator = {
    plus: function (a, b) {
        return a + b;
    }
};

const plusResult = calculator.plus(2, 3);
console.log(plusResult);

const calculator = {
    plus: function (2, 3) {
        return 2 + 3;
    }
};

const plusResult = calculator.plus(2, 3);
console.log(plusResult);

const calculator = {
    plus: function (2, 3) {
        return 5;
    }
};

const plusResult = 5;
console.log(plusResult);  //5

return 은 function 외부에서 값을 제공받는다. 그리고 그 값으로 내가 원하는 모든 것을 할 수 있음

그럼 내가 만들었던 계산기에 console.log → result 로 전부 바꿔보자

const calculator = {
    add: function (a, b) {
        return a + b;
    },
    minus: function (a, b) {
        return a - b;
    },
    divide: function (a, b) {
        return a / b;
    },
    multi: function (a, b) {
        return a * b;
    },
    power: function (a, b) {
        return a ** b;
    },
};

const plusResult = calculator.add(2,3);  //5
const minusResult = calculator.minus(plusResult, 10);   // -5
const divideResult = calculator.divide(10, minusResult); // -2
const multiResult = calculator.multi(divideResult, plusResult);  //-10
const powerResult = calculator.power(multiResult, minusResult); // -0.00009999

console.log(plusResult,minusResult,divideResult,multiResult,powerResult);

console.log 때와는 다르게 plusResult, minusResult, divideResult, multiResult,powerResult 에 접근이 가능하다. 이러한 변수에 다 값이 있다는 뜻이다

console.log로 한다면 plusResult, minusResult, divideResult, multiResult,powerResult 를 쳐봤을때 undefined 가 나온다.

그리고 return 을 하는 순간, 그 function 은 종료된다.

return 앞에 console.log(“hello”); 를 친다면 console 창에 나오지만

뒤에 쓴다면 나오지 않는다

function은 계속 남아있는게 아니다. 실행되고 나면 사라지고 마지막엔 결과를 남겨준다.

visual studio code#

javascript type → number / string#

변수 (variable)#

const (상수) , let (변수)#

boolean , null, undefined#

Array (배열)#

object는 Property 를 가진 데이터를 저장하도록 해줌#