CodingCredit

About Arrow Function 화살표 함수는 항상 익명함수이다. 화살표 함수는 메소드 함수가 아닌 곳에 표현하는 것이 가장 적합하다. 따라서 생성자로서 사용할 수 없다. 화살표 함수라는 함수표현식이 생긴 2가지 이유 짧은 함수를 표현하기 위해서 화살표함수를 상용하면 짧은 함수를 간략하고 간단하게 표현할 수 있다. this를 바인딩하지 않기 위해서 화살표 함수가 나오기 전까지 모든 새로운 함수는 어떻게 그 함수가 호출되는지에 따라 자신의 this 값을 바인딩했다. 함수가 생성자인 경우: 새로운 객체 엄격모드 함수호출의 경우: undefined 함수가 '객체메서드'로서 호출된 경우: 문맥 객체 이러한 this의 바인딩은 객체지향 스타일로 프로그래밍을 할 때 많은 어려움을 준다. func..

애니메이션 애니메이션의 속성은 아래와같이 구성된다. animation-name : @keyframes 이름 (자유롭게 작성가능) animation-duratuion : 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용 animation-timing-function : 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier ) animation-delay : 애니메이션을 시작하기 전 지연시간 설정 animation-iteration-count : 반복 횟수 지정 animation-direction : 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며) animation-fill-mode : 애니메..

HTML_데이터속성 ( data-) data-속성은 요소의 확장 가능성을 염두에 두고 디자인되었다. ... js에서 접근하기 javaScript에서 data속성을 읽기 위해서 dataset 속성을 사용한다. var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars" CSS에서 접근하기 css의 속성선택자를 사용하여 데이터에 따라 스타일을 바꿀 수 있다. article[data-columns='3'] { width: 400px; } article[data-c..

이벤트리스너에 매개변수 전달하기 이벤트리스너로 함수를 실행하고자 할때, 원하는 매개변수를 넣는 방법! 함수에 바로 매개변수를 넣어서 이벤트리스너에 할당하면 함수가 바로 실행되므로 다른방법이 필요하다. 바로 익명함수! 익명함수를 사용하면 쉽게 해결할 수 있다. //아래의 함수를 이벤트 리스너에 할당하자. function test(user) { console.log(user.age); } //이벤트리스너에 함수가 할당되지 않고, 바로(클릭과상관없이) soon.age값이 바로 콘솔에 찍힌다. aElement.addEventListener('click', test(soon)); //이벤트리스너에 함수가 할당되어 정상적으로 작동! aElement.addEventListener('click&#..

논리연산자 ( with shortcut circuit) 이미지출처: mdn 논리연산자 이를 토대로, 단락평가(Shortcut circuit)를 할 수 있다. 논리 표현식을 좌측부터 평가하므로, 아래 규칙에 따라 단락(short-circuit) 평가를 수행한다. (거짓 표현식) && expr은 거짓 표현식으로 단락 평가됩니다. (참 표현식) || expr은 참 표현식으로 단락 평가됩니다. "단락"이란, 위 규칙에서 expr을 평가하지 않는다는 뜻이다. 단락 평가가 발생하는 원인은 첫 번째 피연산자를 평가한 순간 이미 연산자의 결과가 정해지기 때문이다. 예를들어 return order = order || 1 여기서 order값이 참이면 order값을 그대로 쓰고, order값이 거짓이면 1을 리턴하게된다. ..

HTML 개념과 append와 appendChild의 차이 HTML은 무엇인지 말로 설명할 수 있도록 해보자. HTML (Hyper Text Markup Language) 하이퍼텍스트는 뭐고, 마크업 언어는 또 뭐야? 하이퍼텍스트 하이퍼텍스트는 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다. 기존의 문서가 순차적이면서 서열형 구조라면, 하이퍼텍스트는 링크에 따라 그 차례가 바뀌는 임의적이면서 나열형인 구조를 가진다. 즉, 출판된 책처럼 작가의 의도대로 사용자가 따라가는 것이 아닌, 하이퍼링크로 연결된 문서들을 어떠한 행위(클릭)에 따라 자유롭게 이동할 수 있다. 이런 하이퍼텍스트의 등장은 검색엔진과 더불어 정보습득의 새로운 장을 인류에게 가져다 주었다. 웹이라는..