전체 글53 컴퓨터뿐만 아니라 사람도 이해할 수 있는 클린 코드 클린 코드란 가독성 좋은 코드를 말한다. 기능이 복잡할수록 코드도 복잡해지고 지저분해지기 쉽다. 동시에 기능이 복잡한 프로그램은 여러 명의 개발자가 함께 개발해야 하거나 여러 기능을 지속적으로 수정하고 추가해야 할 상황이 많다. 그래서 코드는 최대한 사람들도 이해하기 쉽도록 만들어야 한다. 1. 코딩 컨벤션(coding convention) 따르기 함수나 변수 등의 이름을 짓는 규칙을 말한다. 함수의 이름은 목적에 맞게 지어져 있어야 한다. 함수에 있는 내용이 이름과 어울리도록 하나의 로직을 담고 있어야 한다. 함수는 동사+명사로 이루어져 있어야 한다. 함수의 이름은 카멜 표기법 또는 _를 중간에 사용하여지어야 한다. (보통은 카멜 표기법을 많이 사용한다) 변수는 명사이며 의미 있는 이름으로 지어야 한다.. 2019. 8. 9. 자바스크립트 템플릿 라이브러리 - handlebars 템플릿으로 HTML을 변경하는 작업을 할 때 도와주는 handlebars 라이브러리가 있다. replace 메서드로 템플릿을 적용했던 기존 방법으론 템플릿 내용이 복잡하거나 길어질 수록 가독성도 떨어지고 코딩하기도 힘들다. template using handlebar class가 show인 section 안에 게시글 목록을 만들 것이다. section 태그 안에 템플릿을 만들어뒀다. {{ }} 안의 내용과 매칭되는 데이터가 파싱될 것이다. 1. handlebars 설치 먼저 라이브러리를 사용하기 위해 설치를 해줘야 한다. 1) 구글에 handlebars cdn을 검색한다. cdn은 content delivery network라는 뜻으로, 직접 다운로드 받지 않아도 가장 가까운 캐시 서버에서 컨텐츠를 가져.. 2019. 8. 9. 자바스크립트 라이브러리 자바스크립트에도 개발을 쉽게 할 수 있도록 도와주는 라이브러리가 있다. 그중, jQuery와 Framework에 대해 정리해보겠다. 1. jQuery edwith의 웹 프로그래밍 강의를 들으며 2018년 기준, jQuery는 지난 10년간 가장 인기 있는 라이브러리라는 것을 알게 됐다. 나도 웹 프로그래밍 공부를 시작하면서 JavaScript를 공부하면서 제일 처음 접한 라이브러리가 jQuery였다. 그만큼 유명하고 많이들 사용하고 있구나 생각이 든다. (참고로 jQuery는 w3schools 에서 공부했다.) 그동안 jQuery의 인기의 이유는 다음과 같다. IE6, 7, 8를 포함해서 다양한 웹 브라우저의 API 간의 차이로 인해, 브라우저에 따라 코드 동작이 잘 안 되는 경우가 많이 있었다. jQu.. 2019. 8. 8. this를 제어할 수 있는 bind 메서드 this는 this를 사용하고 있는 함수가 어떻게 불리느냐에 따라 가리키는 값이 달라진다. bind 메서드를 이용해서 이런 this를 원하는 값으로 바꿀 수 있다. 이 bind 메서드에 대한 것을 알아보자. bind method bind() 메서드는 this가 bind에 제공된 값으로 설정된 새로운 함수를 생성한다. 이 새로운 함수의 인자값을 순서대로 지정할 수도 있다. 예제로 이해해보자. 1) bind 메서드로 this가 가리키는 값 변경하기. var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { setTimeout(function(){ console.log(this.name + "님, 오늘은 " + this.la.. 2019. 8. 5. 객체 리터럴과 this 자바스크립트의 객체를 활용하여 비슷한 행위를 하는 코드를 묶어 모듈화 할 수 있다. 객체로 모듈화하여 자바스크립트에서 객체지향 프로그래밍을 할 수 있다. 자바스크립트의 객체는 { 키 : 값 } 같은 해시 맵 구조(딕셔너리라고도 한다)의 형태이다. 1. 객체 리터럴 자바스크립트에선 객체 리터럴이라는 표현식으로 객체를 쉽게 만들 수 있다. var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); } } healthObj.showHealth(); 이런 형태를 객체 리터럴이라고 한다. ※ 참고 : ES6에서는.. 2019. 8. 4. 자바스크립트 배열의 함수형 메서드 배열은 여러 데이터를 순서대로 저장할 수 있는 자료구조이다. 프론트엔드에서 자바스크립트 배열을 사용하여 데이터 조작을 하는 경우가 많다. 이를 위해 제공되는 유용한 메서드들을 어떻게 사용하는지 알아보려 한다. 배열을 가공하거나 조회하기 위한 메서드를 예제와 함께 공부해보자. 예제에 쓰일 mock 데이터 var data = [{title : "hello",content : "안녕", price : 12000}, {title : "good",content : "좋아", price : 5500}, {title : "study",content : "공부", price : 1200}]; 배열을 순회하는 기본적인 방법에는 for문과 forEach가 있다. 1. for vs forEach for for(var i=0.. 2019. 8. 4. HTML templating (자바스크립트로 템플릿 사용하기) HTML templating은 반복적인 HTML 태그 부분을 template로 만들어두고, 서버에서 온 데이터(주로 JSON)와 결합하여 화면에 추가하는 작업을 말한다. HTML 태그 template test example /* HTML Template script HTML의 script 태그는 type이 javascript가 아니면 렌더링하지 않고 무시한다는 점을 이용 */ 자바스크립트 var data = {title : "hello", content : "lorem dkfief", price : 2000 }; //HTML의 script에서 가져온 HTML Template var html = document.querySelector("#template-list-item").innerHTML; html... 2019. 8. 3. Event delegation (이벤트 위임) Event delegation은 이벤트를 주려는 요소의 부모 요소에게 이벤트를 위임하는 것을 말한다. 이를 이용하면 요소들을 동적으로 추가해도 따로 추가 수정 없이 계속 이벤트를 줄 수 있다. 또 자식 노드에 일일이 이벤트를 등록하지 않아도, 자식 요소로 이벤트를 실행할 수 있어 효율적인 코딩이 가능하다. HTML 코드 JavaScript 코드 var ul = document.querySelector("ul"); ul.addEventListener("click",function(evt) { console.log(evt.currentTarget, evt.target); }); evt.currentTarget : ul 태그 내용 evt.target : 실제 클릭한 태그 내용 ul 태그 안의 img나 li 태.. 2019. 8. 3. DOMContentLoaded 이벤트 로딩이 다 된 후 자바스크립트 동작이 이뤄지는 것이 일반적이다. DOM 로딩이 다 되지 않았는데 DOM을 조작하는 자바스크립트 코드가 실행되면 원하는 결과를 내지 못할 것이다. DOMContentLoaded 이벤트로 이런 불상사를 막을 수 있다. DOMContentLoaded 이벤트는 DOM Tree 분석이 끝나면 발생한다. (load는 DOM Tree 외의 모든 자원이 다 받아져서 브라우저에 렌더링(화면 표시)까지 다 끝난 시점에 발생한다.) DOM Tree가 다 만들어진 후에 DOM API를 이용하여 DOM에 접근할 수 있기 때문에, 보통 자바스크립트 코드는 DOMContentLoaded 이후에 동작하도록 구현한다. 이 방법이 로딩 속도 성능에 유리하다고 생각하기 때문이다. document.addEv.. 2019. 8. 3. 자바스크립트로 Web Animation 구현하기 JavaScript로 애니메이션을 구현하려면 규칙적인 처리를 하도록 구현하면 된다. 이런 규칙적인 처리를 위한 메서드는 다음과 같다. setInterval setTimeout requestAnimationframe Animation API 1. setInterval() setInterval의 첫 번째 인자는 반복적으로 실행할 함수, 두 번째 인자는 반복할 시간이다. const interval = window.setInterval(()=> { console.log('현재시각은', new Date()); },1000/60); window.clearInterval(interval); //setInterval 종료 //window. 생략 가능 하지만 setInterval 함수는 비동기 함수로, 마우스 클릭 이벤.. 2019. 8. 3. 이전 1 2 3 4 5 6 다음