[TIL]21.06.06

12071 단어 TILTIL
  • 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로 삼고 내 실력을 판단하며 공부하고 성장해야겠다.

    좋은 웹페이지 즐겨찾기