서누레코즈

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가 아니고 콘셉트를? 배운다. 

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

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

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

이 강의에서 가장 기본적인 도구들을 설치하고 커스터마이징 하고 예쁘게 만드는 법을 보여주는 강의였다고 한다.

python

node.js

nvm

git

github CLI 

피날레로 인생을 멋지게 해줄 패키지를 설치해볼거라고 한다.

이패키지는 모든 개발자들이 사랑하는 패키지이고 향상된 프로그래밍 경험을 제공해준다고 한다. 

그냥 장난친거라고한다. ㅋ 끝~

마지막으로

서로 다른 node.js버전을 관리할 수 있는지에 대해

지금 우리가 콘솔에 가지고 있는 노드 버전은 12.20이다.

때때로 다른 버전의 node를 쓰고 싶을 때가 있는데 

이럴때 가장 좋은 방법은 nvm을 사용하는 것이다.

nvm은 다수의 noe.js 버전을 관리하는 bash스크립트라고 한다. 

설치방법은 간단하다 curl 명령어로 아래의 사진 스크립트를 실행하면 된다.

터미널을 다시 껐다켜고 nvm을 쳐보면 찾을수 없다는 오류가 나올 것이다. 

찾을수 없는 이유로는 우리 콘솔이 nvm 명령어를 인지하지 못하고 있는것이다. 

이는 자연스러운 현상인데 왜냐면 우리가 사용하는 zsh는 nvm을 설치했는지를 모르고 있기 때문이다.

다시 설치소스코드가 있는 깃허브 홈페이지에 가면 해결하는 코드가 적혀있다.

이코드를 ~/.zshrc 파일에 추가해준다. 

코드 추가후 저장후 터미널을 다시 껐다가 켜 nvm을 작성해보자

정상적으로 잘 실행이되는걸 확인할 수 있다. 

언제든지, 어떤 명령어를 추가하고 싶을때는, 그냥 여기 zshrc에서 추가하면 된다. 

이 방식은 맥,리눅스에서도 같다. 

이 하나의 파일에서 기본적으로, 콘솔에서 쓰이는 모든 명령어를 정의할 수 있다. 

이제 우리가 해야할건 nvm을 써보는 것.

우리가 사용할 수 있는 많은 node.js 버전들이 출력되는걸 확인할수 있는데 이때 

입력하면 사용할수 있는 node.js 버전 목록들이 전부 출력이 된다. 

목록을보고 어떤 버전을 선택할지 결정을 하고 그에 맞는 버전설치 명령어를 사용하면 된다.

설치가 된후 버전확인하면 바뀐것을 확인할 수 있다.

이 전에는, 공식 문서를 보면서 node.js를 설치했었는데 

이번에는 node.js를 이용해서 nvm을 설치할 것이다.

만약 예전에 썼던 버전을 사용하려면 그 버전은 아까 맨처음 사진에서 버전확인한 버전인데

설치가 안되어있다고 나오는걸 봐서 nvm은 이전에 썼던 node.js 버전을 인식하지 못한다. 

이번 강의편에서는 node.js를 설치할 때 공식 웹사이트에 나와있는 지시대로 하는법을 보여주는 강의였고

니콜라스는 nvm을 쓰는게 관리하기 더 쉽다고 생각한다고 한다.

전부 콘솔에서 관리할 수 있기 때문이라고 한다..

nvm을 써서 필요한 버전을 다운받는다고 한다. 

그러기 위해서 nvm ls-remote --lt 를 입력한다 LTS 버전만 보이도록 

아까 위에서 버전확인을 할때 LTS라고 적혀있는 버전들을 확인할 수 있는데 이는 LONG-TERM-SERVICE로 장기지원을 하는 버전이라고 한다. 그리고 할 수만 있다면 LTS버전을 이용하는게 좋다고 한다. LTS 는 적어도 4년 동안은 지원해주기 때문이다. 

그렇게 나온 목록들중 가장 최신의 LTS를 설치한다. 

이번 강의에서는 깃 환경설정을 해보고 깃허브 CLI를 설치할 거라고 한다.

깃허브 CLI는 github.com에 가지 않고도 깃허브와 소통할 수 있도록 해준다.

그래서, 콘솔 상에서 repository도 만드는 등 작업을 할 수 있다. 

우리는 이미 git이 설치되어있다.

없다면 "sudo apt-get install git"으로 설치하면 된다.

github.cli 설치

github.com/cli/cli

cli.github.com/

이번 설치과정은 앞으로도 또 보게 될 전형적인 설치방법일 수도 있다. 

깃 환경설정

VSCode에서 반드시 깔아야 할 것은 "prettier"

새로만든 JavaScript 파일에 코드를 작성하고 저장을 할건데 저장을 할때

그때 Prettier의 기능으로 자동적으로 형식이 맞춰지게끔 하고 싶다.

그런데 지금은 작동을 안한다. 

extension에 와서 prettier를 검색해보자.

검색한 화면에서 보면 알겠지만 WSL: UBUNTU에 설치하기 버튼이 활성화 되어있는걸 확인할 수 있는데 

Prettier는 이미 윈도우에는 설치가 되어있고 이걸 우분투에 설치해야 하는 것이다.

왜냐하면 지금 우리는 WSL, 즉 우분투에서 코딩하고 있는 거거든

그러니까 WSL에 설치하기를 클릭하자

그리고 설치가 잘되었는지 확인하기위해 VSCode를 다시 시작해보자.

다시 시작하고 설정에서 Editor: Format On Save를 체크해서 활성화 하자.

우리는 이전에 윈도우에서 설정했던 거고 그걸 이제 WSL에서도 해줘야 한다고 한다. 

이렇게 하고 했는데도 prettier가 작동안되서 이강의를 듣는 사람들의 댓글을 보고 해답을 찾았는데

추가적으로 아래 사진처럼 설정을 해주면 prettier가 설정되는 것을 확인할 수 있다.

리눅스에서 Git이 잘 작동하는지 확인해보자

리눅스에서 사용할 수 없는 것이 몇 가지 있다. 

예를들어 MongoDB가 있다. MongoDB는 윈도우 상에 설치해야 한다.

다른 명령어를 추가적으로 배워보자.

"mkdir" :

make directory

이 폴더를 VSCode에서 열어보자.

터미널을 열어 new_project에 잘들어와있는 것을 확인할 수 있고 npm init으로 시작해보자

그리고 npm i express --save 를 실행해보자 무슨 명령어인지는 모르겠다 찾아봐야한다. 

두번째로 알아볼 명령어는 touch

touch는 봤던 것처럼 파일을 생성한다.

또다른거로는 mv가 있다. 

mv는 파일을 이동시키는 명령어이다.

위에서의 index.js파일을 변경하고 싶다면 mv명령어를 써서 바꿀수도 있다.

폴더에서도 똑같이 적용이 가능하다.

지우고 싶다면 rm 명령어를 쓰면된다.

폴더를 지울때는 -rf 를 덧붙여서 사용해야한다. (remove a folder)

위에 나온 명령어들은 유용하다 

우린 파일만들고, 이름 수정하고, 파일을 이동하거나 지우는 것에 대부분의 시간을 쓰기 때문이다. 

정리하자면

prettier를 WSL쪽에 설치

설치 후 WSL쪽에 Format on Save (저장 시 자동 정렬 기능)을 활성

node.js 프로젝트를 만들어 보았다.

package-lock.json.

#3. 2 Installing Python (06:38)

파이썬을 설치하기 위해서는

deadsnake를 이용하는 건데 

deadsnake는 일종의 팀명 혹은 프로젝트 이름이다. 

기본적으로 우분투를 위한 파이썬을 제공해준다. 

설치하는 방법이 꽤나 흥미롭다 

우리가 그 과정에서 많은 걸 배울 수 있다.

먼저 해야할 것은 apt-get에 새로운 PPA를 추가해야 한다. 

apt는 우리가 패키지를 다운로드할 수 있도록 해준다. 

그리고 apt는 패키지 데이터베이스에서 필요한 걸 찾는다. 

그리고 때때로 그 데이터베이스에는 우리가 원하는 패키지가 없을 때도 있다.

그래서 우리는 다른 누군가의 데이터베이스를 추가할 필요가 있다. 

그게 바로 이시점에서 해야 할 일이라고 한다. 

우리는 deadsnakes의 개인 패키지 저장소 (personal package archive, 즉 PPA)를 추가할 것이다. 

지금 하고 있는 것은, apt에게 deadsnakes의 데이터베이스를 통해서도 패키지를 얻기를 원한다고 알려주고 있는 것.

설치가 다되면 업데이트해준다 apt패키지 데이터 베이스를 업데이트해야 하기 때문

업데이트 작업을 통해서 apt는 다운로드 받을 수 있는 새로운 패키지가 있다고 깨닫게 되는 과정이다. 

업데이트가 완료되면 deadsnakes가 추가된 것을 확인할 수 있다.

이제 필요한걸 설치한다. 

deadsnakes 홈페이지에서 다운로드할 버전을 체크하고 쉘에서 

sudo apt-get install python3.9 을 입력해보자.

정리하자면

대부분의 경우에 새로운 ppa 또는 새로운 소스를 우리가 가지고 있는 apt 데이터베이스에 추가시켜야 할 것

코드를 복사붙여넣기로 설치를 끝낼 수 있지만 내부적으로 무슨 일이 일어나는지 이해가 필요하다고 함.

무슨 일이 일어나는 거냐면, apt가 하나 이상의 데이터베이스에서 패키지들을 찾아볼 수 있게 된 것이다. 

그리고 하나 바꾸기를 권장하는데 

python을 입력했을 때 바로 python3.9로 갈 수 있도록 바꾸기를 권장한다고 한다. 

예전 버전으로 작업할 필요가 없으니까.

조언하고 싶은 바로는, 콘솔을 직접 수정하는 것이다. 

콘솔을 수정하기 위해  code ~/.zshrc 를 해보자.  

결과적으로 

apt가 검색할 수 있는 범위를 확장하는 방법을 배웠다. 

즉 apt가 패키지들을 검색할 수 있는 새로운 저장소들을 추가할 수 있었다. 

또, 우리는 콘솔에서 alias를 사용하는 방법도 배웠다. 

.zshr

리눅스와 우분투에 대해 좋은 것들 중에 하나는 파이썬3이 설치되어서 온다는 점이다.

이강의에서는 다른 것을 설치하는 것에 대해 이야기 한다. 

그리고 우분투에서 무언갈 설치하는것은 되게 쉽다 

대부분 웹사이트에서 그냥 필요한 명령어들을 제공해주고 있기 때문이다. 

우분투에서는 콘솔을 통해서 모든 것을 설치한다.

apt-get 이라는 것을 사용한다. 

apt-get은 기본적으로 패키지들의 인스톨러이다. 

우리의 시스템에 뭔가를 설치할 때 쓴다

sudo는 root(admin) 권한을 의미한다. 

쓰는 이유는 쉘이 admin유저가 아닌 상태에서 실행되고 있기 때문이다. 

기본적으로 쉘을 실행하고 있는 것은

우분투를 설치했을 때 만들었던 유닉스 계정의 imlsw96이다.

리눅스 콘솔에는 항상 두 가지 유저가 있는데 

하나는 root 유저로, 뭐든지 할 수 있다. 

어떤 파일이든지 지울 수 있고 모든 것을 깨부술 수 있다. 

그리고 다른 하나는 지금 사용하고 있는 imlsw96이다. 

명령어에서 whoami를 입력하면 유저네임이 무엇인지 알려준다. 

지금 사용하는 계정은 imlsw96이고 root 관리자가 아닌것을 확인할 수 있다. 

imlsw96은 많은것을 할 수있지만 모든 일을 할 수 있는 건 아니다.

만약 어드민이 되어야 할 필요가 있는 경우, 

그 때를 위해 sudo라는 명령어가 있는거고 sudo를 사용하면 admin으로 만들어준다. 

패스워드를 물어볼 수있다.

예시로 openssl을 설치하자 

sudo apt-get install openssl

이는 시작할 때 사용했던 chocolately 쓸 때랑 비슷해보인다. 

openssl은 그냥 별의미없이 설치했다고 한다. 어떻게 작동하는지 보여주기 위해 

또 가끔은 sudo apt-get upgrade라는 명령어를 사용하게 될 것이다. 

이번에는 다른것을 설치할것을 보여준다

이번거는 apt-get을 바로 쓸 수 없을거라고 한다. 

예를들어 sudo apt-get install nodejs 

이럴때 가장 좋은 방법은, 구글에다가 '우분투에 nodejs 설치하는 법' 검색하는 것

코드를 복사해서 쉘에서 실행하면

apt-get update를 실행하고 있다.

apt-get update는 기본적으로 apt-get 이 찾아볼 수 잇는 프로그램들의 데이터베이스를 업데이트 하는 명령어다.

아까위에서의 apt-get은 node.js를 설치하지 못했다. 

근데 지금은 apt-get에게 알려주고 있다. . node.js라는 패키지가 존재한다고 

그러니까 지금 하는 작업이 apt-get이 검색할 수 있는 프로그램들의 목록을 업데이트 중인거라고 보면 된다.

위의 사진 박스부분을 보면 yarn 패키지를 설치하기 위해서는 

1. 퍼블릭 키를 가져와야하고 

2. sudo apt-get install yarn 

이제 nodejs를 설치해보자

설치가 가능했던 이유는 아까도 말했듯이 apt-=get이 어디에 node.js가 존재하는지 알아차리도록 만들어 준 것. 

그전에는 apt-get은 node.js에 대해 아는바가 없다. 

#3. 0 Folders

이번 섹션에서는 , 우리는 WSL과 리눅스 콘솔에 익숙해지는 걸 목표로 하고 있다. 

리눅스와 윈도가 같은 컴퓨터 안에 존재할 때 그들 사이에서 지켜야 할 수칙

먼저 몇가지 명령어 

LS :

디렉토리의 목록을 보여준다 

또, 현재 디렉터리에서 빠져나올 때는 cd, 

즉 change directory를 사용한다.

cd.. 는 상위 폴더로 가게 된다. 

 위의 사진의 폴더별 역할이 궁금하다면 구글링을 해보자. 

이들 모두 리눅스를 위한 서로 다른 목적을 갖고 있는 폴더라고 한다. 

( 추가예정)

그중 가장 중요한 역할을 하는 폴더는 'mnt' 폴더이다 mount를 의미한다.

mnt로 들어가서 ls 해보면

컴퓨터의 윈도 부분으로 갈 수 있는 문 같은 거다. 

root디렉터리는 리눅스 콘솔에서 접근하면 아까 위에서 봤듯이 접근이 가능하고 

원한다면 파일을 만든다든지 작업을 할 수 있다. 하지만 명심해야 할 부분은 여기는 리눅스의 세계이다. 

만약 mnt로 간다면 이건 일종의 출입구로 윈도 세계로 들어갈수 있게 된다. 

윈도우 파일을 건드릴 수 있다. 

리눅스에서는 원한다면 무슨 파일이든지 수정할 수 있다. 

그리고 파일을 만들 수도 있는데 이때 touch 명령어를 사용하면 된다. 

우리에게 선택권이 있는데

WSL로 작업할 때 어떤 이들은 윈도 세계에 접근하지 않는다. 

즉 파일을 윈도에 생성하지 않는 거지 

그들은 보통 리눅스의 HOME디렉터리로 가서 거기에 모든 프로젝트랑 코드를 두 거야.

그러니까 우리는 선택할 수 있다. 작업한 코드를 윈도에 둘 것인지 리눅스에 둘 것인지. 

강의에서 권장하고 싶은 건 파일들을 윈도 쪽에 저장해두는 것이다. 

이유로는 내일 당장 WSL에 문제가 생기더라도 파일들을 잃을 위험이 없다. 

리눅스 콘솔에서, 윈도에 있는 파일을 건드릴 수 있다!

하지만 윈도에서 리눅스 파일을 건드린다면 뭔가가 망가지기 시작한다고 한다. 

즉, 윈도에서는 리눅스 파일을 안 건드리는 게 좋을 것이라고 한다.

+ CD 명령어 중 TAB키를 누르면 폴더를 이동할 선택 옵션들이 뜨는 것을 확인할 수 있다.

   또한, cd 누르고 원하는 디렉터리 이름의 초반 부분을 적고 tab을 눌러도 자동완성이 되는 걸 확인할 수 있다. 

nomadcoders.co/windows-setup-for-developers/lectures/1833

#2 TERMINAL CUSTOMIZATION

#2. 0 Installation

터미널 커스터마이징 

1. 터미널에서 설정을 눌러 VSCODE를  실행하면 JSON 파일이 나오는데 여기서 커스터마이징 할 수 있다. 

2. JSON 파일 안에서 UBUNTU의 이름을 WSL로 바꾸면 실행 시 WSL로 바뀌어 실행되는 것을 확인할 수 있다. 

3. 기본 실행이 윈도우 파워셀인데 이를 우분투로 바꾸기 위해 UUBUTU의 guid를 복사해 위의 default id 란에 바꿔준다.  그러면 터미널을 실행할 때 우분투가 먼저 실행되는 것을 확인할 수 있다. 

그리고 새로운 터미널 설치를 할 것이다

oh my zsh  터미널을 훨씬 멋지게 만들어 줄 것이라고 한다.

터미널에 zsh를 설치하고 붙여넣기 해주자.

zsh를 설치하기위해서는 맥과 윈도의 설치방법은 다른데 우리가 다운로드할 ubuntu 또한 다르다. 

윈도 콘솔에다 설치하는 거는 콘솔에서만 사용할 수 있다.

명령어 입력 시 오류가 나오는데 이는 관리자 계정으로 들어가지 않아서 그런 것이다. 

리눅스에는 크게 두 가지 유저 타입이 있는데

하나는 일반 유저이고 다른 하나는 super adimin이다

root라고 부르는데 

root 유저는 , 파일 시스템을 바꾸거나 

기타 등등 좀 안전하지 않은 작업을 하는 권한을 가지고 있다. 

기본값으로 , 우리는 root를 쓰지 않고 

아까 만들었던 일반 유저를 쓰고 있는데 

root를 쓰고 싶다면  바로 이럴 때 , root 권한을 써야 할 때 

왜냐하면 여기 볼 수 있듯이 permission denied라고 나온다. 

아무튼 root를 쓰려면 sudo를 써줘야 하고 그다음에 커맨드를 쓴다.

설치가 완료되면 아까 보았던 코드를 입력해주자

설치가 된 것을 확인할 수 있다. 

나는 설치 후 다시 실행해도 기존의 테마?라고 해야 할까 바뀌지 않고 설치 전과 동일해서 찾아봤는데 기본으로 설정해주는 코드를 작성하면 다시 껐다 켜도 테마가 저장되는 것을 확인할 수 있다. 

code 명령어가 잘되는 것을 확인할 수 있다. 

#2. 1 Powerlevel10 K (12:26)

settings.json 에서 scheme 부분의 링크를 클릭

docs.microsoft.com/ko-kr/windows/terminal/customize-settings/color-schemes

기본적으로, 윈도 터미널에서 색깔을 바꾸는 것에 대해 알려주는 페이지.

위 링크에 접속하면 색깔과 각종 테마? 들이 있는 것을 확인할 수 있는데 원하는 테마를 설치해보겠다.

이 테마로 설치하기 위해서는 위의 테마 이름을 복사해서 setting.json의 코드를 수정해주어야 한다. 

적용해주면 터미널이 바뀐 것을 확인할 수 있다.

아직 이상태는 구려서 terminal splash를 사용할 거라고 한다.

이 웹페이지에서는 윈도 터미널을 위한 멋진 테마들을 찾아볼 수 있다.

terminalsplash.com/

원하는 테마의 코드 버튼을 클릭하여 코드를 복사 후 위에 올렸던 사진 중 setting.json의 schemes 부분에 붙여 넣기 해보자

그리고 name 부분의 Monokai Night를 위의 colorScheme 부분에 붙여 넣어주자.

만약에 모든 창에 대해 color scheme을 고정시킬 원한다면 

defaults 부분에 colorScheme부분을 붙여넣기하면 된다. 

이후 터미널 창을 살펴보면 아직 완벽한 상태가 아니라고 한다. 

터미널의 색깔 그리고 모든 다른 도구들의 환경설정 옵션이 제한되어 있기 때문인 거 같다고 한다. 

그래서 우리가 할 것은 'Powerlevel10 k'라는 것을 설치 이는 설치한 터미널인 zsh를 위한 테마라고 한다.

'Powerlevel10k' 라는 것을 설치 이는 설치한 터미널인 zsh를 위한 테마

sudo를 작성하고 복사해야 함 실행이 끝나면 설정하기 위해서

. zshrc 이 파일을 수정해주어야 한다. 

code ~ (루트를 의미하는 캐릭터) /. zshrc를 입력해서 VS code에서 열어보자.

이렇게 열리는 걸 확인할 수 있는데 여기에 있는 환경설정 옵션들은 터미널을 위한 것이다. 

windows terminal을 위한 것이 아니라 oh my zsh를 위한 것이라고 한다. 

혹시 저장이 안 될 경우 터미널 창에서 vi ~/. zshrc로 수정후 :wq!로 강제 종료하니까 먹히긴 한다. 내가 그렇게 했다 vscode내에서 저장하려고 하니까 계속 권한이 거부당했다고 오류가 나와서  

아무튼 위와 같은 사진에서 

이 부분이 다이아몬드처럼 보여야 하는데 다이아몬드 같지 않다. 

이 부분이 다이아몬드처럼 보이려면 폰트를 다운로드하고 setting.json에 수정을 해줘야 한다. 

필요한 폰트는 노매드 코더 강의 홈페이지에 가면 다운로드를 할 수 있다. 

추가적으로 VS Code의 터미널 폰트도 설정해준다. 

설정을 마치면

여기서 함정카드 발동했는데 동영상 강의랑 문구가 달라졌는데 1번을 눌러야 할 것 같다. 

강의에서는 Instant Propmt Mode를 시도해본 적이 없거나, 경고를 본 적이 없거나 이 모든 것이 무엇을 의미하는지 모를 경우 3번을 선택하시오 Verbose 이렇게 적혀있는 걸 확인할 수 있다 고로 1번 선택

멋진 쉘의 모습이 적용된 걸 확인할 수 있다. 

VS code에도 적용이 되었나 확인해보자

확인하면 여전히 powershell로 적용된걸 확인할 수 있는데 

이후 하나 더 바꾸어줘야 하는데 바로 ls colors이다. 

ls colors는 아래 글씨 색 이런 거 

색을 바꾸기 위해서는 터미널의 설정 파일을 수정해야 한다 

. zshrc 파일을 열어보자.

맨 아랫줄에 

LS_COLORS="ow=01;36;40" && export LS_COLORS 

를 추가해주자.

만약에 터미널의 테마를 변경하고 싶다면 terminalsplassh.com으로 가면 된다. 

+ 추가적으로 다시 powerlevel10 k 환경 설정을 하고 싶다면

p10k config를 터미널에 입력하면 된다. 

이제 우리는 이걸 어떻게 사용해야 하는지를 배워야 한다. 우분투, 리눅스에 대해 배워야 하는 게 있고, 프로그램은 어떻게 설치하는지콘솔은 어떻게 작동하는지, 리눅스로부터 윈도 파일에 접근할 수 있는지반대로 윈도에서 리눅스 파일에 접근할 수 있는지 다음 파트에서 배운다고 한다. 

nomadcoders.co/windows-setup-for-developers/lectures/1826

윈도우 업데이트 2004 인지 확인하기

프로그래머라면 가지고 있어야할 소프트웨어

1. 크롬

2. vsc

Custormizing VSCODE

Windows Subsystem for Linux 설치하기

1. chocolatey 설치

윈도우에서 설치할땐 이걸 설치해야함

chocolatey.org에 가서 다운로드 링크 복사해서

powershell을 관리자 권한으로 실행해서 다운로드 링크를 복사해서 설치하기 .

설치가 되었으면 pwershell을 껐다 키고 choco 를 입력해서 설치가 되었는지 확인하기. 

이후 패키지를 다운받기 위해 chocolatey 홈페이지가서 패키지 찾아 위와 했던 방법으로 소스 복사해서 파워셀에 붙여넣기로 실행하기

파워쉘을 대체하기 위해 windows terminal 을 설치 

그리고 wsl (Windows Subsystem for Linux)

docs.microsoft.com/ko-kr/windows/wsl/install-win10

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart 

복사해서 설치

설치가 끝나면 microsoft store에서 ubuntu 18.04 LTS 를 설치하자.

설치후 재부팅후 ubuntu를 실행하면 UNIX 계정을 만들라고 나온다.

안내에 따라 계정을만든다. 

계정을 만들도 wsl2를 기본설정해줘야함

wsl --set-default-version 2

관리자 실행 터널열어서 실행하고 오류가나면 커널업데이트 해야함

docs.microsoft.com/ko-kr/windows/wsl/install-win10#step-4---download-the-linux-kernel-update-package

여기서 커널업데이트 프로그램 설치

다시 wsl --set-default-version2 넣어서 확인

그리고 wsl 에다가 ubuntu에 wsl2를 사용할거라고 알려줘야한다.

이부분으 미쳐 캡쳐를 못했는데 마이크로소프트 홈페이지에 가보면 잘나와있으니 별어려움 없이 따라할수 있다.

2020-12-27

#4. 3 Adding Genres 

이제 이어서 장르를 웹에 출력해내기 위해 코드를 작성한다.

import React from "react";
import PropTypes from "prop-types";
import "./movie.css"

function Movie({ year, title, summary, poster, genres}){
    return (
    <div className="movies__movie">
                    <img src={poster} alt={title} title={title}/>
        <div className="movie__data">
            <h3 className="movie__title">{title}</h3>
        <h5 className="moive__year">{year}</h5>
        //요기    <ul className="genres">{genres.map((genre,index) => <li className="genres__genre">{genre}{index}</li>)}</ul>
        <p className="movie__summary">{summary}</p>

    </div>
    </div>
    );
}
Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired //요기

};

export default Movie;

이렇게 작성하면 콘솔 오류가 발생할 것인데 전에 이야기했듯이 map에는 각각의 item들은 key가 필요하다.

그런데 장르에는 제공할 key가 없다 왜냐하면 장르에는 id라던지 그런 번호가 매겨져있지 않기 때문에 그래도 괜찮다.

map function은  argument를 전달해주는데 첫 번째는 item 우리가 아는 장르의 종류들이 나오고 두 번째는 

item number이다. 그래서 index, or current item number 사용자맘대로 번호를 정할 수 있다.

genres.map(genre,??) => 이 부분에?? 를 사용자 정의해서 아무렇게나 붙여도 된다. 붙이고 {??}를 출력문에 추가하면 장르에 번호가 나오는 걸 확인 가능하다. 확인 후에는 <li> 안에 key값을 넣어주자

#4. 4 Styles Timeleapse

이 챕터는 스타일 같은걸 적용하는 걸 보고 따라 하는 거 같다 다른 부가설명은 없었다.

css를 아직 안 배워서 그냥 묻지 마 코딩식으로 따라 하기만 했다. 

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background-color: #eff3f7;
    height: 100%;
}

html,
body,
#root,
.container {
    height: 100%;
    display: flex;
    justify-content: center;
}

.loader {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.movies {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 50px;
    padding-top: 70px;
    width: 80%;
}

.movies .movie {
    width: 45%;
    background-color: white;
    margin-bottom: 70px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-weight: 300;
    padding: 20px;
    border-radius: 5px;
    color: #adaeb9;
    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
    0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
}

.movie img {
    position: relative;
    top: -50px;
    max-width: 120px;
    margin-right: 30px;
    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
    0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
}

.movie .movie__title,
.movie .movie__year {
    margin: 0;
    font-weight: 300;
}

.movie .movie__title {
    margin-bottom: 5px;
    font-size: 24px;
    color: #2c2c2c;
}

.movie .movie__genres {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    margin: 5px 0px;
}

.movie__genres li,
.movie .movie__year {
    margin-right: 10px;
    font-size: 14px;
}

#4. 5 Cutting the summary

전에 봤었던 예제 페이지를 보면 text의 길이가 일정한 것을 볼 수 있다. 일정해야지 텍스트 박스의 크기가 영화마다 동일할 텐데 지금은 그렇지 못하다.  그럴 때는 javascript로 text를 잘라서 출력하도록 한다. 

summary.slice(0,150)을 지정하면 줄거리 전체 택스트 중 150자까지만 출력이 될 것이다. 그러면 자동으로 모든 영화의 줄거리는 150자까지만 출력되니깐 각 영화 박스들은 동일한 크기를 가지게 된다.

movie.js의 summary 출력 부분에 summary.slice(0,150)을 넣어 확인해보자

import React from "react";
import PropTypes from "prop-types";
import "./movie.css"

function Movie({ year, title, summary, poster, genres}){
    return (
    <div className="movie">
                    <img src={poster} alt={title} title={title}/>
        <div className="movie__data">
            <h3 className="movie__title">{title}</h3>
        <h5 className="moive__year">{year}</h5>
            <ul className="movie__genres">{genres.map((genre,index) => <li key={index} className="genres__genre">{genre}</li>)}</ul>
        <p className="movie__summary">{summary.slice(0,180)}...</p> //요기

    </div>
    </div>
    );
}
Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired

};

export default Movie;

2020-12-27

수업 영상을 보고 영상이 진행되는 순서에 맞춰 바로바로 작성하다 보니 장황하고 말 이상하게 쓸 수도 그리고 뇌피셜로 적는 내용이 있을 수 있고 빠짐없이 적고자 하지만 놓친 부분이 있으니 수업내용이 궁금하면 직접 보는 걸 추천드립니다.

결정적으로 웹 HTML만 조금 배운상태에서 진행한거여서 완벽하지 않습니다

아마 이글을 보는 사람이 없을 거 같기는 한데 노파심에

#4 MAKING THE MOVIE APP

#4.0 Fetching Movies from API

일반적으로 javascript에서 데이터를 fetch하는 방법으로는 fetch를 사용하는 것인데 이 방법을 사용하는 것을 좋아하지 않아서 Axios를 사용한다고한다 이것은 좋아한다고 한다. 

axios의 작동방식은  마치 fetch 위에 있는 작은 레이아웃 같다고 한다. 

이를 사용하려면 axios를 설치해야하고 터미널에 npm install axios 를 해야한다.

그리고 우리가 사용할 API는 

YTS에서 만든 API를 사용한다고 한다.

그런데 이사이트가 불법적으로 영화토렌트 올리는 사이트이고 api의 주소가 매번바뀌어서 자신이 만든 api를 사용하라고 해서 

github.com/serranoarevalo/yts-proxy

이사이트의 api를 가져왔다. 

axios가 다설치가 되었으면 axios를 import해야한다

import를 하고나면 아까 알려준 api주소를 DidMount에 넣어보겠다.

import React from "react";
import axios from"axios";

class App extends React.Component {
    state={
        isLoading: true
    };
    componentDidMount(){
        axios.get("https://yts-proxy.now.sh/list_movies.json")
    }
    render(){
        const { isLoading } = this.state;
        return<div>{isLoading ? "Loading..." : "We are ready"}</div> // 자바스크립트의 삼항연산자라고 한다 true일시 Loadingd이 false일때 We are ready가 출력되게 만든다.
    }
}
export default App;

넣고나서 웹의 Network 창에 보면 무언가 요청하는것이 많은것을 확인할 수 있다.

그리고 아무것도 안나오는것은 우리가 아무것도 안하기 때문이다 

우리가 해야할일은 이제 api에서 오는 data를 잡아와야한다 그래야 state안에 사용할 수 있다.

axios.get은 느리다. 그래서 자바스크립트에게 componentDidMount 함수가 끝날 때 까지 약간 시간이 걸릴 수 있다고 말해야하고 우리는 기다려야한다. 그렇게 하기위해 우리는 componentDidMount앞에 async를 넣어줄 것이다.

그리고 우리는 getMovies function을 만든다. 또한 얼마나 기다려야하는지 알려주어야 하기 때문에 

axios.get() 옆에 await이라고 적어주자 . 안적어주면 자바스크립트는 기다려주지 않는다. 그리고 이걸 하기위해서 더많은 코드가 필요한 다른일을 해야한다고 한다 그래서 이경우 우리는 async await을 사용해야 한다고 한다. 

#4.1 Fetching Movies from API

음 axios를 이용해서 console창에 무엇이 나오는지 확인하고 state안에 넣을 것을 추려낸다. 

import React from "react";
import axios from"axios";

class App extends React.Component {
    state={
        isLoading: true
    };
    getMovies = async ()=>{
        /*
        이방법은 효율적이지 않다고한다
        const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json")
        console.log(movies.data.data.movies); //데이터를 가져오고나서 무엇을 가져왔나 확인하기 위해 작성
         */
        // 단축버전
        const {data:{data:{movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json")
        console.log(movies)
    }

     componentDidMount(){
       this.getMovies();

    }
    render(){
        const { isLoading } = this.state;
        return<div>{isLoading ? "Loading..." : "We are ready"}</div> // 자바스크립트의 삼항연산자라고 한다 true일시 Loadingd이 false일때 We are ready가 출력되게 만든다.
    }
}
export default App;

이런식으로 작성하게되면

state에 넣어야할 내용들을 추려진것을 확인할 수 있다.

state에 movies 배열을 생성하고 스테이트값을 설정해주는데
여기서 전의 자바스크립트라면 this.setState(movies:movies) 이렇게 작성해서
state의 movies는 axios의 movies라고 만들어줘야하는데
최신es6의 자바스크립트는 그냥 통일해서 movies라 작성해도 된다고 한다.
그리고 웹을 보면 바뀌는 반응이 없을텐데 그래서 우리는 isLoading의 값을 바꿔주어야한다.
isLoading을 false로 하고 아래에 render로 가보면 we are ready가 써있는것을 확인할 수 있는데
이는 멋지지 않다 그래서 우리는 movies.js라는 새로운 파일을 만들어보자

import React from "react";
import axios from"axios";

class App extends React.Component {
    state={
        isLoading: true,
        movies: []
    };
    getMovies = async ()=>{
        /*
        이방법은 효율적이지 않다고한다
        const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json")
        console.log(movies.data.data.movies); //데이터를 가져오고나서 무엇을 가져왔나 확인하기 위해 작성
         */
        // 단축버전
        const {data:{data:{movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json");
        console.log(movies);
        this.setState({movies, isLoading: false})
        // state에 movies 배열을 생성하고 스테이트값을 설정해주는데
        // 여기서 전의 자바스크립트라면 this.setState(movies:movies) 이렇게 작성해서
        // satte의 movies는  axios의 movies라고 만들어줘야하는데
        // 최신es6의 자바스크립트는 그냥 통일해서 movies라 작성해도 된다고 한다.
        // 그리고 웹을 보면 바뀌는 반응이 없을텐데 그래서 우리는 isLoading의 값을 바꿔주어야한다.
        // isLoading을 false로 하고  아래에 render로 가보면 we are ready가 써있는것을 확인할 수 있는데
        // 이는 멋지지 않다 그래서 우리는 movies.js라는 새로운 파일을 만들어보자
    };

     componentDidMount(){
       this.getMovies();

    }
    render(){
        const { isLoading } = this.state;
        return<div>{isLoading ? "Loading..." : "We are ready"}</div> // 자바스크립트의 삼항연산자라고 한다 true일시 Loadingd이 false일때 We are ready가 출력되게 만든다.
    }
}
export default App;

movies.js 파일을 만들고 할일은 movies를 render할 것이다.

작성하기 이전에 가져올 데이터를 찾아보자 아까 적어준 API 주소에 들어가보자

들어가면 이렇게 가져올 항목들이 주루룩 뜨는데 여기서 맘에 드는것을 가져와 Movie.js에 작성해준다.

import React from "React";
import PropTypes from "prop-types";

function Movie({id, year, title, summary, poster}){
    return<h4>{title}</h4>
}
Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired,

}

export default Movie;

이후 우리는 render를 해야한다.

import React from "react";
import axios from"axios";
import Movie from "./Movie";

class App extends React.Component {
    state={
        isLoading: true,
        movies: []
    };
    getMovies = async ()=>{
        /*
        이방법은 효율적이지 않다고한다
        const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json")
        console.log(movies.data.data.movies); //데이터를 가져오고나서 무엇을 가져왔나 확인하기 위해 작성
        const { data: { data:{movies} } = await
         */
        // 단축버전
        const {
            data:{
                data:{movies}
            }
        } = await axios.get(
            "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
        );
        this.setState({movies, isLoading: false});
    };

     componentDidMount(){
       this.getMovies();
     }
    render(){
        const { isLoading, movies } = this.state;
        return<div>{isLoading ? "Loading..." : movies.map(movie =>{
            console.log(movie);
            return <Movie id={movie.id} year={movie.year} title={movie.title} summary={movie.summary} poster={movie.medium_cover_image}/>
        })}</div> // 자바스크립트의 삼항연산자라고 한다 true일시 Loadingd이 false일때 We are ready가 출력되게 만든다.
    }
}
export default App;

잘나오는 것을 확인할 수 있다.

이후 return과 console을 지우고 나서 콘솔창을 확인하면 child는 key값이 필요하다고 나올 것이다.

import React from "react";
import axios from"axios";
import Movie from "./Movie";

class App extends React.Component {
    state={
        isLoading: true,
        movies: []
    };
    getMovies = async ()=>{
    
        const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json")
        console.log(movies.data.data.movies); 
        const { data: { data:{movies} } = await
     
        const {
            data:{
                data:{movies}
            }
        } = await axios.get(
            "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
        );
        this.setState({movies, isLoading: false});
    };

     componentDidMount(){
       this.getMovies();
     }
    render(){
        const { isLoading, movies } = this.state;
        return<div>{isLoading ? "Loading..." : movies.map(movie =>( //이부분!
            <Movie id={movie.id} year={movie.year} title={movie.title} summary={movie.summary} poster={movie.medium_cover_image}/>
        ))}</div>
    }
}
export default App;

key 값을 기존에 갖고있던 movie id를 키값으로 주고 다시 확인해보자.

import React from "react";
import axios from"axios";
import Movie from "./Movie";

class App extends React.Component {
    state={
        isLoading: true,
        movies: []
    };
    getMovies = async ()=>{
        /*
        이방법은 효율적이지 않다고한다
        const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json")
        console.log(movies.data.data.movies); //데이터를 가져오고나서 무엇을 가져왔나 확인하기 위해 작성
        const { data: { data:{movies} } = await
         */
        // 단축버전
        const {
            data:{
                data:{movies}
            }
        } = await axios.get(
            "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
        );
        this.setState({movies, isLoading: false});
    };

     componentDidMount(){
       this.getMovies();
     }
    render(){
        const { isLoading, movies } = this.state;
        return<div>{isLoading ? "Loading..." : movies.map(movie =>(
            <Movie key={movie.id} id={movie.id} year={movie.year} title={movie.title} summary={movie.summary} poster={movie.medium_cover_image}/>
        ))}</div> // 자바스크립트의 삼항연산자라고 한다 true일시 Loadingd이 false일때 We are ready가 출력되게 만든다.
    }
}
export default App;

#4.2 Styling the Movies

기존코드를 변경해서 웹에 줄거리와 개봉연도도 나오게 설정한다.

import React from "react";
import axios from"axios";
import Movie from "./Movie";

class App extends React.Component {
    state={
        isLoading: true,
        movies: []
    };
    getMovies = async ()=>{
        const {
            data:{
                data:{movies}
            }
        } = await axios.get(
            "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
        );
        this.setState({movies, isLoading: false});
    };

     componentDidMount(){
       this.getMovies();
     }
    render(){
        const { isLoading, movies } = this.state;
        return<section class="container">
            {isLoading ? (<div class="loader">
                <span class="loader__text">Loading...</span>
                </div>
                ): (
                    <div class="Movies">
                        {movies.map(movie =>(
                            <Movie
                            key={movie.id}
                            id={movie.id}
                            year={movie.year}
                            title={movie.title}
                            summary={movie.summary}
                            poster={movie.medium_cover_image}
                            />
                        ))}
                    </div>
            )}
        </section>
    }
}
export default App;

import React from "react";
import PropTypes from "prop-types";

function Movie({id, year, title, summary, poster}){
    return <div class="movies__movie">
            <h3 class="movie__title">{title}</h3>
        <h5 class="moive__year">{year}</h5>
        <p class="movie__summary">{summary}</p>
    </div>;
}
Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired

};

export default Movie;

여기부분은 이해를 못하고 따라갔었는데 다만들고나면 코드리뷰를 따로 해야할거 같다.

이제 추가적을 이미지를 넣을것이고 movie.js 파일을 수정해준다.

import React from "react";
import PropTypes from "prop-types";

function Movie({ year, title, summary, poster}){
    return (
    <div class="movies__movie">
                    <img src={poster} alt={title} title={title}/>
        <div class="movie__data">
            <h3 class="movie__title">{title}</h3>
        <h5 class="moive__year">{year}</h5>
        <p class="movie__summary">{summary}</p>
    </div>
    </div>
    );
}
Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired

};

export default Movie;

영화 하면이 잘나오는걸 확인할 수 있다. 이제 웹페이지를 예쁘게 만드는 일만 남았다.

예쁘게 만드는 일은 css로 해결할 수 있는데 App.css, Movie.css 파일을 만들어 각각의 js 파일에 import 한다.

#4.3 Adding Genres

음 일단 영상을보고 생각했을때는 직접css 문법을 사용해서 웹페이지를 꾸미지 않고 기존에 만들어져있는 틀을 가져와서 가지고 있는 데이터들을 적용시킬거 같다라는 생각이 들었다. 

이사진을 기반으로 본뜬다고 하는거 같고 여기에서 나와있는 장르 데이터를 추가로 가져오기 위해 Movie.js 에 장르를 추가로 props 하는 문장을 작성한다.

import React from "react";
import PropTypes from "prop-types";
import "./movie.css"

function Movie({ year, title, summary, poster, genres}){
    return (
    <div class="movies__movie">
                    <img src={poster} alt={title} title={title}/>
        <div class="movie__data">
            <h3 class="movie__title">{title}</h3>
        <h5 class="moive__year">{year}</h5>
        <p class="movie__summary">{summary}</p>
    </div>
    </div>
    );
}
Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired //여기!

};

export default Movie;

이렇게 작성하면 두가지의 콘솔오류를 확인할 수 있다.

두번째는 우리가 App.js에서 genres를 정의를 안해주어서 그렇고 첫번째는 react에서 class에 대한 의미에대해 혼선이 있는데 엄연히 jsx파일이라 render안에 있는 css사용을 위해 class로 정의한부분을 className으로 바꿔줘야한다. 

자바스크립트에서의 class는 아래 사진이에 나와있는 component의 class를 의미하기 때문에

component class 안에서의 class는 혼동을 가져오기때문에 항상 바꿔줘야한다는 것을 유념해야한다.

HTML의 class는 class이다. 추가로 HTML 에서 label을 정해줄때 label for 라는 문구로 사용하는데 

자바스크립트에서의 for는 loop(반복)이다. 그래서 jsx안에서는 htmlFor로 만들어주어야 한다.

그리고 jsx내부에서는 className으로 설정했어도 웹에서 검사로 elements 부분을 확인해보면 div class로 잘 나와있는것을 확인할 수 있다

2020-12-27 일요일

수업 영상을 보고 영상이 진행되는 순서에 맞춰 바로바로 작성하다 보니 장황하고 말 이상하게 쓸 수도 그리고 뇌피셜로 적는 내용이 있을 수 있고 빠짐없이 적고자 하지만 놓친 부분이 있으니 수업내용이 궁금하면 직접 보는 걸 추천드립니다.

결정적으로 웹 HTML만 조금 배운상태에서 진행한거여서 완벽하지 않습니다

아마 이글을 보는 사람이 없을 거 같기는 한데 노파심에

#3. STATE

#3. 0 Class Components and State

1. 기존 존재하는 component들을 지우고 app component를 function component에서 class component로 변경한다.

2. 이후 app component도 지우고 결과적으로 class app component를 만드는데 React.Component를 상속받는다.

ex)

핸드폰 게임을 개발한다면 samsung을 iphone을 프로그래밍하지 않고 cell phone을 프로그래밍한다.

cell phoene 은 여러 가지 특성이 있다. 예를 들면 screen, charger 등등 

iphone과 samsung은 이러한 것을 공유한다.

그래서 camera, screnn, charger를 cell phone class에 넣은 다음에서 확장한 samsung class를 가지게 된다.

위에서의 React.Component를 상속받고 만든 class app component는 기본적으로 react class component에서 가져오고 있다. 그리거 거기서 확장하고 있다. 결과적으로 App component는 react component이다. 

3. function component와 class component의 차이 

- function component는 return을 통해 반환한다. 하지만 class component는 반환을 하지 않는다. function이 아니기에

- 그리고 class react component에는 render method를 가지고 있다. 

현재 react component를 상속한 class App component도 동일하게 react component를 가지고 있다.

render 메서드 안에서 리턴 html 문을 작성하면 출력이 되는 것을 확인할 수 있다.

import React from "react";
import PropTypes from"prop-types";



class App extends React.Component {
    render() {
        return <h1>im a class component</h1>;
    }
}

export default App;

결과적으로 

Function component는 function이고 뭔가를 return 한다 그리고 screen에 표시가 되고 

class component는 class이다 하지만 react component로부터 확장되거 screen에 표시가 된다. 

그리고 화면에 표시하기 위해선 render 메서드 안에 넣어야 하고 react는 자동적으로 모든 class component의 render method를 실행하고자 한다. 

react는 자동적으로 나의 class component의 render method를 실행한다 자동으로

그 자바 보면 컴파일하려면 main 메서드부터 읽어오는 그러는 느낌인가 

4. state는 object이고 component의 data를 넣을 공간이 있고 이 data는 변한다.

그리고 state를 render 안에 넣으려면 class 이기에 this.로 표현해주어야 한다. 

import React from "react";
import PropTypes from"prop-types";



class App extends React.Component {
    state = {
        count: 0
    };
    render() {
        return <h1>im a class component {this.state.count}</h1>;
    }
}

export default App;

결과적으로 우리는 state에 바꾸고 싶은 data를 넣는 것

일단 소스코드부터 보고 작성하겠다.

import React from "react";
import PropTypes from"prop-types";



class App extends React.Component {
    state = {
        count: 0
    };
    add = () => {
        console.log("add");
    };
    minus = ()=>{
        console.log("minus");
    };

    render() {
       return(
           <div>
               <h1>this number is:{this.state.count}</h1>
               <button onClick={this.add}>Add</button>
               <button onClick={this.minus}>Minus</button>
           </div>
       )
    }
}

export default App;

일단 보면 add =() =>{} 안에 적혀 이 쓴 게 두 개가 보인다. 이는 javascript 언어라고 한다. 

뭘 의미하는지는 정확히 모르겠지만 console.log("add"); 를 나타내게 해주는 역할을 하는 것 같다. 

그리고 아래 render 쪽을 보면 두 개의 버튼이 만들어진 것을 확인할 수 있는데 이는 react에서만 작용한다고 한다. 아무튼 

이렇게 버튼 두 개에 onClick을 적어 버튼을 눌렀을 때  this.로 위에 만들어진 add와 minus를 실행하게 하는 것 같은데 

여기서 주의할게 thsi.add()로 작성하게 된다면 버튼을 누르기도 전에 생성이 된다고 한다. 클릭될 때 동작하게 하려면 ()를 빼주어야 한다고 한다. 

아무튼 이렇게 작성 후  버튼을 여러 번 누르고 콘 살창을 확인해보면 숫자가 올라가 있는 것을 확인할 수 있다.

#3. 1 All you need to know about State

State값을 변경하면 웹에 바뀌지 않는 것을 확인할 수 있다. 이는 왜 그러냐면 state값을 변경하면 다시 render를 실행시켜주어야 하는데 실행이 안되어서 업데이트가 되지 않는다. 그래서 우리는 setState를 사용해야 한다. setState를 사용해 값을 변경하면 react는 바로 state를 refresh 하고 바로 render를 불러온다고 한다. 

import React from "react";
import PropTypes from"prop-types";



class App extends React.Component {
    state = {
        count: 0
    };
    add = () => {
        this.state=2;
    };
    minus = ()=>{
        this.setState({count:-1});
    };

    render() {
       return(
           <div>
               <h1>this number is:{this.state.count}</h1>
               <button onClick={this.add}>Add</button>
               <button onClick={this.minus}>Minus</button>
           </div>
       )
    }
}

export default App;

위와 같이 add에서는 this.state=로 설정하고 minus는 setState를 이용해서 설정하고 버튼을 눌렀을 때 

add버튼 같은 경우 아무 반응이 없고 minus버튼을 누르면 count가 -1로 변경돼서 바로 바뀌는 것을 볼 수 있다. 

이는 html 코드로 본다면 react에서 필요한 부분을 빠르게 추가해서 표시해주는 걸 확인할 수 있는데 이때의 속도는 엄청나게 빠르다고 한다. 

setState를 사용하지 않으면 새 state와 함께 render function이 호출되지 않을 것이다. 

import React from "react";
import PropTypes from"prop-types";



class App extends React.Component {
    state = {
        count: 0
    };
    add = () => {
        this.setState(current=> {count: this.state.count +1});
    };
    minus = ()=>{
        this.setState({count: this.state.count -1});
    };

    render() {
       return(
           <div>
               <h1>this number is:{this.state.count}</h1>
               <button onClick={this.add}>Add</button>
               <button onClick={this.minus}>Minus</button>
           </div>
       )
    }
}

export default App;

add 버튼을 누를 때마다 +1 이되도록 minus버튼을 누를때마다 -1이 되도록 코드를 쓴다. 

이렇게 코드를 쓰는 것은 좋은 방법은 아니라고 한다. state에 너무 의존적이라고 함. 

current를 이용해서 작성하면 훨씬 나은 방법이라고 한다. 

#3. 2 Component Life Cycle

react component에서 유일하게 사용되는 function은 render function이다.

component와 react component는 render 이외의 많은 것을 더 가지고 있다. 

 life cycle method를 가지는데 기본적으로 react가 component를 생성하는 그리고 없애는 방법이다.

Mounting:

먼저 호출되는 function은 counstructor()인데 이건 react에서 오지 않고 javascript에서 왔고

Javascript에서 class를 만들 때 호출되는 것이다.

그리고 웹사이트에서 component에서 render 하기 이전에 먼저 constructor()가 먼저 실행된다고 한다. 

그리고 render가 끝나면 componentDidmount가 실행한다고 한다.

import React from "react";
import PropTypes from"prop-types";



class App extends React.Component {
    state = {
        count: 0
    };
    add = () => {
        this.setState({count: this.state.count +1});
    };
    minus = ()=>{
        this.setState({count: this.state.count -1});
    };
    componentDidMount() {
        console.log("component rendered")
    }

    render() {
        console.log("i am rendering");
       return(
           <div>
               <h1>this number is:{this.state.count}</h1>
               <button onClick={this.add}>Add</button>
               <button onClick={this.minus}>Minus</button>
           </div>
       )
    }
}

export default App;

위에서 render와 componentDidMount에 console.log를 만들어 확인해보면 무엇이 먼저 실행되는지 확인 가능하다.

Updating:

업데이트의 원인은 사용자가 된다 아까 위에서 만들었던 add와 minus 버튼을 눌러 출력 값이 변경되는 것을 업데이팅이라고 할 수 있다. 

component가 업데이트될 때 호출되는 많은 function이 있다. 그중 하나는 getDerivedStateFromProps인데 이건 여기서 이야기 안 한다고 한다. 

여기서 봐야 할 것은

componentDidUpdate이다.

코드를 작성 후 웹에 가서 add버튼을 누르고 console창을 보면 componentDidUpdate가 실행되었다는 것을 확인할 수 있다.

import React from "react";
import PropTypes from"prop-types";



class App extends React.Component {
    state = {
        count: 0
    };
    add = () => {
        this.setState({count: this.state.count +1});
    };
    minus = ()=>{
        this.setState({count: this.state.count -1});
    };
    componentDidMount() {
        console.log("component rendered")
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("i just updated");
    }

    render() {
        console.log("i am rendering");
       return(
           <div>
               <h1>this number is:{this.state.count}</h1>
               <button onClick={this.add}>Add</button>
               <button onClick={this.minus}>Minus</button>
           </div>
       )
    }
}

export default App;

setState를 호출하면 component를 호출하고 먼저 render를 호출한 다음 업데이트가 완료되었다고 말하면 componentDidUpdate가 실행될 것이다.

Unmounting :

component가 죽을 때이고 죽을때 실행한다 실행하는지 확인할 방법은 없지만 믿으라고 한다. 실행된다고 ㅋㅋ

#3. 3 Planning the Movie Component

 위에서의 component life cycle을 알아보았고 이제는 만드려고 한 movie component를 구성해본다.

import React from "react";

class App extends React.Componet {
    state={
        isLoading: true
    };
    componentDidMount(){
        setTimeout(() => {
            this.setState({isLoading: false});
        },6000)  // 자바스크립트의 delayfunction이라고 한다. render 다음 componentDidMount가 실행되는데 6초뒤 실행되게 설정
    }
    render(){
        const { isLoading } = this.state;
        return <div>{isLoading ? "Loading..." : "We are ready"}</div> 
        // 자바스크립트의 삼항연산자라고 한다 true일시 Loadingd이 false일때 We are ready가 출력되게 만든다.
    }
}

6초 뒤에 웹에 We are ready가 생성되는 걸 확인할 수 있고 

이론적으로 우리가 할 링은 componentDidMount에서 data를 fetch 하는 것이다.

그리고 API로부터 data fetching이 완료되면 "we are ready"대신에 movie를 Render 하고 map을 만들고 movie를 하는 것이다.

수업 영상을 보고 영상이 진행되는 순서에 맞춰 바로바로 작성하다 보니 장황하고 말 이상하게 쓸 수도 그리고 뇌피셜로 적는 내용이 있을 수 있고 빠짐없이 적고자 하지만 놓친 부분이 있으니 수업내용이 궁금하면 직접 보는 걸 추천드립니다.

아마 이글을 보는 사람이 없을 거 같기는 한데 노파심에 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

이 부분을 reactJS에서는 component라고 부른다 component의 역할은 보다시피 html을 반환하는 함수이다.

그리고 밑줄 친 부분은 우리가 component를 사용하고자 할 때의 component의 형태이다.

react는 component를 사용해서 html처럼 작성하려는 경우 <App/> 이형식을 가져야 한다.

그리고 javascript와 HTML사이의 이러한 조합을 jsx라고 부른다. 

react에서 자바스크립트와 유일하게 배우는 것..? 

이렇듯 위의 사진은 component를 사용하는 방법이다. 

우리만의 component를 만드는 것은 간단하다 

1.src폴더 안에 Potato.js 파일을 만든다. 

만들고 component를 만들 때는 항상 import React from "react"; 를 작성해주어야 한다. 

안 해주면 react는 여기에 jsx가 있는 component를 사용하는 것을 이해하지 못한다고 한다.

작성 후 아까 hello를 작성했을 때와 동일하게 작성하면 되는데 함수 안에 내용을 작성을 하면 

에디터에서 사용되지 않는 함수라고 나오는데 이를 해결하기 위해 

export 해주어야 한다고 한다. 

이렇게 만든 component를 사용하려면 일단 첫 번째로 생각해볼게 index.js파일에 가서 <App/>이 사용되었듯 

Potato를 Import 해서 <App/> 옆에 작성하여 <App/>과 <Potato/>를 react가 가져가게 할 거라고 생각할 수 있는데 

react는 하나의 component만을 rendering 해야 하기 때문에 오류가 나오는 것을 확인할 수 있다고 확인하고 해 보는데 잘되는데.. 버전 업데이트를 통해 지원이 가능한 건지는 모르겠는데 나는

이렇게 작성하고 예시를 보여줬는데 동영상에서는 오류가 나왔다. 그런데 1년 전 자료라 그런지 버전 업데이트를 통해 고쳐진 거일지도 모르겠다.  

흠 일단 다음 영상을 계속 보면서 이 부분은 따로 알아봐야겠다. 

일단 jsx는 javascript 안의 HTML이라고 한다. 

음 이 부분을 어떻게 설명해야 할지 모르겠는데 위와 같이 component를 따로 만들어서 사용하면 파일을 왔다 갔다 해야 하는 복잡함이 생겨서 삭제하고 app component안에서 작업을 하는데 

위 사진과 같이 App component 안에서 Potato component를 생성해서 App component 안에 넣어 중복해서 사용할 수 있음을 알 수 있다.

예를 들어 i like pizza, i like kimchi와 같이 i like는 동일하게 사용하고 음식만 다른 음식으로 다르게 사용하고자 할 때 component를 여러 개 만들어서 app component에 넣는 것이 아닌 props를 이용하여 Potato component를 인자(argument)를 받게 만들고 {} 감싸고 Potato 부분도 {}로 감싸면 변경해서 계속 사용할 수 있다. 

알아보기 쉽게 편의상 Potato -> Food로 바꾸겠다.

+ Component 이름은 대문자로 시작해야 한다.

#2. 2

위와의 방법은 음식을 추가할 때마다 복사 붙여 넣기를 해야 하기 때문에

웹사이트에 동적 데이터를 추가하는 방법

Map을 사용해서 나오게 할 것이며 Map은 Array를 불러와 내가 원하는 arrray로 만들어 가져와주는 역할을 한다. 

첫 번째로 일단 좋아하는 음식을 배열로 하나 만든다.  

import React from "react";

function Food ( {name}){
    return <h1>i like {name}</h1>;
}

const foodlike = [
    {
        name :"kimchi"
    },
    {
        name : "chicken"
    },
    {
        name : "pizza"
    }
]
function App() {
  return (
      <div>
          {foodlike.map( dish=> <Food name={dish.name} />)}
      </div>
  )
}


export default App;

위를 보면 일단 foodlike를 배열로 만들고 

아래 app component에서 map을 만들고 dish라는 이름으로 부르도록 설정한다. 이건 각각의 item인 kimchi chicken pizza를 나타낸다 그러고 위에서의 Food component에 이름을 넘겨주기 위해 dish.name을 적어준다.

그리고 이제 이 음식 사진을 추가적으로 넣어보자.

일단 소스코드는

import React from "react";

function Food ( {name, picture}){
    return (
        <div>
            <h2>i like {name}</h2>
            <img src={picture} />
        </div>
    );
}

const foodlike = [
    {
        name :"kimchi",
        img : "https://www.koreanbapsang.com/wp-content/uploads/2016/10/DSC_1843-e1477360668451.jpg"
    },
    {
        name : "chicken",
        img : "https://www.maangchi.com/wp-content/uploads/2018/02/roasted-chicken-1.jpg"
    },
    {
        name : "pizza",
        img : "https://www.hapskorea.com/wp-content/uploads/2019/08/black-angus-lobster-ball-pizza.jpg"
    }
]
function App() {
  return (
      <div>
          {foodlike.map( dish=> (<Food name={dish.name} picture={dish.img}/>) )}
      </div>
  )

위와 같이 foodlike에 이미지를 넣어주고 

아래 map에 dish.img를 받는 문구를 적고 위에 food에서 이미지를 받는 프로그래밍을 해준다.

이후 renderFood component를 만들어서 foodlike.map에 음식과 이미지 정보를 받아 food component에 넘겨주어 웹에 출력하도록 만들고 app component에 이 쓴 foodlike.map 코드를 간결하게 만들어본다. 그리고 이후에 foodlike.map에 

console.log를 적어 웹에서 어떤 식으로 긁어와서 출력되는지 확인한다.

import React from "react";
import {render} from "@testing-library/react";

function Food ( {name, picture}){
    return (
        <div>
            <h2>i like {name}</h2>
            <img src={picture} />
        </div>
    );
}

const foodlike = [
    {
        name :"kimchi",
        img : "https://www.koreanbapsang.com/wp-content/uploads/2016/10/DSC_1843-e1477360668451.jpg"
    },
    {
        name : "chicken",
        img : "https://www.maangchi.com/wp-content/uploads/2018/02/roasted-chicken-1.jpg"
    },
    {
        name : "pizza",
        img : "https://www.hapskorea.com/wp-content/uploads/2019/08/black-angus-lobster-ball-pizza.jpg"
    }
]
function renderFood (dish) {

    return <Food name={dish.name}  picture={dish.img}/>
}

function App() {
  return (
      <div>
          {console.log(foodlike.map(renderFood))}
          {foodlike.map(renderFood)}
      </div>
  )
}


export default App;

웹에서는 출력이 잘되지만 console창에서 보면 오류가 나와있는 걸 볼 수 있다. 

list 내의 child는 unique 한 key prop을 가져야 한다고 나와있다.

그래서 foodlike component의 배열 값들에 id값을 준다. id 값을 주고 오류에서 나온 key값을 정해준다. 

이후 웹페이지에 돌아가서 console창을 확인해보면 오류가 안 나와있는 것을 확인할 수 있다.

import React from "react";
import {render} from "@testing-library/react";

function Food ( {name, picture}){
    return (
        <div>
            <h2>i like {name}</h2>
            <img src={picture} />
        </div>
    );
}

const foodlike = [
    {
        id:1,
        name :"kimchi",
        img : "https://www.koreanbapsang.com/wp-content/uploads/2016/10/DSC_1843-e1477360668451.jpg"
    },
    {
        id:2,
        name : "chicken",
        img : "https://www.maangchi.com/wp-content/uploads/2018/02/roasted-chicken-1.jpg"
    },
    {
        id:3,
        name : "pizza",
        img : "https://www.hapskorea.com/wp-content/uploads/2019/08/black-angus-lobster-ball-pizza.jpg"
    }
]
function renderFood (dish) {

    return <Food key={dish.id} name={dish.name}  picture={dish.img}/>
}

function App() {
  return (
      <div>
          {console.log(foodlike.map(renderFood))}
          {foodlike.map(renderFood)}
      </div>
  )
}


export default App;

결과적으로 foodlike에 id값을 준 것은 food component에서는 사용하지 않는다 기본적으로 react에서 사용하기 위해 설정해준 것이다. react에서는 모든 element들이 다르게 보일 필요가 있다. id값을 주기 이전의 foodlike의 코드를 보면 우리는 각각의 사진과 이름을 가지고 있다는 것을 알지만 react는 알지 못하기에 우리가 이렇게 id값을 정해주고 key를 넣어주는 것

+ 추가적으로 img 태그에서 alt ={name} 이 부분이 없었는데 이번 영상을 보면서 나는 못 적은 부분이 적혀있길래 내가 놓친 부분이라고 생각했는데 추가적으로 이영상 뒤에 설명이 나왔다 img 태그에는 alt prop 이 반드시 있어야 하고 있어야 하는 이유에는 시각장애인들을 위해 있어야 한다고 한다.

#2. 4 Protection with PropTypes ( props에 원하는 props가 들어가 있는지 점검하기)

- father component로부터 전달받은 props가 우리가 예상한 props 인지 

1. foodlike에 있는 각각의 음식에 rating(점수 매겨보기 )

2. 이후 터미널에 npm i prop-types 입력하여 기능(?) 설치

- 이를 설치하여 아까 작성했던 코드에서 picture를 보내야 하는데 image를 보낸다면 component가 잘못될 텐데 

이를 알려주는 기능이라고 한다.

설치가 완료되면 package.json 에서 설치되어 있는 것을 확인할 수 있다.

import React from "react";
import PropTypes from"prop-types";




const foodlike = [
    {
        id:1,
        name :"kimchi",
        img : "https://www.koreanbapsang.com/wp-content/uploads/2016/10/DSC_1843-e1477360668451.jpg",
        rating: 8
    },
    {
        id:2,
        name : "chicken",
        img : "https://www.maangchi.com/wp-content/uploads/2018/02/roasted-chicken-1.jpg",
        rating : 10
    },
    {
        id:3,
        name : "pizza",
        img : "https://www.hapskorea.com/wp-content/uploads/2019/08/black-angus-lobster-ball-pizza.jpg",
        rating : 10
    }
]
function renderFood (dish) {

    return <Food key={dish.id} name={dish.name}  picture={dish.img}/>
}
function Food ( {name, picture,rating}){
    return (
        <div>
            <h2>i like {name}</h2>
            <h4>{rating} / 10.0</h4>
            <img src={picture} alt={name}/>
        </div>
    );
}
Food.propTypes = {
    name: PropTypes.string.isRequired,
    picture: PropTypes.string.isRequired,
    rating: PropTypes.number.isRequired
};

function App() {
  return (
      <div>
          {
              foodlike.map(dish => (<Food key={dish.id} name={dish.name} picture={dish.img} rating={dish.rating}/>))
          }
      </div>
  )
}


export default App;

ko.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper

크리스마스 학원 수업이 없어 자주 보는 유튜브인 노매드 코더의 온라인 강좌 중에 무료인 

ReactJS로 영화 웹 서비스 만들기를 따라해보고 기록하기 위해 작성.. 

마침 학원에서도 웹수업을 진행 중이기에 쉬는 날 도전해보기에 좋겠다 생각했다. 

온라인 영상 진행 내용을 바로바로 적어서 글이 이상하거나 뇌피셜을 적을 수도 있고 수업 내요을 전부 적어보려고는 하지만 놓칠 수도 있으니 수업이 궁금하신 분은 사이트 가셔서 들어보시길.. 무료입니다

1. nodeJS, npx 설치

nodeJS.org에 들어가 최신버전의 nodeJS를 설치 후 콘솔 창에서 

nodeJS와 npm의 버전을 확인한다. 여기서 npm은 nodeJS를 설치하면 자동으로 따라온다고 한다.

이후 npx라는 것을 설치하기 위해서 콘솔창에 npm install npx -g를 입력하면 설치되는 화면을 확인할 수 있다.

2. VSC 설치 p.s : 노마드코더의 최애 에디터라고 한다. 플러그인 많고 등등등 

3. git의 설치여부 

4. html, css, 바닐라 자바스크립트의 기본적인 지식이 필요하다 그중 바닐라 자바스크립트의

const, let, () 이 세 가지가 뭔지 알아야 한다 arguments도 

그런데 나는 이걸 모른다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ그래서 모르면 자바스크립트 무료수업을 들으라고 해서 거기로 넘어가겠.. 다하고 넘어가려고 했는데 그 수업이 없어져서 그냥 진행해 보겠다뤼 

5. react 설치?

react는 페이스북에서 관리하고 있고 react를 이용한 웹사이트가 주변에 엄청 많다. 

그런데 react코드를 브라우저가 알아듣지 못해 wab pack과 bable을 다운로드해서 react코드를 컴파일해야 한다고 한다. 

그런데 create-react-app을 통해 이 작업을 생략할 수 있다고 하는데

github.com/facebook/create-react-app

일단 나는 잘 모르니 따라 해 보겠다 ㅋㅋ

cmd창에 documents에 접속 후 npx명령어와 만들 app의 이름을 설정해주고 실행한다.

설치가 완료되면 이렇게 나온다.

6. VSC로 돌아가서.. 

documents에 생성된 movie_app_lsw을 열면 목록에 여러 가지 나오는데 그중 

package.json에 들어가서 start, build만 남기고 나머지는 지워준다 안 쓴다고 한다.

터미널 창에 npm start를 입력해 만든 movie_app_lsw을 시작해보자

시작이 정상적으로 되었다면 이화면을 확인할 수 있다.

7. 만든 것을 깃허브에 넣자

vsc 터미널을 이용해서 깃허브에 넣을 건데

터미널에 입력 시 깃허브의 저장소를 만들어주어야 하는데 

이런 식으로 만들고

터미널에 이렇게 넣으면 되는데 커밋을 잘 못써서 두 번 썼는데 위에 한 줄만 저렇게 써주면 된다. 그리고 푸시하고 확인하면 저장소에 들어간 모습을 확인할 수 있다.

8. 만들어진 경로의 폴더를 살펴보면

3가지의 폴더 중 src폴더의 index파일의 3,5번 라인의 글을 지운다. 기본적인 설명을 위해 불필요한 부분을 지운다고 한다.

더불어 14,15,16,17 라인도 지운다.

그리고 소스 폴더에 있는 몇 가지 파일을 지운다.

그리고 App.js에서 import logo 부분을 삭제한다. (로고 파일을 지웠기 때문에)

더불어 div를 비워준다

이렇게 했는데 오류가 나와서 처음부터 다시 하는데 vsc는 익숙지 않아 쓰던 intellij를 이용해 다시 했는데 홈페이지에서 오류가 나오는 것이다. 이미지 파일을 찾을 수 없다나 그래서 잘 보니 리턴 바로 오른쪽에다 div태그가 있어야지 된다. 아무튼 저렇게 작성하면 

작동 은하지만 아무것도 나타내지 않는 빈공 백의 상태의 페이지를 확인할 수 있다. 

그 후 appjs에 div태그를 감싸 hello!! 를 작성하면 hello! 가 출력이 되는 것을 확인할 수 있다.

여기서 웹에서 소스코드를 확인해보면 아래쪽에 div태그 안에 hello 있는 것을 확인할 수 있다.

그런데 에디터에서 public 폴더의 index.html 파일에 들어가면 내가 div태그 안에 작성한 hello는 찾아볼수 없는데 이것이 react가 html을 사용하는 방법이다 react는 처음부터 html을 넣지 않고, html에서 html을 추가하거나 제거하는 방법을 알고있다. 그래서 application에서 이것을 로드할때  빈 html을 로드하게 되고 그런다음에 react가 html을 밀어넣게 된다 방금 작성한 div태그안에 hello를 

이를 증명(?) 하는 자료로는 index.js의 파일 안에는 getElementByID가 있는데 public의 index.html에도 getElementByID의 값인 root가 존재하는 걸 확인할 수 있다.

이렇게 빈 html에 react가 html을 추가해서 넣는 게 react의 작동방식이라고 한다. 

virtual DOM : virtual document object model

가상의 존재 소스코드에서는 존재하지 않지만 react가 만들어낸다

이렇게 작동하면 엄청 속도가 빠르다고 한다 가상이고 존재하지 않아서...

뇌피셜로는 필요할 때마다 코드(?)들을 넣어줘서 처음부터 코드(?) 전체를 넣고 시작하지 않아도 돼서 빠른 건가