본문 바로가기

웹프로그래밍22

클린코드 클린코드 클린코드라는 것은 읽기좋은 코드 즉 가독성 있는 코드를 말합니다. 클린코드를 위한 4가지 조건을 알아보겠습니다. 1. 이름 ( 코딩컨벤션 ) 이름을 짓는 것은 읽기 좋은 코드를 만드는데 필수 요소이므로 다음과 같은 요소들을 고려한다면 가독성 높은 코드들을 구현할수있습니다. 1. 함수는 목적에 맞게 이름이 지어져 있는가? 2. 함수 안의 내용은 이름에 어울리게 하나의 로직을 담고 있는가? 3. 함수는 동사 + 명사이며 함수의 의도를 충분히 반영하고 있는가? 4. 함수는 카멜표기법 또는 _를 중간에 사용했는가? 5. 변수는 명사이며 의미 있는 이름을 지었는가? add() 함수명은 포괄적이라 해당 함수가 어떤 로직을 담고있는지 유추하기 힘듭니다. 반면, addSemicolon()함수는 동사+명사의 형.. 2019. 8. 27.
handlebar 활용한 템플릿 작업 Template 작업이란? 반복적인 HTML부분을 template로 만들어두고, 서버에서 온 데이터(주로 JSON)을 결합해서, 화면에 추가하는 작업입니다. 어떤 데이터를 기준으로 html을 변경시키는 일.즉, 문자열 처리 기반으로 작업을 합니다. 이러한 문자열을 parsing 할 때 replace() 메서드 사용하여 완성된 html 문자열을 최종적으로 만들게 됩니다. 그러나 이런 작업을 매번 하기엔 번거롭기도 하고 가독성도 떨어져 라이브러리를 사용합니다. handlebar 라이브러리 사용하지 않은 JavaScript Template 작업코드 for (var i = 0; i < dataLength; i++) { resultHTML = html.replace("{title}", data['items'][i.. 2019. 8. 27.
bind메소드로 this 제어하기 bind() bind() 함수는 새로운 함수를 만듭니다. 즉, 새로운 함수를 생성해 반환한다는 것입니다. 바인딩한 함수는 원본 함수 객체를 감싸는 함수로, 바인딩한 함수를 호출하면 일반적으로 래핑 된 함수가 호출됩니다. 또한, bind()는 전달 할 인수가 필요한 콜백 함수를 작성하는 데 유용합니다. bind()메소드 이용해 함수 생성하기 this.x = 8; var module = { x:100, getX: function() {return this.x; } }; module.getX(); // 100 - this 키워드가 module객체의 x값을 참조하여 100 출력됨 var testX = module.getX; testX(); // 8 반환 - 함수가 전역 스코프에서 호출됨(this.x) var b.. 2019. 8. 20.
객체 리터럴과 this 자바 스크립트의 객체 객체 리터럴(Object literal)이라고 불리며, key와 value의 형태를 가지는 해시 맵 구조를 자바스크립트의 객체라고 합니다. 아래의 코드와 같이 비슷한 기능을 묶어 객체 리터럴 코드로 만들고 각 메소드를 실행합니다. this는 객체 자신을 가리킵니다. var yogaClassObj = { classRoom : "room1", name : "jj", time : "AM06:00", showHealth : function() { console.log(this.name + "님, 오늘은 " + this.time + "에 운동을 하셨네요"); } } yogaClassObj.showHealth(); this 객체 안에서의 this는 그 객체 자신을 가리킵니다. 그 외 다양한 곳.. 2019. 8. 20.

티스토리툴바