프로그래밍 코드는 컴퓨터가 올바르게 해석할 수 있도록 구현해야 합니다. 그런데 결국 코드는 사람들이 같이 수정하고 공유하는 것이기 때문입니다. 궁극적으로는 사람이 이해할 수 있는 코드를 구현하는 것이 중요합니다. 클린코드 클린 코드라는 것은 읽기 좋은 코드, 가독성 있는 코드를 말합니다. 사람마다 더 좋은 코드가 무엇인지는 조금씩 다를 수 있습니다. 클린코드 내용을 담고 있는 책이나 글을 많이 보면, 어떤 코드가 좋은지 점점 알 수가 있습니다. 더 좋은 방법은 많은 사람에게 코드리뷰를 받는 것입니다. 아래 몇몇 예시는 클린코드를 만드는 몇 가지 examples에 지나지 않습니다. 이를 참고로 클린코드가 어떤 것인지 알게 되길 바랍니다. 이름 (코딩컨벤션) 이름을 짓는 건 쉬운 일은 아니지만, 읽기 좋은 ..
2) handlebar를 활용한 템플릿 작업 기본 예제 html에 다음과 같이 template코드를 만듭니다. handlebar를 설치합니다. 구글에서 handlebar cdn을 검색해서 html에 스크립트를 추가합니다. javascript에서는 replace로 치환하는 방법 말고, 라이브러리를 사용해서 결과를 얻을 수 있습니다. var template = document.querySelector("#listTemplate").innerText; var bindTemplate = Handlebars.compile(template); //bindTemplate은 메서드입니다. compile: 함수를 반환하는 함수인데 미리 만들어진 템플릿 문자열을 가져왔다가 자기가 변수로 기억을 해둡니다. 그리고 데이터가 ..
1) JavaScript 라이브러리 jQuery 의 10년 지난 10년간, JS라이브러리는 jQuery가 그 인기를 독차지했었습니다. 2018년 현재 그 인기는 많이 줄었습니다. 어떤 이는 이제 더 배울 필요가 없다고 이야기되고 합니다. (실제로는 기존에 적용된 코드를 수정하느라 웹개발자들이 쉽게 jQuery를 떠날 수는 없을 겁니다.) jQuery가 인기 있던 이유는 꽤 많은데요, 몇 가지 꼽으면 다음과 같습니다. IE6,7,8를 포함해서 다양하게 동작하는 웹브라우저의 API 간의 차이를 줄여주었습니다. 복잡하고 어려운 DOM APIs를 추상화해서 제공해서 쉽게 DOM 조작이 가능합니다. 사고의 흐름에 맞춰 프로그래밍할 수 있습니다. jQuery에서 DOM조작을 어떻게 처리하는지 찾아보면 꽤 편리합니다..
3) bind메소드로 this제어하기 this가 달라지는 경우 showHealth는 어떤 이유인지 바로 출력하지 못하고, 1초 뒤에 결과를 출력하는 함수입니다. this가 무엇을 가리킬까요? var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { setTimeout(function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); }, 1000) } } healthObj.showHealth(); // 님, 오늘은 undefined에 운동을 하셨네요 위의 코드는 비동기 상황에서 일어나는 것으로, 이와 유사하게 비동기로 동작하는 이벤트 콜백에서 ..