class class- 특별한 함수. 호이스팅 되지 않는 것 처럼 동작- 몸체에는 메소드만 선언 할 수 있음- 선언과 초기화는 반드시 constructor 내부에서 실시 constructor- 인스턴스를 생성하고 클래스 프로퍼티를 초기화하기 위한 특수한 메소드- 클래스 내에 한개만 존재 할 수 있으며 생략할 경우 constructor(){} 를 포함한 것과 동일하게 동작 ⇒ new 연산자로 인스턴스를 생성할 때 함께 호출한 것이 바로 constructor EX 1 getter- 메소드 앞에 get 키워드를 사용해 정의- 메소드 이름을 클래스 프로퍼티 이름처럼 사용 - 파라미터가 없어야하며 무언가를 반환해야 함 setter- 메소드 앞에 set 키워드를 사용해 정의- 한개의 파라미터만 가질 수 있음- 프로퍼티처럼 값.. object / arrow function / spread / rest / default object- 메소드의 function을 생략할 수 있음- 변수명과 속성명이 같은 경우 생략가능 EX 1 EX 2 arrow function- 화살표 함수는 prototype 프로퍼티를 가지고 있지 않음 -> 생성자 함수로 사용할 수 없음- 화살표 함수는 arguments 객체를 가지고 있지 않음 EX 3 EX 4 EX 5⇒ 화살표 함수는 자신을 포함하고 있는 상위 컨텍스트로부터 this를 계승 받는다.⇒ 메소드로 정의한 화살표 함수 내부의 this는 상위 컨택스트인 window 객체를 가리킨다.그러므로 화살표 함수로 메소드를 정의하는 것은 피해야 한다. spread 연산자- 연산자의 대상을 개별 요소로 분리함 EX 6 rest연산자- 나머지를 할당 받는 배열- 그러므로 반드시 마지막에 위치해야함 EX .. let / const let, const 공통- 블록 단위의 유효 범위를 갖음- 전역 스코프에서 선언시 var와는 다르게 전역객체(window)의 프로퍼티는 되지 않음- 재선언 불가능 EX 1 const- let은 재할당 가능하지만 const 는 재할당이 불가능- object, array의 경우 레퍼런스 변수이기 때문에 메모리 주소값이 변경되지 않는 작업은 가능- const는 반드시 선언과 동시에 값을 할당해야 함 EX 2 결론- 기본적으로는 const를 사용- 재할당이 필요한 경우에만 let을 사용- ES6을 사용한다면 var 키워드는 사용하지 않음 ⇒ 참고 : airbnb 자바스크립트 스타일 가이드 javascript prototype 자바스크립트 프로토타입 프로토타입 객체- 생성자 함수를 통해 생성된 모든 객체의 원형이 되는 객체- constructor 속성 : 생성자 함수 그 자체를 가리킴 prototype 프로퍼티- 함수만 가지는 속성- 프로토타입 객체를 참조 EX 1⇒ 함수인 funcTest 는 prototype 속성을 가지고 있다. __proto__ 프로퍼티- 모든 객체가 가지고 있는 속성- 부모 객체의 프로토타입 객체를 참조 EX 2⇒ 자바스크립트는 함수도 객체이므로 둘다 __proto__ 속성을 가지고 있다. EX 3⇒ A.prototype.x 에서 에러가 난다. 아래 그림을 참고하면 이해가 쉬울 듯 ( 그림에서는 명시적으로 A객체에만 표시했지만 모든 객체는 __proto__ 속성을 가지고 있다.) EX 4⇒ A의 부모객체는 foo이기 때문에 A.. white-space / text-overflow white-space- 공백을 어떻게 처리할지 설정- line break(줄바꿈) , tab(들여쓰기), space(띄어쓰기) 로 인해 공백이 만들어짐- HTML에서는 1개 이상의 연속된 띄어쓰기는 1개의 띄어쓰기로 표시된다. (그 이상은 를 사용해야함) 속성값 line break tab/space 자동 줄바꿈 normal(기본값) 무시 1번 O nowrap 무시 1번 X pre 반영 그대로 X pre-wrap 반영 그대로 O pre-line 반영 1번 O EX 1 normal EX 2 nowrap EX 3 pre EX 4 pre-wrap EX 5 pre-line text-overflow- 요소에서 자동줄바꿈 되지 않은 텍스트(영역을 벗어난 텍스트)를 어떻게 처리할지 설정- overflow 값이 visi.. css selector (선택자) :first-child / nth-child / nth-of-type :first-child- 해당 요소가 가장 첫번째 자식인가를 판단 EX 1⇒ p 요소이면서 그 p 요소가 첫번째 자식에 해당하는 것은 복숭아 이므로 복숭아만 빨간글씨가 되었다. EX 2⇒ p 요소이면서 그 p 요소가 첫번째 자식에 해당하는 것은 없으므로 빨간색이 적용되는 요소는 없다. (복숭아는 p요소이면서 fruit 클래스를 가진 div의 두번째 자식이다.) :nth-child(n)- 해당 요소가 n번째 자식인가를 판단- 숫자 대신에 even, odd, 2n+1, ... 가능 EX 3⇒ p 요소이면서 그 p 요소가 3번째자식에 해당하는 것은 자두이다. p 요소이면서 그 p 요소가 짝수번째 자식에 해당하는 것은 복숭아, 체리이다. :nth-of-type(n)-해당 요소 중에서 n번째인가를 판단 EX 4⇒.. <form> method : get vs post GET- URL을 통해 데이터 name/value 쌍으로 전송 (개발자 도구에서 확인 가능)- 캐시 될 수 있음- 브라우저 히스토리에 남음- 북마크 될 수 있음- 보안이 필요한 데이터를 다룰때 사용하면 안됨- 길이에 제한이 있음- 데이터를 요청할 때만 사용됨- select적인 성향을 가지고 있음- 서버에서 데이터를 가져와서 보여주는 용도 (서버의 값이나 상태 등을 바꾸지 않음)- 게시판의 리스트, 글 보기, 페이지 검색, 조회 같은 기능- 전송 속도가 POST 보다 빠름 ⇒ 서버에 데이터를 요청하는 경우 사용 POST- http 바디를 통해 데이터를 전송- 절대 캐시되지 않음- 브라우저 히스토리에 남지 않음- 북마크 될 수 없음- 데이터 길이에 제한이 없음- 서버의 값이나 상태를 바꾸기 위해서 사용 ⇒ .. <button> vs <input> - type="submit" : 폼 전송- type="reset" : 폼 내용 초기화- type="button" : 기능 구현에 주로 사용. (자바스크립트 이용) ⇒ type 속성은 반드시 지정하는 것이 바람직하며 지정하지 않을 경우 submit 기능을 수행 - button 과 같은 타입을 명시할 경우 동일한 기능 수행( ⇒ ) w3schools 에서 설명하는 - Inside a element you can put content, like text or images. This is the difference between this element and buttons created with the element.⇒ 은 닫는 태그이므로 컨텐츠에 텍스트 뿐만 아니라 HTML요소도 받을 수 있다. - If yo.. 이전 1 2 3 4 5 다음