[TIL]21.06.06

Dom으로 아이디, 비밀번호입력받고 출력하는 html코드를 만드는 기능을 구현해봤다.

이걸 구현할려고 보니, setAttribute로 onclick이 될 경우 함수를 실행도록 setAttribute 두번째인자에 함수를 선언하니 제대로 작동되지 않았다. 알아보니 Chrome에서는 지원을 안한?다고 다음과 같이 DOM으로 onclick같은 이벤트핸들러에 함수를 할당하기 위해선 다음과 같이 코드를 작성해야한다.

inputMaker.onclick = function(){};

그리고 리액트에서랑 HTML에서랑 이벤트핸들러 쓰는 방법이 다르다..

//HTML
onclick
//React
onClick

let list = {};

function setList(id, password){
    if(list[id] === undefined){
        list[id] = password;
        alert('You have it');
    }else{
        alert('You already have it');
    }
}

function getList(){
    return `${list}`;
}

let body = document.querySelector('body');
let idMaker = document.createElement('input');
let passwordMaker = document.createElement('input');
let getButtonMaker = document.createElement('input');
let seeButtonMaker = document.createElement('input');


idMaker.setAttribute('type', 'text');
passwordMaker.setAttribute('type', 'password');
getButtonMaker.setAttribute('value', 'submit');
getButtonMaker.onclick = function(){
    console.log(idMaker.value, passwordMaker.value);
     if(list[idMaker.value] === undefined){
        list[idMaker.value] = passwordMaker.value;
        alert('You have it');
    }else{
        alert('You already have it');
    }
}
seeButtonMaker.setAttribute('value', 'See id, password');
seeButtonMaker.onclick = function(){
    let _temp = document.createElement('div');
    _temp.textContent = 'List';
  
    for(let key in list){
        let temp = document.createElement('div');
        temp.textContent = `ID : ${key}, PassWord: ${list[key]}`;
        body.append(temp);
    }
}

body.append(idMaker);
body.append(passwordMaker);
body.append(getButtonMaker);
body.append(seeButtonMaker);

---

어떤 프레임워크나 언어, 라이브러리를 공부하든 간에 정보를 다루는 것이기에

CRUD

가 굉장히 중요한 것 같다.

그 프레임워크, 언어, 라이브러리등 개발을 할 수 있는 도구를 공부하고 나서 CRUD를 할 수 없다면 그것을 사용할 수 없다고 말할 수 있을 정도로라고 생각이 든다.

해서 공부의 기준을 CRUD로 삼고 내 실력을 판단하며 공부하고 성장해야겠다.