손코딩 하기 // <JavaScript>

 

 

손 코딩

 

 

손 코딩은 에디터의 자동완성이나 도움없이 손으로 써내려가는 코드이며 처음부터 손으로 써보고 잘 구현되는지 확인해보거나 혹은 이미 에디터로 작성한 코드들을 이해하고 습득하기 위해서 클론(?) 손코딩 등 하는 사람의 용도와 목적에 따라서 응용하면서 하면 될꺼같다.

 

 

수업의 일환으로 중간중간 이해가 안 되는 부분들을 손 코딩을 하는 시간을 가졌는데 손으로 써보니 에디터에서 쓴걸 하나씩 보면서 이해하는 것보다 좀 더 이해가 잘되는 거 같아서 뭔가 막히거나 어려울 때 1시간 정도씩 써보고 있다.

 

수업 시간 때 배운 코드들 중에서 어렵거나 잘 이해가 안 되는 코드들은 3~6번씩 써보고 이번에 한건 이미 완성된 자바스크립트 코드인데 예전에 만들었던 페이지의 자바스크립트 부분이고 그때는 아직 배우지 않은 상태라서 HTML, CSS 만으로 만들었어고 조만간 그 페이지에 자바스크립트 작업을 할 예정이라 미리 손으로 써보면서 조금씩이라도 이해하기 위해서 써보았다.

 

 

 

 

ㅋㅋ 멋사 수업은 제주 베이스 코딩 캠프의 강사분들이 해주시는데 가끔씩 대회 같은걸 한다. 첫 번째는 포스팅되어있고 두 번째는 이력서 만들기에서 아차상을 받아서 상장 대신 상품들을 받았는데 그중에 하나인 코딩 노트!

 

 

 

 

클론 손 코딩한 코드.

 

const startButton = document.querySelector(".start_btn");

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

const modal = document.querySelector("#modal");

const openButton = document.querySelector(".modal_btn");

const closeButton = document.querySelector(".close_btn");

const shareButton = document.querySelector(".share_btn");

const loading = document.querySelector(".result_loading");

 

function calculator() {

    const fieldValue = document.querySelector("#field_value");

    let timeValue = document.querySelector("#time_value");

    let timeValue_int = Number(timeValue.value);

 

    const fieldResult = document.querySelector(".field_result");

    const timeResult = document.querySelector(".time_result");

 

    if(fieldValue.value == "") {

        alert('입력되지 않았습니다.');

        fieldValue.focus();

        return false;

    } else if (timeValue.value== "") {

        alert('입력되지 않았습니다.');

        timeValue.focus();

        return false;

    } else if (timeValue_int > 24) {

        alert('잘못된 값입니다. 24이하의 값을 입력해 주세요.');

        return false;

    }

 

    result.style.display = "none";

    loading.style.display = "flex";

 

    setTimeout(function() {

        loading.style.display = "none";

        result.style.display = "flex";

        fieldResult.innerText = fieldValue.value;

        timeResult.innerText = parseInt((10000/timeValue_int), 10);

    }, 1800);  

}

 

function openModal() {

    modal.style.display = "flex";

}

 

function closeModal() {

    modal.style.display = "none";

}

 

window.onclick = function (event) {

    if(event.target == modal) {

        closeModal();

    }

};

 

function copyUrl() {

    let url = window.location.href;

    let tmp = document.createElement('input');

   

 

    document.body.appendChild(tmp);

    tmp.value = url;

    tmp.select();

    document.execCommand("copy");

    document.body.removeChild(tmp);

   

    alert("URL이 복사되었습니다");

}

 

shareButton.addEventListener('click', copyUrl);

openButton.addEventListener("click", openModal);

closeButton.addEventListener("click", closeModal);

startButton.addEventListener("click", calculator);

 

 

맨 처음 수업시간에 최초로 했던 손 코딩은 글씨가 너무 엉망이고 수업시간 안에 하려고 갈겨쓰다 보니 이해도 안 되고 나중에 알아볼 수도 없었다. 그런데 강사님이 손 코딩을 할 때는 최대한 이해하면서 천천히 이쁜 글씨로 쓰라고 하셔서 그뒤부터는 시간을 생각하지 않고 최대한 이해하고 이쁜글씨로 쓰려고 노력하고 있지만 역시 너무 악필이라 힘들다...

 

 

 

 

 

 

 

 

정말 이쁘게 쓰려고 노력하고 쓴 건데도 왜 이러는지 모르겠다. 앞으로 계속하다 보면 글씨는 나아지겠지..

 

손 코딩을 각 잡고 매일 하는 거보다 뭔가 틈이 나거나 공허하거나 너무 이해가 안 될 때 하면 도움이 될 거 같다. 그리고 부가적으로 글씨를 잘 쓸 수 있게 되고, 전완근이 강해질 수 있을 거 같다. 그리고 다음부터는 쓰면서 중간중간 주석으로 이해되고 안 되는 부분들을 넣으면서 확인해야겠다.

 

 

 

 

 

https://github.com/chry8822

chry8822 - Overview