서누레코즈

2021-01-18

#3. 5 Making a To Do List part Two (14:06)

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");


const TODOS_LS = "toDos";

const toDos=[];

// JSON.stringfy
// JSON = JavaScript Object Notation 의 준말. 자바스크립트 오브젝트 표기법
// ex) Object 를 String으로 혹은 String을 Object로 바꿔주기도 한다.
// localStorage key값으로는 Object가 못들어간다. 오직 String만
// 그래서 String으로 변환해야 정상적으로 key값에 들어가는걸 확인할 수 있다.
function saveTodos() {
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos))
}

function paintToDo(text) {
    const li= document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length+1
    delBtn.innerHTML="X";
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.id=newId
    toDoList.appendChild(li);
    const toDoObj = {
        text : text,
        id : newId
    };
    toDos.push(toDoObj);
    saveTodos();
}


function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value="";
}
// forEach는 array를 위한 function이다.
// 이와 같은 예로 String도 function이 있고
// Object도 function이 있다.

function loadToDos(){
    const loadedToDos=localStorage.getItem(TODOS_LS)
    if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
       parsedToDos.forEach(function(toDo) {
           paintToDo(toDo.text);
       });
    }
}

function init() {
    loadToDos();
    toDoForm.addEventListener("submit",handleSubmit)
}
init();

이번 강의에선 브라우저에 출력해놓은 toDoList를 localStorage

key / vlaue 값에 저장하고 그 저장된 값을 브라우저 새로고침을 해도 똑같이 리스트들이 나오게 하는 기능을 추가했다. 

첫 번째로 key / value 값에 저장하기 위해 목록 리스트를 담을 배열 변수를 선언해주고 

saveToDos() 함수를 생성하고 정의해준다. 

두번째로 저번 강의에 만든 loadToDos 함수를 정의해주는데

localStorage의 값을 가져오는 함수를 작성해주고 value값들은 Object로 바꿔주는 JSON.parse를 사용해서 가져온다.

그리고 배열을 위한 function으로 forEach 함수를 사용해서 리스트들은 하나씩 가져와서 브라우저에 리스트로 생성해주는 paintToDo함수를 사용해준다. 

다음 강의에서는 버튼을 누르면 list가 삭제되는 기능을 구현해보겠다. 

#3.6 Making a To Do List part Three (12:03)

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");


const TODOS_LS = "toDos";



let toDos=[];

function deleteToDo(event){
    const btn = event.target;
    const li = btn.parentNode;
    toDoList.removeChild(li);
    const cleanToDos = toDos.filter(function(toDo){
        return toDo.id !== parseInt(li.id);
    });
    toDos=cleanToDos;
    saveTodos();
}

// JSON.stringfy
// JSON = JavaScript Object Notation 의 준말. 자바스크립트 오브젝트 표기법
// ex) Object 를 String으로 혹은 String을 Object로 바꿔주기도 한다.
// localStorage key값으로는 Object가 못들어간다. 오직 String만
// 그래서 String으로 변환해야 정상적으로 key값에 들어가는걸 확인할 수 있다.
function saveTodos() {
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos))
}

function paintToDo(text) {
    const li= document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length+1
    delBtn.innerHTML="X";
    delBtn.addEventListener("click",deleteToDo);
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.id=newId
    toDoList.appendChild(li);
    const toDoObj = {
        text : text,
        id : newId
    };
    toDos.push(toDoObj);
    saveTodos();
}


function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value="";
}
// forEach는 array를 위한 function이다.
// 이와 같은 예로 String도 function이 있고
// Object도 function이 있다.

function loadToDos(){
    const loadedToDos=localStorage.getItem(TODOS_LS)
    if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
       parsedToDos.forEach(function(toDo) {
           paintToDo(toDo.text);
       });
    }
}

function init() {
    loadToDos();
    toDoForm.addEventListener("submit",handleSubmit)
}
init();

이번 강의에서는 list를 지우는 기능을 추가할 것이다. 

첫 번째로 버튼의 addEventListener를 생성한다. click 이벤트 발생 시 deleteToDo함수 호출되게 

이후 deleteToDo함수를 정의해보자면 

첫번째로 버튼을 클릭했을 때 consold.log를 확인해보면 버튼은 클릭된다는 걸 확인할 수 있는데 

어떤 리스트의 버튼이 클릭되는지 확인이 불가하다 .그래서 확인이 가능하게 해주는. target을 이용해서 

부모 태그인 <li>의 id를 알아내기 위해 parentNode를 사용해서 추출해낸다. 

추출 후 html태그에서의 removeChild를 이용해 지워주면 html상 즉 브라우저상에서는 사라진 list를 확인할 수 있다. 

하지만 새로고침하면 사라진 list가 다시 생성이 되는데 이는 지워준 리스트 항목들로 교체를 하지 않았기 때문이다.

교체해주기 위해서는 .filter함수를 사용할 건데 안의 콜백 함수의 조건? 에 부합하는 값들로 새로운 Array를 만들어준다. 

그러니까 1,2,3 가지의 리스트가 있고 리스트 1의 버튼을 눌러 삭제를했으면 2,3, 의 리스트가 남아 있을 거고 이건 브라우저에 보이는 2,3 리스트이다. 하지만 localStoarage에서는 안 없어져 1,2,3의 리스트가 존재하고 2,3 이남은 Array와 1,2,3, 이 남은 Array를 비교해서 값이 다른 부분을 버리고 남은 부분으로 새롭게 Array를 만들어주는 것 

그렇게 새롭게 만든 Array를 toDos에 넣어주고 saveToDos()를 이용해서 새롭게 초기화해준다. 

2021-01-19 

#3.7 Image Background (13:47)

배경에 사진 넣기 

unsplash.com 에서 괜찮은사진 다운로드 받기 

const body =document.querySelector("body");

const IMG_NUMBER = 3;

// function handleImgLoad() {
//     console.log("finished loading");
// }

function paintImage(imgNumber){
    const image = new Image();
    image.src=`./images/${imgNumber+1}.jpg`;
    image.classList.add("bgImage");
    body.prepend(image)
    // API환경에서 이 작업을 한다면 이 이벤트리스터가 필요할 것.
    //image.addEventListener("loadend",handleImgLoad)

}

function genRandom(){
    const number = Math.floor(Math.random()*IMG_NUMBER);
        return number;
}

function init(){
    const randomNumber = genRandom();
    paintImage(randomNumber);
}
init();

사진을 다운로드후

bg.js 파일을생서후 배경화면에대한 함수정의하기 

Math 함수를 이용해서 난수발생시키고 거기에 floor 내림 함수를 적용시켜서 사진수만큼 난수발생시킨 숫자를 담는

randomNumber 변수에 넣어 그변수 값을 인자값으로 받는 paintImage 함수 정의 .

2021-01-18

#3. 5 Making a To Do List part Two (14:06)

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");


const TODOS_LS = "toDos";

const toDos=[];

// JSON.stringfy
// JSON = JavaScript Object Notation 의 준말. 자바스크립트 오브젝트 표기법
// ex) Object 를 String으로 혹은 String을 Object로 바꿔주기도 한다.
// localStorage key값으로는 Object가 못들어간다. 오직 String만
// 그래서 String으로 변환해야 정상적으로 key값에 들어가는걸 확인할 수 있다.
function saveTodos() {
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos))
}

function paintToDo(text) {
    const li= document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length+1
    delBtn.innerHTML="X";
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.id=newId
    toDoList.appendChild(li);
    const toDoObj = {
        text : text,
        id : newId
    };
    toDos.push(toDoObj);
    saveTodos();
}


function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value="";
}
// forEach는 array를 위한 function이다.
// 이와 같은 예로 String도 function이 있고
// Object도 function이 있다.

function loadToDos(){
    const loadedToDos=localStorage.getItem(TODOS_LS)
    if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
       parsedToDos.forEach(function(toDo) {
           paintToDo(toDo.text);
       });
    }
}

function init() {
    loadToDos();
    toDoForm.addEventListener("submit",handleSubmit)
}
init();

이번 강의에선 브라우저에 출력해놓은 toDoList를 localStorage

key / vlaue 값에 저장하고 그 저장된 값을 브라우저 새로고침을 해도 똑같이 리스트들이 나오게 하는 기능을 추가했다. 

첫 번째로 key / value 값에 저장하기 위해 목록 리스트를 담을 배열 변수를 선언해주고 

saveToDos() 함수를 생성하고 정의해준다. 

두번째로 저번 강의에 만든 loadToDos 함수를 정의해주는데

localStorage의 값을 가져오는 함수를 작성해주고 value값들은 Object로 바꿔주는 JSON.parse를 사용해서 가져온다.

그리고 배열을 위한 function으로 forEach 함수를 사용해서 리스트들은 하나씩 가져와서 브라우저에 리스트로 생성해주는 paintToDo함수를 사용해준다. 

다음 강의에서는 버튼을 누르면 list가 삭제되는 기능을 구현해보겠다. 

#3.6 Making a To Do List part Three (12:03)

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");


const TODOS_LS = "toDos";



let toDos=[];

function deleteToDo(event){
    const btn = event.target;
    const li = btn.parentNode;
    toDoList.removeChild(li);
    const cleanToDos = toDos.filter(function(toDo){
        return toDo.id !== parseInt(li.id);
    });
    toDos=cleanToDos;
    saveTodos();
}

// JSON.stringfy
// JSON = JavaScript Object Notation 의 준말. 자바스크립트 오브젝트 표기법
// ex) Object 를 String으로 혹은 String을 Object로 바꿔주기도 한다.
// localStorage key값으로는 Object가 못들어간다. 오직 String만
// 그래서 String으로 변환해야 정상적으로 key값에 들어가는걸 확인할 수 있다.
function saveTodos() {
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos))
}

function paintToDo(text) {
    const li= document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length+1
    delBtn.innerHTML="X";
    delBtn.addEventListener("click",deleteToDo);
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.id=newId
    toDoList.appendChild(li);
    const toDoObj = {
        text : text,
        id : newId
    };
    toDos.push(toDoObj);
    saveTodos();
}


function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value="";
}
// forEach는 array를 위한 function이다.
// 이와 같은 예로 String도 function이 있고
// Object도 function이 있다.

function loadToDos(){
    const loadedToDos=localStorage.getItem(TODOS_LS)
    if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
       parsedToDos.forEach(function(toDo) {
           paintToDo(toDo.text);
       });
    }
}

function init() {
    loadToDos();
    toDoForm.addEventListener("submit",handleSubmit)
}
init();

이번 강의에서는 list를 지우는 기능을 추가할 것이다. 

첫 번째로 버튼의 addEventListener를 생성한다. click 이벤트 발생 시 deleteToDo함수 호출되게 

이후 deleteToDo함수를 정의해보자면 

첫번째로 버튼을 클릭했을 때 consold.log를 확인해보면 버튼은 클릭된다는 걸 확인할 수 있는데 

어떤 리스트의 버튼이 클릭되는지 확인이 불가하다 .그래서 확인이 가능하게 해주는. target을 이용해서 

부모 태그인 <li>의 id를 알아내기 위해 parentNode를 사용해서 추출해낸다. 

추출 후 html태그에서의 removeChild를 이용해 지워주면 html상 즉 브라우저상에서는 사라진 list를 확인할 수 있다. 

하지만 새로고침하면 사라진 list가 다시 생성이 되는데 이는 지워준 리스트 항목들로 교체를 하지 않았기 때문이다.

교체해주기 위해서는 .filter함수를 사용할 건데 안의 콜백 함수의 조건? 에 부합하는 값들로 새로운 Array를 만들어준다. 

그러니까 1,2,3 가지의 리스트가 있고 리스트 1의 버튼을 눌러 삭제를했으면 2,3, 의 리스트가 남아 있을 거고 이건 브라우저에 보이는 2,3 리스트이다. 하지만 localStoarage에서는 안 없어져 1,2,3의 리스트가 존재하고 2,3 이남은 Array와 1,2,3, 이 남은 Array를 비교해서 값이 다른 부분을 버리고 남은 부분으로 새롭게 Array를 만들어주는 것 

그렇게 새롭게 만든 Array를 toDos에 넣어주고 saveToDos()를 이용해서 새롭게 초기화해준다. 

2021-01-17

#3.3 Saving the User Name part Two (08:12)

html

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="index.css">
</head>

<body>
<div class="js-clock">
  <h1>00:00</h1>
  <form class="js-form form">
    <input type="text" placeholder="what is your name?"/>
  </form>
  <h4 class="js-greetings greetings"></h4>
</div>


<script src="clock.js"></script>
<script src="greeting.js"></script>
</body>
</html>

css

.form,
.greetings{
  display: none;
}
.showing{
  display: block;
}

JavaScript

const form =document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greeting= document.querySelector(".js-greetings")

    const USER_LS = "currentUser",
        SHOWING_CN = "showing";

function handleSubmit(event){
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
    saveName(currentValue);
}

function saveName(text){
    localStorage.setItem(USER_LS, text);
}

function askForName() {
    form.classList.add(SHOWING_CN)
    form.addEventListener("submit",handleSubmit)
}

function paintGreeting (text) {
    form.classList.remove(SHOWING_CN)
    greeting.classList.add(SHOWING_CN)
    greeting.innerText = `Hello ${text}`
}
function loadName(){
    const currentUser = localStorage.getItem(USER_LS)
    if(currentUser === null){
        // he is not
        askForName();
    } else {
        // she is
        paintGreeting(currentUser);
    }
}

function init() {
    loadName()
}
init();

이번 강의에서는 input 태그안에 텍스트를 입력하고 enter를 누르면(submit) 

브라우져 application key / value 값에 currentUser / input값 이들어가게 하게 코드를 작성했다. 

일단 첫번째로 askForName이라는 메서드를 만들고 

form태그에 SHOWING_CN변수의 값이 클래스명에 들어가게 설정하고 

addEventListener로 "submit" 이벤트가 발생시 hadleSubmit 함수를 실행하게 코드를 작성한다. 

+ 위에 써있듯 input값을 넣고 enter를 누르면 브라우져는 submit 이벤트가 발생하게 되고 

미지의 곳으로 날라가고 브라우져는 새로고침을 하게되는 모습을 확인 가능한데 

우리는 미지의 곳으로 날라가지 않게 저장할수 있도록 eventhandler로 handleSubmit 함수를 정의해보겠다. 

handleSubmit 함수를 보면 event를 인자값으로 받아 

미지의 곳으로가는걸 막아주는 preventDefault(); 함수를 쓰고 

input값을 담아줄 currentValue변수 생성후 

paintGreeting 함수를 사용해서 화면에 Hello currentValue 가 띄워지게 만든다 

그리고 나서 localStorage에 저장하기위해 saveName함수를 만들어 currentValue를 인자값으로 받게 하고 

saveName 함수에서 localStorage.setItem(USER_LS,text) 값으로 저장하게 만들어주면 된다. 

#3.4 Making a To Do List part One (12:43)

html

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="index.css">
</head>

<body>
<div class="js-clock">
  <h1>00:00</h1>
</div>
  <form class="js-form form">
    <input type="text" placeholder="what is your name?"/>
  </form>
  <h4 class="js-greetings greetings"></h4>
  <form class="js-toDoForm">
    <input type="text" placeholder="Write a to do">
  </form>
<ul class="js-toDoList">
</ul>


<script src="todo.js"></script>
<script src="clock.js"></script>
<script src="greeting.js"></script>
</body>
</html>

JavaScript

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");


const TODOS_LS = "toDos";

function paintToDo(text) {
    const li= document.createElement("li");
    const delBtn = document.createElement("button");
    delBtn.innerHTML="X";
    const span = document.createElement("span");
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    toDoList.appendChild(li);
}


function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value="";
}

function loadToDos(){
    const toDos=localStorage.getItem(TODOS_LS)
    if(toDos !== null){

    }
}

function init() {
    loadToDos();
    toDoForm.addEventListener("submit",handleSubmit)
}
init();

이번 강의에서는 HTML 파일에 <form> 태그를 추가해서 to-do-list 목록을 받는 <input>태그를 생성하고 

그아래 <ul> 태그를 생성해 <li>태그 안에 목록들이 추가되어서 list형식으로 나오게 코드를 짜보았다. 

첫번째로 새로운 todo.js파일을 만들어서 그안에 작업을 했는데 

첫번째로 만든 함수로는 

loadToDos가 있다.  이함수는 아직 구현이 제대로 안되었다.

다음강의에서나 다룰거 같아서 여기서는 설명을 패스하겠다. 

handleSubmit함수를 봐보자. 

일단 이함수에서 구현한 기능들은 

첫번째로 인풋값을 작성하고 엔터를 눌렀을때 submit 이벤트가 발생하고 

브라우져가 초기화되는걸 방지하기 위해 event를 인자값으로 받고 

preventDefault(); 함수를 사용해서 새로고침되는걸 막아준다. 

그리고 이후 인풋값을 저장하는 currentValue 변수를 초기화 해주고 

paintToDo(currentValue) 함수를 호출해준다. 이 함수의 정의는 handleSubmit함수 정의를 끝내고 하겠다. 

그리고 인풋에 남아있는 작성된 텍스트를 없애기 위해 

toDoInput.value=""; 로 공백을 주고 마무리된다. 

paintToDo 함수를 봐보자. 

이 함수에서는 <li>와 <button>, <span>태그들을 생성해주는 createElement 함수를 이용해서

변수 li와 delBtn,span에 각각 초기화 해준다. 

초기화해주고 delBtn같은경우 X의 문자를 innerHTML로 추가해주는데 

이 부분은 나중 강의에서 목록 삭제기능을 구현하기위함인거 같다. 

이번 강의에서는 기능까지의 구현은 되지 않았다. 

그다음으로는 span 변수에 text(currentValue) 를 저장해주고 

appendChild()함수를 이용해서 각각의 생성된 태그에 추가를해주는 걸로 이 강의는 마무리된다. 

2020-01-15

#3. 0 Making a JS Clock part One (09:54)

Momentum

시계를 만들어보자.

항상 무언갈 만들 때 작은 부분으로 나눠서 진행한다고 한다. 

그리고 함수를 정의할때 init() 함수를 만들고 그 안에 함수들을 생성하고 

init() 함수를 호출해서 한다고 한다. 

html

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="index.css">
</head>

<body>
<div class="js-clock">
  <h1>00:00</h1>
</div>
<script src="index.js"></script>
<scipt src="clock.js"></scipt>
</body>
</html>

JavaScript

const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");

function getTime() {
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText=`${hours}:${minutes}:${seconds}`;
}

function init() {
    getTime();
}
init();

이번 강의에서는 시간을 구하고 브라우저에 출력하는 코드를 짜보았다. 

위에서 말했듯이 작은부분을 나눠서 진행을 해보면 

html문서에 script태그를 이용해서 자바스크립트 파일을 연결해준다. 

연결해주고 나서 <div> 태그를 이용하여 js-clock이라는 클래스 이름을 부여하고 

<div> 태그 안에 <h1> 태그를 이용하여 00:00이라는 시간을 의미해줄 수 있는 문자를 써준후

자바스크립트 파일로 이동한다. 

이동후 html 코드 안에서 <div class="js-clock">을 객체화시켜 clockContainer에 저장 후 

<div> 클래스 안에 있는 <h1> 태그를 clockTitle 변수에 저장시킨다. 

이후 시간을 불러오는 함수를 정의한다. 

Date(); 객체를 생성시켜 시간을 구하는 각 getMinutes, getHurs(), getSeconds(); 함수를 이용해 

date, minutes, hours, seconds 변수에 저장시킨 후 innerText를 이용해 

<h1> 태그를 담아둔 clockTitle변수에 시간을 초기화시켜준다. 

이후 

init() 함수 안에 getTime() 함수를 넣고 init()을 실행하는 코드를 작성하고 브라우저를 확인하면 

시간이 잘 나오는 걸 확인할 수 있다. 

지금 코드의 문제로는 현재시간이 계속 업데이트되지 않는다. 

업데이트를 하려면 계속 새로고침을 해주어야 하는데 

다음 강의에서 setInterval 함수를 이용해서 자동으로 업데이트되게 하는 방법에 대해서 알려준다고 한다. 

#3. 1 Making a JS Clock part Two (07:17)

setInterval

ternary operator(삼항 연산자)

JavaScript

const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");

function getTime() {
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText=`${hours<10 ?`0${hours}`:hours}:${minutes <10 ? `0${minutes}`: minutes}:${seconds < 10 ? `0${seconds}`: seconds}`;
}

function init() {
    getTime();
    setInterval(getTime,1000);
}
init();

위의 이전 강의에 기존 코드에서 바뀐 코드들을 한번 보자. 

init() 함수 부분에 setInterval 함수를 추가해놓은걸 확인할 수 있는데

setInterval함수에 대해 짧게 말하자면 두 개의 인자를 받는다 첫 번째 인자에는 함수를 두 번째 인자에는 ms단위의 간격으로 함수가 다시 재실행되야하는지를 정해준다. 

추가하고 나서 시간을 나타내는 데 있어서 1시 1분 1초와 같이 1의 자리인 시간대에서 01 02 03 이런 식으로 나오는 게 보기에 더 직관적이어서 바꾸고자 하는데 이럴 때 IF-ELSE문을 이용해서 할 수 있겠지만 

여기서는 삼항 연산자를 이용해서 간단하게 바꿔보았다. 

삼항 연산자는 IF? ~~~ : ELSE 이런 식으로 써주면 된다. 

hours가 10 이하라면 앞에 0을 붙여주도록 하고 아니라면 그냥 그대로의 hours가 출력되도록.

이제 자바스크립트에서의 시간을 불러오는 함수는 여기서 끝이고 

다음 강의에서는 사용자의 이름을 불러오는 방법에 대해서 강의를 한다고 한다. 

#3. 2 Saving the User Name part One (13:24)

form

localstorage

브라우저의 localstorage에는 작은 자바스크립트의 정보들이 있다. 

위에서 만든 코드의 브라우저에서 확인해보자.

그리고 여기다 장난을 해볼 것이다.

이를 코드로 구현해서 브라우저에 띄워보겠다.

html

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="index.css">
</head>

<body>
<div class="js-clock">
  <h1>00:00</h1>
  <form class="js-form form">
    <input type="text" placeholder="what is your name?"/>
  </form>
  <h4 class="js-greetings greetings"></h4>
</div>


<script src="clock.js"></script>
<script src="greeting.js"></script>
</body>
</html>

css

.form,
.greetings{
  display: none;
}
.showing{
  display: block;
}

JavaScript

const form =document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greeting= document.querySelector(".js-greetings")

    const USER_LS = "currentUser",
        SHOWING_CN = "showing";



function paintGreeting (text) {
    form.classList.remove(SHOWING_CN)
    greeting.classList.add(SHOWING_CN)
    greeting.innerText = `Hello${text}`
}
function loadName(){
    const currentUser = localStorage.getItem(USER_LS)
    if(currentUser === null){
        // he is not
    } else {
        // she is
        paintGreeting(currentUser);
    }
}

function init() {
    loadName()
}
init();

위의 코드를 보면 일단 form 태그는 무시하자 다음 강의를 위한 초석이다. 

이번 강의에서 설명하고자 하는 부분은 따로 있다. 

h4태그에 클래스를 js-greetings(js전용) greetings(css전용)을 추가하자

+ 클래스를 만들 때도 하나만을 위한 클래스로 만드는 게 좋다. 

아무튼 추가 후 css에서 

. greetings를 display:none으로 브라우저에서 지워주는 걸 확인하고 

그아래 

. showing 클래스를 css에 작성해서 block 형식으로 바꿔주는 코드를 작성해준다. 

이후 JS파일로 넘어와서 

js-greetings태그를 객체화시켜서 greeting안에 넣어준다 

그리고 showing과 currentUser 문자를 담을 변수인 USER_LS와 SHOWING_CN을 생성하고 

loadName 함수를 만들고 그 안에 

localStorage객체의 getItem 함수를 이용해서 USER_LS (currentUser)라는 key에 대한 value를 가져와

currentUser변수에 넣어주고 

if-else 조건문으로 존재 여부를 확인해서 없다면 기존 적용되어있는 display:none에는 변화가 없을 테니 

브라우저에는 아무것도 안나올 것이고 

존재하면 else문에 paintGreeting(crrentUser) 함수를 실행할 것인데 

위의 paintGreeting 함수를 설명해보자면 

기존 display:none의 값을 block으로 바꿔서 브라우져에 띄워지게 만들고

innerText로 Hello currentUSER에 대한 VALUE값이 출력되게 만드는 것.

다음 강의에서는 input의 값을 저장하고 사용자를 불러오는 거에 대해서 해본다고 한다. 

2021-01-14

#2. 5 If, else, and, or (11:09)

이번 강의에서는 if-else에 대해서 알려준다. 

if-else는 조건문이다. 

예를 들어 유저가 로그인했으면 조건에 대한 부분을 보여주고 

안 했으면 다른 부분을 보여주는 

다행스럽게도 if-else는 모든 프로그래밍 언어에 존재한다. 

자바스크립트에서의 if-else는 이렇게 생겼다. 

if(condition) {
   block
} else {
   block
}

block은 자바스크립트 표현법이다.

이건 console.log , alert 아무거나 와도 되고 

조건은 if()의 () 사이에 들어가게 되고 참을 의미하면 뭐든 넣을 수 있다.

예를들어보자. 

if (10>5) {
console.log("hi")
} else {
console.log("ho")
}

다른 예) " === "

if (10===5) {
console.log("hi")
} else {
console.log("ho")
}

이 코드에서 === 는 단순히 10과 5가 같은 건지 체크하는 것이다. 체크를 해보면 

true(참)이 아닐테니 else 쪽으로 넘어가서 ho를 출력할 것이다.

===로는 다양한 걸 체크해볼 수 있는데

자료형이 같은지 체크해볼 수도 있다. 

명심해두어야 할 것은 if의 조건은 무조건 참이어야 한다. 

if 문에 작성한 것을 실행하려면 말이다.

if (10===5) {
console.log("hi")
} else {
console.log("ho")
}


if (10==="10") {
console.log("hi")
} else {
console.log("ho")
}


if ("lsw"==="lswd") {
console.log("hi")
} else {
console.log("ho")
}

다른 예 ) 다중 if

if( 10 === "10") {
console.log("hi")
} else if(10>5){
console.log("lalala")
}else { console.log("ho")}

위의 코드를 보면 두 가지의 조건을 걸 수 있고 첫 번째 조건이 참이 아니기에 그다음 조건으로 넘어가 조건이 맞는지 검사를 하게 되고 검사 후 참이어서 그다음 else로 넘어가지 않고 lalala를 콘솔 창에 띄우는 걸 볼 수 있다.

다른 예 ) 조건의 결합 '&&'(and) , '||'(or)

if(10>5 && "lsw" === "lsw") {
console.log("hi")
}else {
console.log("ho")
}

위의 코드는 두 가지의 조건이 참이어야지 되는 조건이고 &&를 사용해서 구현할 수 있다.

|| 를 사용하면 둘 중 하나만 조건이 참이면 if문의 코드를 실행한다.

if(10<5 || "lsw" === "lsw") {
console.log("hi")
}else {
console.log("ho")
}

prompt and if

const age = prompt("How old are you");

if ( age>=18 && age <=21 ) {
console.log("you can drink but yon should not")
}else if ( age<18) {
console.log("you cant")
}
else{
console.log("go ahead")
}

prompt를 이용해서 웹페이지가 시작되었을 때 alert와 같은 경고창을 띄울 수 있는데 이는 아주 오래된 JavaScript라서 

잘 안 쓰인다고 한다 그냥 그렇다고 한다. 

다시 코드를 넘어와서 prompt로 나이를 받아와 조건문을 이용해서 console로그에 띄운 걸 확인할 수 있다. 

#2. 6 DOM - If else - Function practice (09:10)

예제 컬러 체크

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
</head>

<body>
<h2 id="title">Hello!</h2>
<script src="index.js"></script>
</body>
</html>

const title = document.querySelector("#title");
const BASE_COLOR = "black"
const OTHER_COLOR = "red"



function checkColor(){
    if( title.style.color ===BASE_COLOR){
        title.style.color=OTHER_COLOR;
    }else {
        title.style.color=BASE_COLOR;
    }
}


function init() {
    title.style.color=BASE_COLOR
    title.addEventListener("click", checkColor)
}

init();

위의 코드를 보면 BASE_COLOR와 OTHER_COLOR를 설정해준다. 

보통 사람들은 상수를 선언할 때 대문자로 한다고 한다. 

설정해준 후  evnetListener를 추가해줘서 h1태그 (title)을 클릭 시 checkColor 함수를 실행하게 하여 

checkColor 함수 안에 있는 조건문을 실행하여 BASE_COLOR인지 확인 후 같다면 OTHER_COLOR로 바꾸고 

다시 클릭하면 BASE_COLOR랑 같은지 확인해보는데 아까 OTHER_COLOR로 바뀌어서 다르니까 ELSE문에 있는 

다시 BASE_COLOR로 돌아가는 코드를 실행하는 걸 확인할 수 있다.

이러한 방법이 로직을 수정하는 방법이라고 볼 수 있다. 

이벤트 룰 수정하고 색깔을 바꾼다. 

그리고 이벤트의 근원을 찾고자 한다면 MDN사이트를 애용하자

developer.mozilla.org/ko/docs/Web/Events

2021/01/07 - [JAVA & APP :국비지원 학원 복습/JavaScript] - JavaScript : 08 이벤트

#2. 7 DOM - If else - Function practice Two (13:08)

이전 강의와 같은 방법은 대게 좋은 방법은 아니다 

왜냐하면 CSS에서나 HTML에서 처리해야 할걸 JavaScript에서 해결하고 있기 때문이다. 

각자의 영역에서 해결해야 할 일을 지정해주는 것이 좋다고 생각한다. 

그래서 JavaScript에서는 로직만을 다루게 한번 이전 강의의 코드들을 수정해보겠다. 

html

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="index.css">
</head>

<body>
<h2 id="title" class="btn">Hello!</h2>
<script src="index.js"></script>
</body>
</html>

css

body {
  font-family: sans-serif;
}
h1 {color:black;}

.btn{
  cursor:pointer;
}

.clicked {
  color:red;
}

JavaScript

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked"


function handleClick() {
    if (title.className !== CLICKED_CLASS){
        title.className=CLICKED_CLASS;
    }else {
        title.className="";
    }
}


function init() {
    title.addEventListener('click', handleClick)
}
init();

위의 코드들을 보면 알 수 있지만 초기 코드에 적용된 클래스인 btn인 두 번째 클릭 때는 빠져있는 것을 보인다.

이는 script에 else문에 class를 전부 지워버리는 코드를 작성해서 인데 btn이라는 class이름을 써줄 수 있지만 

효율적인 방법은 아니다.  

이문제를 해결하기 위해서는 claslist를 이용하는 것이다.

classList를 이용한 코드를 한번 다시 보자.

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked"


function handleClick() {
    if ( !title.classList.contains(CLICKED_CLASS)){
        title.classList.add(CLICKED_CLASS);
    }else {
        title.classList.remove(CLICKED_CLASS);
    }
}


function init() {
    title.addEventListener('click', handleClick)
}
init();

classList.add , classList.remove, classList.contains 함수를 이용해서 단순하게 CLICKED_CLASS만 추가했다 지우는 걸 확인할 수 있다.

그리고 프로그래머들은 게으른데 이 방법보다 더 좋은 방법이 있다.

그 방법은 toggle을 이용하는 것 토글로 지정해주면 알아서 검사해서 없으면 추가 있으면 지워준다.

아래 코드를 봐보자.

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked"


function handleClick() {
    title.classList.toggle(CLICKED_CLASS);
}


function init() {
    title.addEventListener('click', handleClick)
}
init();

해보면 위와 같이 똑같이 적용되는 걸 확인할 수 있다. 

2021-01-13 DAY3

#2. 0 Your first JS Function (13:11)

전에 수업에서 console.log를 작성했던걸 확인할 수 있다. 

그리고 console.log를 사용해서 lswinfo.gender를 조회했다 한번 생각해보자. 

console.log와 lswinfo.gender의 비슷한 점을 이렇게 적어놓고 나서 보니. log ,. gender 중간에. 이 있는걸

확인할 수 있는데 lswinfo는 Object이다. 이렇듯 console.log 또한 Object임을 알 수 있다.

console.log 는 자바스크립트 안에 있는 것. 

console이라는 Object가 있고 log라는 키가 있다.

그리고 이경우의 log는 function(함수)인 것.

하지만 Object이지.

만약 console 오브젝트를 console.log로 찍어보면 어떻게 나올까

Object인 console은 lswinfo보다 더 큰 오브젝트이다. 

여기서 보듯이 

브라우저가 가지고 있는 자바스크립트는 object에 넣을 수 있다. 

이게 우리가 어떻게 자바스크립트가 생겼는지에 대한 매우 좋은 시각을 가질 수 있을 거라고 생각한다. 

이제 하나 궁금한 점이 생길 수 있는데

console.log는 어디에서 온 것일까?

console.log, alert 등 우리가 곧 볼 다른 많은 함수들은

내장 함수(built-in function)이라고 한다. 

함수(function)란?

function is function

어떤 것의 기능, 기능적인 거 

함수는 어떤 걸 수행하려는 한 부분으로,

내가 원하는 만큼 쓸 수 있다. 

여기까지 이것이 함수.

한 코드 조각으로 내가 원하는 만큼 쓸 수 있는 것!

예를 들어 console.log로 hello라고 찍히게 하는 코드 조각을 갖고 싶다고 하자.

그리고 함수를 가지고 있지 않다면 그냥 console.log('hello')라고 쓸 것이다. 

4번 한다고 하면 마찬가지로 4번을 반복해서 써야겠지. 

하지만 인사말을 바꾸고 hello sunwoo , 같이 사람이 계속 바뀐다면 매번 코드를 수정해야 하는

불편함이 있다. 이는 효과적이지 않고 프로그래머들은 게으르다 필요 없는 코드는 필요하지 않다. 

console.log('hello')
console.log('hello, lynn)
console.log('hello, sunwoo)
console.log('hello)

// 매우 귀찮다.

우리가 필요한 건 이름을 받아와서 내가 무슨 이름을 주든 hello 해주는 게 나오는 함수가 필요하다.

자바스크립트에서 어떻게 함수를 만들 수 있을까?

먼저 우리가 해야 할 건 function을 주는 것.

그리고 함수 이름을 주는 것이다. 

함수의 이름은 sayHello라고 하자. 

function sayHello() {
}

바로 이것이 자바스크립트의 함수 정의하는 문법이다.

그리고 이 함수 안에 하나의 인스트럭션을 넣을 것이다. 

넣고 나서 함수를 벗어나서 sayHello();라고 쓰면

sayHello();는 Hello라고 나오는 걸 확인할 수 있다.

function sayHello() {
	console.log('hello')
}


sayHello()

이것이 이 수업에서 만든 첫 함수이다.

우리는 이제 sayHello를 이용해서 다른 친구들에게도 인사를 건네려고 한다. 

건네기 전에 우리는 console.log를 이용해서 복습을 해보자

우리가 여태껏 console.log를 사용해서 콘솔 창에 출력을 해본 경험을 바탕으로 생각해 봤을 때 

console.log("hello") ( ) 안에 있는 내용을 출력한다는 걸 예상할 수 있는데 이걸 보고 생각할 때 

함수는 ( ) 안에 있는 내용을 사용한다는 걸 확인할 수 있다 그리고 이와 마찬가지로

sayHello("선우") 이렇게 작성한다면 hello 선우 가 출력되지 않을까라고 생각할 수 있는데 

실제로 실행해보면 실행이 잘되지 않는 걸 확인할 수 있다. 왜 그런지 생각해보자 

일단 첫 번째로 ( ) 사이에 있는 것을 인자(argument)라고 한다. 

인자(argument)는 변수 같은 것이다. 

그리고 우리 함수는 인자(argument)를 받아 저장을 한다.

그래서 우리는 함수 sayHello를 준비시켜야 한다. 

우리가 주는 인자(argument)를 가지고 갈 수 있도록 말이다. 

함수를 준비하는 방법은 ( ) 안에 뭘 써주는 것

함수를 만드는 시점에 ( ) 안에 인자(argument)를 넣는 것이다. 

뭐든 우리가 원하는 이름을 넣어도 된다. 

function sayHello(potato) {
	console.log('Hello', potato)
}

sayHello("sunwoo")

여기에 들어간 이름은 위에서 말했듯 변수 같은 것

그리고 parameter 혹은 argument라 불린다.

설정해준 이름은 함수 안에서 사용하게 될 이름이 된다.

그리고 함수를 쓰고 ( ) 안에 무언가를 찾아서 있다면 자바스크립트는 () 안에 들어간 내용을 사용하게 된다.

작동이 잘되는 걸 확인할 수 있고

자바스크립트에서 하는 것은 sunwoo를 potato에 넣고 potato는 console.log 안에 들어가게 되는 것이다.

이것이 외부에 있는 데이터를 읽는 함수를 만드는 방법이다.

함수에게 외부에 있는 데이터를 주는 방법 

console.log 함수는 argument를 무한대로 가질 수 있다. 

#2. 1 More Function Fun (10:24)

자바스크립트에서는 "" 도 스트링이고 ' ' 도 스트링이다.

만약 큰따옴표로 시작했으면 큰따옴표로 끝내야 하고 작은따옴표 또한 마찬가지이다. 

그리고 위에서의 방식으로는 스트링 안에 변수를 집어넣지 못한다. 

변수를 넣으려면 "" + 변수  이런 식으로 작성해야 한다 

이 방식이 불편해 자바스크립트는 ` ` 백 틱이라는 걸 사용해서 쓸 수 있다.

` ` 을 사용하면 스트링 안에 변수를 넣을 수 있다. 아래 코드를 봐보자.

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

console.log("sunwoo",99);

위 코드를 보면 스트링 안에 변수를 집어넣을 수 있는 걸 확인할 수 있다.

함수에는 return을 줄 수 있는데 return은 쉽게 생각하면 물건을 살 때 돈을 지불하고 잔돈을 받는 그런 느낌이다. 

return을 보기 전에 아래 코드를 한번 확인해보자. 

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

const greetSunwoo = sayHello("sunwoo",99);

console.log(greetSunwoo);

상수 const greetSunwoo는 sayHello를 호출한다. 

함수 sayHello는 console.log를 사용해 무언가를 출력해낸다. 

그러고 나서 console.log에 greetSunwoo를 넣으면 정의되지 않았다 나온다. 

여기서 헷갈릴 수 있는데 다시 차근차근 생각해보자. 

greetSunwoo는 sayHello의 실행된 결과 값이다. 

sayHello에서는 아무것도 반환하지 않았다. 

그래서 greetSunwoo는 단지 하나의 console.log를 갖게 된다.

이 말이 맞는지 확인해봐야 할 건 sayHello에 무언가를 반환시켜보는 것이다. 

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

console.log(greetSunwoo);

console.log는 위에서 말했듯이 Object이다. 

이제 우리만의 객체인 math객체를 만들어보자.

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

const plus=calculator.plus(5,5)
console.log(plus)

위의 코드를 보면 확인할 수 있듯이 

console과 calculator는 같은 객체임을 확인할 수 있다. 

또한 log()는 인자를 가지는 함수임을 

plus는 2개의 인자를 가지는 함수임을 확인할 수 있다. 

#2. 2 JS DOM Functions (08:49)

이전 강의에서 우리가 함수를 가졌던 것과 같이 console.log , calculator.plus와 같이

브라우저에는 우리에게 제공하는 더 많은 다른 함수들이 있다. 

이번 강의에서 하고자 하는 부분은 자바스크립트에서 HTML을 다루는 것이다. 

CSS, JavaScript에선 HTML의 element를 선택할 수 있고 그래서 변경할 수도 있다. 

말보다는 아래 코드를 보고 확인해보자. 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>Something</title>
    <link rel="stylesheet" href="indes.css" />
  </head>
<body>
<h1 id="title">This works!</h1>
<script src="index.js"></script>
</body>

</html>

ㅇ   

이 코드는 일전의 강의를 들으면서 작성해둔 html 코드이다. 

아래의 css코드를 또 봐보면 html의 요소들을 선택해서 효과들을 주는 걸 확인할 수 있다.

body {
  background-color: peru;
}
h1{
  color:white;
}

이제 우리는 자바스크립트에서도 html 코드의 id가 title인 h1코드를 선택해보자. 

const title = document.getElementById('title');

console.log(document);
console.log(title);

자바스크립트에서 html의 요소를 가져오려면 console 대신에 document를 사용해서 가져오는데 

여기서의 document 역시 Object라는 걸 확인할 수 있다. console.log로 document를 찍어보면 

많은 것들이 담아있는 Object인 Document를 확인할 수 있다. 

그리고 두 번째 title을 console.log에 담아서 확인해보면 html 코드의 h1태그를 가져오는 걸 확인할 수 있다. 

자바스크립트는 HTML 태그를 가져와 객체로 만든다. 

객체로 만드는 건 document object의 getElementByID이다. 

Object에는 매우 많은 키들이 존재한다. 

아까 console의 키들만 봐도 알 수 있다.

예를 들어 아래 코드처럼 작성하면

const title = document.getElementById('title');

title.innerHtml="hi from JS";

HTML 코드에서는 변화가 없지만 막상 웹에서 소스 검사를 하면 바뀌어있는 걸 확인할 수 있다. 

우리가 찾게 될 모든 객체들의 함수들 DOM 형태로 변경 가능하다.

2021/01/08 - [JAVA & APP :국비지원 학원 복습/JavaScript] - JavaScript : 09 DOM - 문서 객체모델, 이미지 조작, 동적 테이블 생성 (1/2)

#2. 3 Modifying the DOM with JS (06:43)

이전 강의에서 HTML을 DOM객체로 바꿀 수 있다는 걸 확인했다.

이번 강의에서는 DOM으로 만든 title을 모든 가능성을 보여주는 것. 

console.dir(title)을 해보면 title에 할 수 있는 모든 내용이 나온다.

const title = document.getElementById('title');

title.innerHTML="Hi from JS";

console.dir(title)

이중 스타일 부분을 확인하고 자바스크립트로 css 스타일을 적용해보겠다.

const title = document.getElementById('title');

title.innerHTML="Hi from JS";

title.style.color="red";

이렇게 자바스크립트로 HTML을 조종할 수 있다. 

const title = document.getElementById('title');

title.innerHTML="Hi from JS";

title.style.color="red";

console.dir(document);

console.dir(document)로 우리가 가지고 있는 html의 텍스트들 전부 확인이 가능하다. 

document.title로 title명을 바꿔보겠다.

getElementbyid 말고 다른 여러 가지 들로 html을 객체화할 수 있는데

종류로는

• getElementbyClassName() : 클래스 이름으로 찾기 
• getElementByTagName() : 태그 이름으로 찾기 ex) h1 body article

• querySelector() : 클래스 or id로 찾기. class , #id 이렇게 css 문법으로 인자에 넣어줘야 함.

#2. 4 Events and event handlers (07:01)

자바스크립트는 단지 html과 css를 바꾸고 싶어서 만들어지진 않았다. 

자바스크립트는 이벤트에 반응하기 위해서 만들어졌다. 

그럼 이벤트란 무엇이냐 

이벤트는 웹사이트에서 발생하는 것들을 말한다.

click, resize, submit
input change load
before closing printing 같은 것들이 이벤트이다. 

2021/01/07 - [JAVA & APP :국비지원 학원 복습/JavaScript] - JavaScript : 08 이벤트

좋은 사실은 우리가 이 이벤트를 중간에 가로챌 수가 있다는 것이다. 

예를 들면 window이벤트를 예를 들어 resize를 해보자. 

그럼 코드를 봐보자.

function resizeHandler() {
    console.log("i have benn Resized");
}
window.addEventListener('resize', resizeHandler )

위의 코드를 보면 addEventListner는 이벤트를 기다리는 명령어이다. 

항상 모든 이벤트가 일어나기를 기다리면 우리의 웹사이트는 무거워지는 지름길일 것이다. 

그래서 특정 이벤트를 골라서 기다리도록 지정을 해주고 이벤트가 발생 시 처리할 함수를 적어주는 것. 

그리고 여기서 함수를 호출할 때는 ()를 빼고 써주자. ()를 넣어서 써주면 이벤트 발생 시 함수 호출이 되는 게 아니라

웹이 시작되자마자 바로 호출이 돼버린다고 한다.  

위와 같이 코드를 작성해주면 브라우저의 크기를 줄었을 때 이벤트가 발생하는 걸 확인할 수 있다. 

그리고 이벤트 발생 시 함수 호출할 때 트릭이 하나 있다

우리가 일전에 함수에 인자를 넣어주면 그인 자를 다룰 준비를 함수에서는 늘 하고 있다고 했다는 게 기억이 나는가? 

아까 위의 코드에서 인자를 받는 함수로 만들어준다면 어떤 식으로 되는지 확인해보자.

function resizeHandler(event) {
    console.log(event);
}
window.addEventListener('resize', resizeHandler )

이건 resize 이벤트니까 지금 당장 유용하지 않지만 우리가 폼을 만들 때 유용할 거라고 한다 이 부분에 대해서는 나중에 이야기해본다고 한다. 

이제 이벤트 리스너를 title에 줘보자

title을 click 하면 색깔이 변하도록 말이지 

function handleClick() {
    title.style.color="white";
}
title.addEventListener('click', handleClick )

클릭 후 변경되는 걸 확인할 수 있다. 

학원 수업이랑 병행하려고 하니 힘이 든다. 

최대한 강의 흐름을 기록하고 싶어서 따라 적는 비중이 높은데 

오늘은 좀 하면서 지쳤던 거 같다. 

음 요약해서 적으면 미래의 내가 다시 보았을 때 기억하기 힘들 거 같아서 

흐름을 적으면 도움이 될 거 같아 이렇게 시작했는데 ㅋㅋ 흠 잘 모르겠네 

오늘 너무 힘들어서 그런 거일 수도 있다. 

내일도 다시 잘해보자. 

2021-01-12

#1. 6 Your first JS Variable(변수!) (10:00)

이번 강의에서 배울 첫 번째 주제는 변수(Variable)

a=221;
b= a-5
console.log(b)

변경되거나 변경될 수 있는 것.

A는 변수가 될 수 있고 A는 바뀔 수 있다. 

B는 어떤 값이 될지 계산은 귀찮으니까 JavaScript에 시킨다.

console.log()를 이용해서 확인해보자.

보다시피 프로그램에서 잘 이해해서 처리한 걸 확인할 수 있다.

JavaScript에서의 첫 변수를 만들어보았는데 

JavaScript에서 변수를 만드는 건 쉽다. 

하지만 위의 코드는 아주 좋은 JavaScript가 아니다 

왜냐면 알다시피 JavaScript는 프로그래밍 언어이다. 

프로그래밍 언어는 일반적인 언어처럼 따라야 하는 규칙과 문법이 있다. 

JavaScript의 경우에는 문제점을 발견했는데

문제점은 사용자가 나쁜 것을 하는 것을 허용한다. 

JavaScript는 자식을 훈육하지 않는 아빠 같다. 

예를 들어 

아까의 코드를 보았을 때 a = 221를 보고 a에 대해 이렇게 작성할 수 있다. 

그러면 JavaScript는 써진 코드를 최대한 이해하기 위해 노력할 것이다.

쓰인 코드가 좋은 문법이 아니더라도 

그래서 문법을 철저하게 지켜서 만들려면 몇 가지를 주의해야 한다.

아까 코드를 살펴보면 라인을 확인할 수 있는데 

a=221 b=a-5

이런 식으로 작성하면 자바스크립트에서는 오류가 날것이다. 

에러를 확인하고 알 수 있는 것은 코드를 작성할 때 

모든 것(instructions)은 각기 다른 라인에 작성해야 한다. 

그리고 위에서 불렀던 '라인'을 Expressions라고 부를 거다.

모든 instructions도 한 줄에 있어야 하듯이

모든 expressions 또한 한 줄에 있어야 한다. 

그리고 instructions 제외하고 expressions가 끝나는 곳을 선언하는 방법은 ;(세미콜론)으로 문장 끝에 작성해주면 된다.

a=5;

+

그리고 다른 문법에서 변수를 시작할 때 위의 코드를 쓰듯이 작성하면 안 된다. 

이유는 두 종류의 변수가 있기 때문이다.  나중 강의에서 확인할 수 있을 것이다.

기본적으로 변수를 이렇게 시작하는 건 좋은 방법은 아니다. 

이거에 대해서는 다음에 이야기한다고 한다. 

변수를 만들고 싶을 때는 기본적으로 이렇게 작동한다. 

먼저 변수를 생성하고 

다음으로 이걸 초기화하고 

사용하면 된다.

1. Create
2. Initalize
3. Use

그리고 필요할 때는 생성과 초기화를 동시에 할 수 있고 나중에 사용할 수 있다. 

JavaScript에서의 변수 생성 규칙은 변수를 초기화하기 전에 'let' 이 단어를 앞 넣어야 한다. 

let 말고 다른 단어도 쓸 수가 있는데 그건 다음 강의에서 한다고 한다. 

더불어 왜 let을 쓰는지도 이해할 수 있을 거라고 한다. 

let a= 221
let b= a-5

console.log(b)

그리고 두 번째 라인의 a에는 왜 let을 쓰지 않았냐고 생각할 수 있는데 

let을 쓰지 않는 이유로는 

변수를 초기화하거나 생성할 때에는 let을 써야 하지만

이미 생성된 것을 사용할 때는 단지 참조만 하면 된다.

위의 코드를 보고 기억해야 할 것은

a를 생성하고 초기화를 했다 

그러면 b의 변수를 초기화하는 데 사용할 수 있다. 

왜냐면 우리가 만들고 초기화한 a가 b에서 사용할 a가 같기 때문이다. 

또한 변수는 가변적이기 때문에 변할 수 있고 우리가 바꿀 수도 있다. 

let a= 221
let b= a-5
a=4
console.log(b,a)

console.log에 a를 추가해서 어떻게 나오는지 확인해보자.

221-5 인 b값이 출력이 되고 a=4의 코드를 보고 a의 값은 4가 출력되는 걸 확인할 수 있다.

보다시피 JavaScript는 우리가 작성한 코드를 위에서 아래로 실행하는 걸 확인할 수 있다. 

#1. 7 let, const, var (04:40)

저번 강의에서 어떻게 a를 바꿨는지 볼 수 있다. 

처음의 a는 221이었고 지금은 4가 되었다. 

코드를 작성하다 보면 a의 값이 4로 변하기를 원할 때도 있지만

a의 값이 4로 변하지 않기를 원할 때가 있다. 

이럴 때 let 대신 const를 사용할 것이다 

constant는 상수라는 뜻이고 상수는 안정적이라는 뜻이다.

이건 변하지 않는다. 

const a = 221;
let b = a - 5;
a = 4;

이렇게 작성하면 JavaScript에서는 a는 상수로 지정되어있는데 못 바꾼다고 오류가 날것이다. 

항상 에러를 읽으려고 시도하는 것은 중요하다.

프로그래머로서 에러를 읽을 수 있어야 한다.

모든 정보나 대부분의 정보가 에러에 있기 때문이다. 

만약 다른 사람들이 작성한 변수를 바꿀 수 없게 하려면

const를 사용해야 할 것이다. 

작성한 변수가 바뀌어도 괜찮다면 let을 사용해야 하고 

다음 강의에서는 변수에 넣을 수 있는 Data에 대해 알아볼 것이다. 

#1. 8 Data Types on JS (09:01)

const what =????

// 헤이 ~ 자바스크립트 여기에 작성한건 뭐든 보지마 알겠지~ 


/*
ㄴㅁㅇ리ㅏㄴㅁ어리ㅏㄴㅁㅇㄹ
ㄴㅁ아ㅣ러ㅣㅁ나어ㅣ
ㅁ니ㅏㅇ러ㅣ만ㅇ러ㅣㅁ나러
*/

waht에 뭘 저장할지 코멘트(주석)를 코드에 달아보자 

코멘트는 코드에 남길 수 있는 노트 같은 것이다. 

코멘트 처리되지 않는 모든 코드는 프로그램이 실행하려고 한다. 

// 로 한 줄 주석을 사용할 수 있고. 

/* */ 로 여러 줄 주석이 가능하다.

자 이제 what에 뭘 저장할까 하기 전에 

변수를 선언할 때는 기본적으로 const를 쓰도록 하자 

필요할 때까지 let을 쓰지 말자 

첫 사용은 const로 진짜 필요할 때만 let! 

String을 해보자. 

스트링이라 하면 모든 걸 같이 붙이는 것 

보통 스트링은 텍스트 스트링을 말한다. 

const what ="LSW"

텍스트를 작성할 땐 큰따옴표를 이용해서 작성한다. 

큰따옴표를 없이 작성하면 오류를 확인할 수 있다. 

큰따옴표 없이 작성한 LSW는 what과 동일하게 같은 거라 보기 때문에 변수 LSW에 대해 정의를 해달라고 하는 오류를 볼 수 있다. 

전강 의의 b= a-5 와같이 LSW를 a로 보는 것이다. 그러고 LSW를 찾는 없어서 없다고 오류가 나온다. 

자 정상적으로 작성해서 실행해보자.

const what ="LSW"
console.log(what)

또한 "" 안에 숫자로 넣어도 보이는 건 숫자지만 이건 분명히 텍스트이다. 

명심해야 하고 조심히 사용해야 한다. 

const what ="123456789"
console.log(what)

여기까지가 String이었고 다른 걸 해보자. 

Boolean을 해보자 

Boolean 은 True or False이다. 

Boolean 은 이렇게 쓴다.

const what=false;
const oh = true;

모두 소문자로 쓰고 "" 없이 쓴다. 왜냐면 이건 텍스트가 아니니까 

바이너리 세계에선 (이진법) 모든 것은 0 or 1인데 

true는 1, false는 0이다. 

그래서 true / false로 저장할 수 있다. 

실제 애플리케이션에서는 어떻게 쓰는지 나중에 살펴볼 것이다. 

지금 알아야 할 것은 단순히 true / false는 텍스트가 아니라는 것

이제 Number를 해보자.

Number가 숫자인 건 다 아니까 

Float을 넘어가 보자.

Float은 숫자인데 floating number (떠돌이 소수점)을 가지고 있다.

55.1처럼 말이다. 

니콜라스의 경험상 암기할 필요 없다고 한다.

다음 강의에서는 어떻게 모두 정렬해서 쓰는지 알려준다고 한다. 

자바스크립트에서 어떻게 데이터를 정렬해야 할까 

#1. 9 Organizing Data with Arrays (08:26)

자! 그럼 어떻게 우리가 가진 데이터 타입을 정렬할까 

정답은 두 가지이다.

이 두 개는 각 언어 안에서 찾을 수 있는데 

우리는 특별히 자바스크립트로 볼 것이다.

하나는 Array이다. 

다른 하나는 Object라고 부른다. 

Array는 데이터를 저장하는 곳인데, 리스트 같이 저장하는 것이다. 

예를 들어 요일을 정렬하고자 한다면 아래와 같이 작성할 것이다. 

작성하기 앞서 

변수명을 작성할 때는 Camel case 방식으로 작성해야 한다. 

예를 들어 변수명이 daysofweek 일 때 이렇게 작성해도 프로그램에서는

오류 없이 잘 작동하겠지만 제삼자가 이 코드를 보면 화가 날 것이고 그걸 보는

나 또한 화가 날 것이다. 왜냐하면 단어가 여러 개가 소문자로 들어가면 구별이 잘 가지 않는다.

그래서 Camel(낙타) case방식으로 작성하게 되면 소문자로 시작해 변수명 중간에 스페이스가 필요하다고

생각되는 곳에 대문자로 써주고 그다음 다른 단어를 쓰는 것이다. 

스페이스가 없더라도 변수명에 이상한 문자를 넣으면 안 된다 

예를 들어.(점)으로 시작하는 거 같이..

미래의 나에게 미움을 받기 싫으면 꼭 이렇게 작성해야 한다고 한다. 

자 다시 

daysOfWeek이란 Array를 만들고 싶을 때 예를 들어

const mon = "Mon";
const tue = "Tue";
const wed = "Wed";
const thu = "Thu";
const fri = "Fri";

console.log(mon,tue,wed,thu,fri)

이런 식으로 만들 수 있는데 이는 전혀 효과적이지 않다. 

우리는 이것을 하나로 묶을 수 있고 이것을 Array라고 부른다. 

Array는 여러 string들을 하나로 묶는 것이다. 

어떻게 Array를 만드느냐면 

const daysOfWeek = []

이렇게 작성해주고 [] 사이에 무얼 넣으면 그게 Array가 되는 것

물론 여기엔 우리가 전에 말한 데이터 타입만 쓸 수 있다. 

텍스트, true / false , numbers , floats 우리의 경우는 이 정도만 정리하자. 

const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri","Sat","Sun",true];

console.log(daysOfWeek)

Array안에는 규칙이 있다. 

예를 들면 Array 3번째 요일을 알고 싶다 하면 daysOfWeek [2]라고 console.log에 작성하면 수요일이 나오는 걸 확인할 수 있다.

const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri","Sat","Sun"];

console.log(daysOfWeek[2])

왜 3을 안 쓰고 2를 사용하는지 궁금할 수 있지만 컴퓨터는 사람이 아니라 0부터 시작한다. 

월요일은 0, 화요일은 1 , 수요일은 2 이렇게 말이다. 

이게 데이터를 Array에 넣는 첫 번째 방법이다. 

여기에 뭐든 넣고 싶은걸 넣으면 된다. 

다음 편에는 Object로 데이터를 정렬해보자.

#1. 10 Organizing Data with Objects (11:54)

이제 Object라고 불리는 것으로 데이터를 정렬해보자.

Object 하고 Array의 다른 점은

Object에는 각 value에 이름을 줄 수 있다는 것이다. 

만약 내가 리스트로 만들고 싶을 땐 Array를 정의하겠지만

개인정보를 Array로 저장한다면 

첫 번째에는 이름, 두 번째에는 나이.. 이런 식으로 저장하고 나중에 보면

헷갈릴 확률이 높다. 그리고 결정적으로 효율적이지 않다.

그래서 소위 말하는 Object를 만들어 볼 것인데 

Object를 생성하는 방법은 [] 대신 {}(컬 리브 라켓)을 사용하면 된다. 

const lswInfo= {}

Object는 Array같이 동작하지 않는다. 

Object는 실제 객체를 만드는 것이다. 

무슨 말이냐면

label을 내가 저장하고 싶은 data에 줄 수 있는 것이다. 

어떤 값들을 리스트로 나열하는 방법 대신 

const lswInfo={
name:"lsw"
age:"??"
gender:"male"
}

차이점을 살펴보자. 

name은 텍스트가 아니다 "name"이라고 적지 않았으니까 

그냥 name으로 적는 것이다. 왜냐면 이건 변수니까

그리고 "어떻게 gender에 접근할 수 있어?"라고 생각할 수 있는데 

그러면 어떻게 하냐면 

lswInfo.gender를 써서 확인해볼 수 있다.

const lswInfo={
    name:"lsw",
    age:"??",
    gender:"male"
}
console.log(lswInfo.gender)

또한 내가 원한다면 값을 변경할 수 있다. 

const lswInfo={
    name:"lsw",
    age:"??",
    gender:"male"
}

lswInfo.gender= "Female";
console.log(lswInfo.gender)

이게 자바스크립트의 재밌는 점 중의 하나이다. 

lswInfo안에 값은 바꿀 수 있다.

하지만 lswInfo 자체를 바꿀 수 없다. 

아까 말했듯 데이터를 정렬하는 데는 두 가지 방법이 있는데

하나는 Array이고 다른 하나는 Object이다. 

만약, DB에서 가져온 리스트 데이터라면 Array를 선택하고 

데이터를 합쳐서 만들어야 한다면 

만약에 많은 사람들을 Array로 만든다고 하면 많은 lswInfo라는 Array를 만들어야 할 것이다. 

ex) lswinfo yhlInfo... 등등

그 말은 이것들을 섞을 수 있다는 것이고

Object를 Array안에 넣을 수 있다는 말이다.

const lswInfo={
    name:"lsw",
    age:"??",
    gender:"male",
    favMovie: [ "New World", "Oldboy"],
    favFood: [ {name: "kimchi" ,fatty: false},
        {name: "CheeseBurger", fatty: true}
    ]
}


console.log(lswInfo)

위를 보면 알 수 있듯이 favFood Object안에 Array가 있고 Array안에 Object가 있다. 

이게 데이터를 정렬하는 방법이다.

여기에 기억해야 할 게 있는데

JavaScript 문법, 규칙을 기억해야 한다.

콤마(,)를 빼먹지 않도록 하자. 

그리고 String을 쓸 때 큰따옴표를 앞뒤로 넣는 것을 까먹지 말자. 

또한 콘솔 로그의 에러를 읽는 것을 잊지 말자. 

여기에 재밌는 것이 하나 있는데 

JavaScript는 오류가 났는데 말이야 

HTML은 괜찮을 것이다. 

만약에 JS가 말썽이어도 HTML/CSS는 상관이 없다. 

다음 강의에서는 논리적인 것들을 배워볼 것이라고 한다. 

Object안에 Array를 넣고 Array안에 Object를 넣을 수 있다는 걸 실습해보고 눈으로 확인해봐서 

내용이 확 와닿아서 좋았다. 

#1. 0 Why JS? (04:00)

자바스크립트는 무엇인가? 

JavaScript는 웹에 쓰이는 하나뿐인 프로그래밍 언어이다.

하나뿐인 이유에는 옵션이 하나뿐이기 때문이다.

웹에서 웹사이트를 만들고 싶을 때 , 그리고 그 웹사이트를 interactive로 만들고 싶을 때

하지만 Backend에서 일을 한다면 다른 언어에 대한 옵션은 많다. 

+ Backend로 쓸 수 있는 언어는 Python이나 Ruby도 쓸 수 있다.  + 하스켈 이나 ASP, JAVA 등 

하지만 Frontend 일을 한다고 하면 쓸 수 있는 언어는 하나뿐인 JavaScript이다. 

이는 Frontend 일을 하는 장점이기도 하며 단점이기도 하다. 

좋은 이유로는 Fragmentation(분열) 이 없기 때문이다. 

웹 프로그래밍을 하는 사람들은 모두 JavaScript를 알아서 

모두 같은 언어로 이야기할 수 있다. 

하지만 이따금씩 사람들이 JavaScript를 싫어한다.

JavaScript에 별로 좋지 않은 부분들이 가끔 나오는데 

JavaScript에 갇히게 된다고 한다. 바꿀 수도 없고, 업데이트할 수 없고, 원하는 것으로 교체 한도 없다. 

좋은 소식으로는 JavaScript가 웹에서 쓸 수 있는 하나뿐인 언어라서 그리고

웹은 계속 빠르게 발전하기 때문에 JavaScript 또한 빠르게 발전해 나가고 있다.

JavaScript를 이용하면 섹시 웹, 섹시 앱 웹 , 섹시한 모바일 애플리케이션을 만들 수 있다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

+ Native application, 비디오 게임 또한 더 나아가서 데스크톱 애플리케이션을 만들 수 있는데 

대표적으로 VScode, Atom 이 있다. 

#1. 1 Super Powers of JS (08:38)

자바스크립트를 활용할 수 있는 범위는 무궁무진하다. 

내 위치와 시간, 날씨를 가져올 수 있고 게임을 만들 수도 있다. 

웹을 만들든 게임을 만들든 interactive 하게 만들기 위해서는 JavScript의 도움이 필요하다.

JavaScript를 대체할 언어는 어디에도 없다.

#1. 2 ES5, ES6 ES.... WTF!?!?! (04:01)

자바스크립트의 버전들.

우리가 알아야 할 한 가지는 JavaScript에 ECMAScript라는 것이 있는데

이는 specification의 명칭 같은 거다.

ES5는 ECMAScript5와 동일하다. 

위를 보면 알듯이 ES6는 ECMAScript6와 동일하다

이건 그냥 Specification의 업데이트에 불과하다.

여기서 Specification이 무엇이냐면

JavaScript는 꽤나 중앙 집중화되어있다. 그래서 누군가 업데이트를 하면 

모든 브라우저에서 작동을 하게 된다.

JavaScript는 Specification인데 체계 매뉴얼 같은 거라고 한다.

예를 들어 이걸 읽고 이대로 하면 컴퓨터가 이렇게 작동합니다와 같은..

이런 걸 적으면 브라우저는 이렇게 나와야 합니다 같은..

만약 다른 내용을 적으면 브라우저는 에러를 띄우어야 합니다 같은걸 알려주는 거다.

이런 게 Specification이고 설명문 같은 것이다. 

많은 사람들의 동의를 얻은 Specification 이걸 ECMAScript Specification이라고 한다.

브라우저는 무슨 일을 하냐면

구글 크롬이랑, Firefox, 익스플로러도 마찬가지로 이 Specification을 받아서 자기들 방식으로 실행하는 것이다.

실행해서 같은 결과를 이루려고 노력하는데 그걸 각자의 방식으로 하는 것

ES5, ES6 같은 경우는 그냥 Specification의 버전을 나타내 주는 것이다.

예를 들어 구글 크롬은 ES6를 지원한다고 하면 그 말은 구글 크롬 개발자들이 새로운 Specification을 시행했다고 볼 수 있다. 새로운 안내문을 발행한 것과 같은 것.

바닐라 자바스크립트 :

바닐라 자바스크립트는 JavaScript의 한 종류로 Library를 없는 것을 얘기한다.

화장이 없는 JavaScript이고 도움이 없는 JavaScript이다 조리가 되지 않은 날 것의 JavaScript

이것에 대해 프로가 되면 Library 나 Framework가 추가된 위에서 말한 화장과 조리가 된 JavaScript를 다룰 수 있을 것이다.

정리하자면 JavaScript는 언어 , ECMAScript는 Specification이라고만 알아두면 좋을 것 같다. 

#1. 3 VanillaJS (07:09)

이번 강의에서는 JavaScript가 굉장히 못생겼다는 걸 실감할 수 있을 것이다. 

자바스크립트는 대게 framework랑 library를 이용하여 배워서 날것의 바닐라 자바스크립트는 많이 어려울 것이다.

그래서 자바스크립트를 잘하는 사람을 찾기가 어려운데 framework 랑 library를 잘 아는 사람은 찾기가 쉽다. 

그리고 이런 사람들은 framework나 library에서만 전문가이다. 실제 필드에서는 실력 발휘가 안된다고 한다. 

예시를 들어 포토샵을 보면 포토샵을 잘 다룰 수는 있지만 사진은 잘못 찍는 그런 개념으로 보면 된다고 한다. 

또 비슷한 예로 포토샵 소프트웨어는 기가 막히게 다루지만 색감을 모르고 어떤 사진이 좋은 사진인지 모르는 그런 느낌과 비슷하다고 한다. 기구는 사용할 수 있지만 핵심은 모르는 사람.

그래서 날것인 바닐라 자바스크립트부터 진행해서 숙달이 된 다음 넘어가면 큰 도움이 될 거다.

예를 들어 HTML 파일로 들어가고 싶으면 아이디를 하나 잡고 JavaScript에서 위의 사진에서 보이는 명령어를 사용해야 한다. Dojo, jQuery 등 (화장) 같은걸 사용하면 화장에 맞는 명령문으로 써야 한다.

VanilaJS 아래의 명령어들은 전부 VanilaJS의 명령어를 다르게 해석한 것뿐이다.

또 보다시피 일반 JavaScript가 다른 것들에 비해 엄청 빠르다는 걸 확인할 수 있다. 

결론적으로 바닐라 JS에 대해 잘 알고 숙지해두면 React와 같은 다른 언어로 넘어갈 때도 아무런 문제가 없을 것이다. 

바닐라 JS를 배운다는 건 웹에서의 기초가 되는 언어를 배우는 것과 같다. 

#1. 4 Hello World with Javascript (07:10)

index.html / index.css / index.js를 만들고 html 코드를 작성해 css와 연결 후 잘 연결이 되는지 확인한다.

<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="indes.css" />
  </head>
<body>
<h1>This works!</h1>
</body>

</html>

body {
  background-color: red;
}

잘되는 것을 확인하고 이제는 JS파일을 추가해보자 

이번 케이스 같은 경우 JS파일이 맨 위에 뜨지 않고 바디 태그 안의 맨 아래에 있어야 할 것이다. 

그리고 경고 메시지를 만들어보자. 

<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="indes.css" />
  </head>
<body>
<h1>This works!</h1>
<script src="index.js"></script>
</body>

</html>

alert('Im Working. Im Js. Im Beautiful. Im worth it');

JavaScript으로 제일 처음 한 작업이다. 이걸 HelloWorld라고 부른다.

경고 메시지를 다른 방식으로도 바꿔보자.

console.log('Im Working. Im Js. Im Beautiful. Im worth it');

경고 메시지로 뜨던 내용이 콘솔 창에 나오는 걸 확인할 수 있다. 

보다시피 HTML CSS에 JavaScript 파일을 추가하는 건 매우 쉽고 심플하다.

심플한 이유로는 전해 말했듯이  모든 브라우저에 JavaScript가 설치되어있다.

이러한 이유로 따로 JavaScript를 다운로드하거나 그러지 않아도 된다.

브라우저에 이미 JavaScirpt가 구성되어 있기 때문에 JavaScript가 강력한 이유

#1. 5 What are we learning (01:57)

가르쳐주는 대로 JavaScript를 배우게 되면

우리가 배우는 건 그냥 JavaScript가 아니고 콘셉트를? 배운다. 

그리고 이 콘셉트는 모든 언어에서 일맥상통한다. 

문제도 풀었다. 문제는 블로그 같은데 올리지 말라고 해서 안 올림

초반이라 그런지 설명과 학원에서 배운 부분이 겹쳐서 고개를 끄덕이면서 들었던 거 같다.