본문 바로가기

UI개발

자바스크립트 객체지향 - 생성자와 new 기본적인 객체 생성 var person = {} person.name = '이름'; person.introduce = function(){ return 'My name is ' + this.name; } /* 위의 코드는 객체를 만드는 과정이 분산되어 있다. 객체를 정의할 때 값을 셋팅하면 가독성이 좋고, 변질될 위험이 줄어든다. */ var person = { person.name = '이름'; person.introduce = function(){ return 'My name is ' + this.name; } } person (this) name (property) introduce (method) 중복된 코드가 있다는 것은 코드의 양이 많아지고, 유지보수가 힘들고, 가독성이 떨어진다는 것 var .. 더보기
자바스크립트 객체지향프로그래밍 객체지향프로그래밍 (OOP, Object Oriented Programming) 좀 더 나은 프로그램을 만들기 위한 로직을 상태와 행위로 이루어진 객체로 만드는 것. 로직과 관련된 변수와 메소드를 그룹핑 한 것이 객체. 그 객체를 재활용 한다. 본문 객체 변수 메소드 댓글 객체 변수 메소드 부품화 객체가 다른 곳, 여러 곳에서 부품으로 사용된다는 것. 부품화. 초창기 컴퓨터는 본체와 모니터, 키보드가 하나도 단일화되어 있다. 모니터가 고장나면? 컴퓨터를 바꿔야 한다. 키보드가 고장나면? 컴퓨터를 바꿔야 한다. 부품화라고 하는 것은 단순히 동일한 기능을 하는 메소드와 변수를 그룹핑한다고 달성되는 것은 아니다. 제대로된 부품이라면 그것이 어떻게 만들어졌는지 모르는 사람도 그 부품을 사용하는 방법만 알면 쓸 .. 더보기
[ES6] 화살표 함수에 없는 것 화살표 함수에 없는 것 1. 함수 이름 함수에 이름을 주는게 가능했지만 function myFunc(){} 화살표 함수는 익명함수이다. () => {} 이름을 주려면 요렇게 써야한다. const myFunc = () => {} 2. this var btn = document.getElementById('btn'); var obj = { count : 3, setCounter : function(){ console.log(this.count); // 3 (this = obj); btn.addEventListener('click', function(){ console.log(this); // btn } // btn에서 this를 obj로 쓰려면 bind한다. btn.addEventListener('click.. 더보기
UX/UI 기획을 위한 제반 이론 사용자 경험의 개념과 이해 1. 사용자 경험의 정의와 중요성 사용자 경험이란? 그 경험의 작용 대상과 인간의 반응으로 이해한다. 사전적 정의 : 사용자 경험 (User Experience, UX)은 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하게 되는 지가고가 반응, 행동 등의 총체적 경험을 말한다. UX 대상과 사용자의 지각과 반응 사용자는 경험의 대상(제품, 시스템, 서비스, 회사, 브랜드 등)과 지각 반응(감정, 태도, 행동의 총합)을 통합적으로 인지하고, 구매와 지속적 사용행위를 하게 된다. UX 이해의 복잡성 주관성 (subjectivity) : 인간의 경험은 그 사람의 개인적, 신체적, 인지적 특성에 따라 주관적이다. 맥락성 (contextuality) : 사용자.. 더보기
자바스크립트 참조타입 기본 타입(숫자, 문자, true/false, undefined, null)을 제외한 모든 값은 객체이다. 자바스크립트에서 객체는 단순히 이름(key) : 값(value) 형태의 프로퍼티를 저장하는 컨테이너로, 하나의 값만 가지는 기본 타입과 달리 여러개의 값을 포함할 수 있다.다른 객체를 가리킬 수도 있고, 함수로도 포함할 수 있다. 객체 생성 방법 1. Object() 생성자 자바스크립트는 내장 Object() 생성자 함수를 제공한다. var hh = new Object(); hh.name = ‘hhh’;hh.age = 28; console.log(typeof hh); // objectconsole.log(hh); // Object { name : ‘hhh’, age : 28 } 2. 객체 리터럴 방.. 더보기
자바스크립트 배열 배열변수 하나에 여러 개의 데이터를 담을 수 있는 특별한 데이터형. 일반 변수로 표현한 경우 여러 개의 변수를 만들어야 한다.var name1 = "김" var name2 = "김군" var name3 = "김아저씨" 배열을 이용하면 하나의 변수에 모두 담을 수 있다. 연관있는 데이터를 하나로 묶어 관리할 때 주로 사용한다.var name = ["김","김군","김아저씨"]; 김김군 김아저씨 문자, 숫자, 오브젝트 등 타입이 다른 여러 개의 데이터형을 혼합해서 보관할 수 있다.var a = [ "a", 123, true ]; a 123 true 배열 선언배열 리터럴 [] 대괄호 사용 (권장 - 가독성 및 처리 속도 향상)var arr = ["1","2","3"] Array() 생성자 함수 1.변수 선언과.. 더보기
자바스크립트 연산자 연산자 자바스크립트는 이항 연산자, 단항연산자, 조건연산자를 가지고 있다. 이항 연산자 두개의 피연산자가 필요함. 하나는 좌변에 다른 하나는 우변에 3+4 // 피연산자1 연산자 피연산자2 x*y 단항 연산자 연산자 뒤에든 앞에든 하나의 피연산자 필요함. ++x // 연산자 피연산자 x++ // 피연산자 연산자 삼항 연산자 (조건 연산자) 조건에 따라 두 식 중 하나를 반환한다. 조건 ? 값1 (true) : 값2 (false) var a = 11; var b = (a>=10) ? "메롱" : "바보" // a가 10보다 같거나 클 때 '메롱'을 b에 대입한다. 아니면 '바보' if..else 문의 단축형으로 사용할 수 있다. if ( a > b ) { c = 10; } else { c = 20; } (.. 더보기
콘텍스트 자바스크립트에서 작성하는 코드는 어떤 형태로든 항상 콘텍스트(그 속에서 코드가 돌아가는 객체)에 속하게 된다.콘텍스트라는 개념은 다른 객체지향언어에도 있지만 자바스크립트의 콘텍스트만큼 극단적인 모습은 아니다. 콘텍스트는 this 변수를 통해 작동한다.this 변수는 항상 코드가 속한 객체를 가리킨다. 한 콘텍스트 안에서 함수를 사용한 후 콘텍스트를 다른 변수로 바꾸는 예 var obj = {yes : function(){// this == objthis.val = true;},no : function (){this.val = false;}}; // obj 객체에 val 이라는 프로퍼티는 없다.alert ( obj.val == null ); // yes 함수를 호출하면 obj 객체와 연결된 val 프로퍼티.. 더보기
함수 오버로딩과 타입 검사 함수에 전달되는 전달인자의 개수가 다르거나 전달인자의 타입이 다른 경우 함수가 다른 행동을 취하도록 함수를 오버로딩 하는 기능이다.자바스크립트에서 함수 오버로딩 기능을 직접 제공하지 않지만 함수 오버로딩을 가능하게 하는 방법이 몇 가지 있다. 함수 오버로딩을 하려면 두 가지 정보가 필요하다.1. 전달인자의 개수가 몇 개인지 결정할 수 있어야 하고,2. 전달인자의 타입이 무엇인지 결정할 수 있어야 한다. function sendMessage( msg, obj ){ // msg와 obj를 모두 받으면if (arguments.length == 2){// obj에 msg를 보낸다.obj.alert( msg );}else{ // 그렇지 않으면 // 기본 메세지 출력 alert( msg ); }}sendMessag.. 더보기
자바스크립트 참조 (reference) 참조는 객체의 실제 위치를 가리키는 포인터.자바스크립트에서 실제 객체 그 자체는 절대로 참조가 될 수 없다. 문자열은 항상 문자열이고 배열은 항상 배열이다.그렇지만 서로 다른 변수들이 동일한 객체를 가리킬 수 있다. 자바스크립트는 이렇게 참조들로 구성된 구조에 기반하고 있다. 동일한 객체를 가리키는 여러 변수들에 대한 예 // obj를 빈 객체로 설정var obj = new Object(); // objRef는 앞의 빈 객체를 가리킨다.var objRef = obj; // 앞에서 생성했던 객체의 프로퍼티를 수정한다.obj.oneProperty = true; // 두 변수 모두 동일한 객체를 가리키고 있기 때문에 수정 사항이 두 변수에 모두 나타남.alert( obj.oneProperty == objRef.. 더보기
자바스크립트 Array 객체 메서드 Array.forEach배열 전체를 돌며 해당 배열의 요소에 직접 어떤 작업을 수행하고 싶을 때 적합 배열 전체를 돌때 요소마다 콜백 함수를 실행하며 이 콜백함수의 인자는 다른 모든 메서드와 동일한 순서의 인자를 갖는다. 첫번째 인자는 현재 배열 요소의 값이고,두번째 인자는 현재 배열 요소의 위치 (index),세번째 인자는 현재 돌고 있는 배열 자체를 가리킨다. 메서드 수행 후 undefined를 리턴한다. // 원본 배열var testArray = ["a", "b", "c", "d"]; // 배열의 모든 요소에 "메롱"이라는 문자열 더하기 testArray.forEach(function(item,index,array){array[index] = item + "메롱";}); // 메서드 수행 후 원본 .. 더보기
자바스크립트 오름차순, 내림차순 정렬 var sort = [88, 99, 54, 95, 11, 10]; var temp = 0; for ( var i = 0; i sort[j]){ temp = sort[i]; sort[i] = sort[j]; sort[j] = temp; } } } for (var i = 0; i < sort.length; i++){ document.write(sort[i]); } 더보기

티스토리툴바