본문 바로가기

분류 전체보기

 (123)
'new' 연산자와 생성자 함수 객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다. 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다. 다만 생성자 함수는 아래 두 관례를 따른다. 함수 이름의 첫 글자는 대문자로 시작한다. 반드시 "new" 연산자를 붙여 실행한다. function User(name) { this.name = name; this.isAdmin = false; } let user = new User("Jack"); alert(user.name); // Jack alert(user.isAdmin); // false new User(...)를 써서 함수를 실행하면 아래와 같은 알고리즘..
메서드와 'this' 메서드 만들기 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! 이렇게 객체 프로퍼티에 할당된 함수를 메서드(method) 라고 부른다. 메서드 단축 구문 (method shorthand) // 아래 두 객체는 동일하게 동작한다 user = { sayHi: function() { alert("Hello"); } }; // 단축 구문을 사용하니 더 깔끔해 보인다 user = { sayHi() { // "sayHi: function()"과 동일하다 alert("Hello"); } }; 위처럼 function을 생략해도 메서드를 정의할 수 있다. 메서드와 'this' ..
참조에 의한 객체 복사 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 '참조에 의해(by reference)' 저장되고 복사된다는 것이다. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장된다. let user = { name: "John" }; 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않는다. let user = { name: "John" }; let admin = user; // 참조값을 복사함 객체에 접근하거나 객체를 조작할 땐 여러 변수를 사용할 수 있다. let user = { name: 'John' }; let admin = user; admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨..
객체 기초 객체 중괄호 {...}를 이용해 객체를 선언하는 것을 객체 리터럴(object literal) 이라고 부른다. 객체를 선언할 땐 주로 이 방법을 사용한다. let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 }; 객체는 몇 가지 특수한 기능을 가진 연관 배열(associative array)이다. 객체는 프로퍼티(키-값 쌍)를 저장한다. 프로퍼티 키는 문자열이나 심볼이어야 한다. 보통은 문자열이다. 값은 어떤 자료형도 가능하다. 아래와 같은 방법을 사용하면 프로퍼티에 접근할 수 있다. 점 표기법: obj.property 대괄호 표기법 obj["property"]. 대괄호 표기법을 사용하면 obj[varWit..
자바스크립트 기초 Hello, world! 웹 페이지에 자바스크립트 코드를 추가하기 위해 와 같이 삽입한다. 코드 구조 세미콜론은 생략할 수 있다. 하지만 세미콜론을 사용하는 것이 더 안전하므로 이를 기억하고 따르도록 한다. 주석 달기를 두려워하지 말라. 엄격 모드 자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔다. 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었다. 하위 호환성 문제 때문에 변경사항 대부분은 ES5의 기본모드에선 활성화되지 않도록 설계되었다. ‘use strict’ 가 스크립트 최상단에 오면 스크립트 전체가 모던한 방식으로 동작한다. 코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 된다. 변수와 상수 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 ..
Vue Lifecycle 출처: http://blog.martinwork.co.kr/vuejs/2018/02/05/vue-lifecycle-hooks.html
Life Cycle 변화 (v16.3) 출처 : https://medium.com/@baphemot/understanding-react-react-16-3-component-life-cycle-23129bc7a705 [ Deprecated ] componentWillMount -> UNSAFE_componentWillMount 컴포넌트가 화면에 나가기 직전에 호출 componentDidMount 로 대체 [ Deprecated ] componentWillreceiveProps -> UNSAFE_componentWillreceiveProps 컴포넌트가 새로운 props를 받게됐을때 호출 새로 받게될 props는 nextProps로 조회 할 수 있으며, 이 때 this.props를 조회하면 업데이트 되기 전이다 getDerivedStateFrom..
setState에 객체 대신 함수 전달하기 기존 작성 코드 this.setState({ number: this.state.number + 1 }); const { number } = this.state; this.setState({ number: number + 1 }); 함수 전달 코드 this.setState( ({ number }) => ({ number: number + 1 }) );

티스토리툴바