📝 성장을 위한 기록
-
React를 사용해야하는 이유Study/React 2019. 12. 30. 23:21
React란 무엇인가? A JavaScript library for building user interfaces 최근 웹페이지들은 사용자와의 인터랙션이 많고 UI를 동적으로 표현해야하는 경우가 많다. 이런 상황에서 만약 HTML, CSS, JavaScript 만으로 웹페이지를 구성해야한다면 DOM을 조작하고 업데이트 해야할 때 코드가 굉장히 복잡해질 것이다. 왜냐하면 JavaScript로 DOM을 조작하려면 document.getElementById('blabla') 와 같이 직접 DOM을 선택하고, 다양한 이벤트핸들러를 통해 업데이트 하는 작업을 해야하므로 유지보수 하기가 어려워질 수 있다. 따라서 웹페이지를 개발할 때 필요한 DOM 관리 및 상태값 업데이트 관리 등의 작업을 최소화하고, 기능 개발, ..
-
[생활코딩] JavaScript 정규표현식Study/JavaScript 2019. 12. 9. 19:48
정규표현식 (regular expression) 정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 정규표현식은 두가지 단계로 이루어진다. 하나는 컴파일(compile) 다른 하나는 실행(execution)이다. - 컴파일 compile 컴파일은 검출하고자 하는 패턴을 만드는 일이다. 우선 정규표현식 객체를 만들어야 한다. 객체를 만드는 방법은 두가지가 있다. 정규표현식 리터럴 : var pattern = /a/ 정규표현식 객체 생성자 : var pattern = new RegExp('a'); - 실행 execution object.exec( ) RegExp.exec() console.log(pattern.exec('abcdef')); // ["a"] : 실행결과는..
-
[생활코딩] JavaScript 데이터 타입Study/JavaScript 2019. 12. 9. 10:19
데이터 타입 Data type 데이터 타입이란 데이터의 형태를 의미한다. 데이터 타입은 크게 두가지로 구분할 수 있다. 객체와 객체가 아닌 것. 객체가 아닌 데이터 타입을 원시 데이터 타입(primitive type)이라고 한다. 그 외의 모든 데이터 타입들은 객체다. ◆ 원시 데이터 타입(primitive type) : 숫자, 문자열, boolean(true/false), null, undefined 객체 뒤에 등장하는 점 . : object access operator var str = 'coding'; console.log(str.length); // 6 console.log(str.charAt(0)); // "C" 위와 같이 문자열은 분명히 프로퍼티와 메소드가 있다. 하지만 문자열은 객체가 아니다..
-
[생활코딩] JavaScript 객체지향 : 상속, Prototype, ObjectStudy/JavaScript 2019. 12. 8. 18:06
상속 객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다. 즉, 상속이란 부모의 기능을 자식이 물려받는 것이다. 상속을 하게 되면? - 코드의 중복이 줄어든다. - 상속법 : 자식객체.prototype = new 부모객체(); - 부모객체에서 프로퍼티들 정의할 때 prototype 붙여준다. - 기능 추가 역시 자식객체를 생성하고 prototype을 붙여서 프로퍼티를 정의한다. function Person(name){ this.name = name; } Person.prototype.name=null; Person.prototyp..
-
[생활코딩] JavaScript 객체지향 : thisStudy/JavaScript 2019. 12. 8. 10:01
this this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다. 1. 함수 호출 시 : 전역객체 window function func(){ if(window === this){ console.log("window === this"); } } func(); // window === this 2. 객체 소속인 메소드 호출 시 : 부모 객체 var o = { func : function(){ if(o === this){ console.log("o === this"); } } } o.func(); // o === this 3. new를 이용한 생성자 호출 시 : 생성되는 객체 생성자는 빈 객체를 만든다. 그리고 이 객체 내에..