본문 바로가기

전체 글291

생성자 함수와 상속 개, 고양이처럼 type, name, sound (종류, 이름, 짖는 소리)에 따라 만들고 싶다면? function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); }; }; const dog1 = new Animal("개", "멍멍이", "멍멍"); dog1.say(); const dog2 = new Animal("개", "시바견", "머엉머엉"); dog2.say(); 공통으로 사용되는 say를 일반화 하고 싶다면? function Animal(type, name, sound) { this.type = type; .. 2020. 6. 27.
객체, 배열의 내장함수 정리 객체 내장함수 let obj = { name: 'bob', id : 1 } 를 기준으로 설명한다. 속성 이름으로만 이루어진 ["name" , "id"] 데이터를 얻고 싶다면? Object.keys(obj); 속성 값으로만 이루어진 ["bob", 1] 데이터를 얻고 싶다면? Object.values(obj); 속성별 배열로 이루어진 [["name", "bob"], ["id", 1]] 데이터를 얻고 싶다면? Object.entries(obj); 문자열에서 obj.name 값을 사용하고 싶다면? `my name is ${obj.name}` 배열 객체 내장함수 let arr = [1, 2, 3, 4, 5]; 를 기준으로 설명한다. 선언된 함수를 이용해 모든 배열 값을 출력하고 싶다면? function print.. 2020. 6. 27.
javascript 추가 기능 arrow function IE에서 지원하지 않는다. babel을 사용해서 ES5로 버전다운을 시켜주어야한다. 사용 방법은 ( parameter list ) => { function body } 와 같다. this를 사용할 수 없다. 구조 분해 할당 IE에서 지원하지 않는다. babel을 사용해서 ES5로 버전다운을 시켜주어야한다. 사용 방법은 { key1, key2} = obj; 와 같은 방식이다. switch switch 지원한다. getter, setter obj.property_name 을 사용할 수 있는데 해당 obj에 get property_name(){ } 이 정의되어 있다면 get에 해당하는 부분을 실행한다. 아래와 같이 사용 가능하다. let obj = { _name: "멍멍이", get.. 2020. 6. 27.
CSS Flex 블락 엘리먼트를 가로로 배치하려면 어떻게 할까? 레이아웃을 짜다 보면 박스들에 대한 정렬이나 위치 조정이 굉장히 복잡할 때가 있다. 블락 엘리먼트를 가로로 정렬할 때 float을 사용하고 clear해주는 방식을 써봤을텐데 이런 것을 굉장히 쉽게 해주는 것이 flex이다. box 모델에서 block과 inline을 배웠고 flex를 배워보도록 하자. flex 기본 예제 A, B, C가 div인데 가로로 배치된 것을 볼 수 있다. 세로 길이는 꽉 채워진 상태임을 알 수 있다. .box에 display를 flex로 설정하였다. 그러니 자식 요소들은 블락 요소임에도 가로로 배치가 되었다. flex의 자식요소는 item이라고 부른다. 위를 보면 item의 배치는 가로로 배치되며 왼쪽에서 부터 차곡차곡 배치된다. .. 2020. 6. 22.