CodingCredit

CLASS ? 클래스는 연관있는 데이터들을 한데 묶어 놓는 컨테이너라고 말할 수 있다. 또한 클래스는 속성(fields, data)과 행동(methods)로 구성되어 있는데, methods없이 fields,data만 갖고있는 클래스들을 data class라고 한다. 클래스를 틀이라고도 설명하는데, 붕어빵을 예로들면, 붕어빵틀(클래스)에 팥(데이터)를 넣으면 팥붕어빵(오브젝트, 정확히는 인스턴스)가 생성된다. 이처럼 클래스에 데이터를 넣으면 오브젝트가 되는데, 이렇게 오브젝트가 메모리에 올라가는 것을 인스턴스화 되었다고하고 이 오브젝트를 인스턴스라고 한다. class Person { constructor(name,age){ //fields this.name = name; this.age = age; } /..

solo week때 곰곰이 내 공부 흔적들을 살펴보니, Github에 너무 소홀했다는 생각이 들어 최근 알고리즘이나 스플린트 과제를 보완해서 커밋중이었는데 마침 Github을 사용한 협업 스플린트가 진행되어 기분이 좋다.😃 Git commit은 기능별로, 메세지는 친절하게 쓰자 Git commit은 기능이나 스타일 등, 서로 겹치지 않게 하나를 끝내면 바로바로 commit하는 게 좋다. commit message는 바로 어떠한 커밋인지 알 수 있도록 친절하게 작성하자. 아래와 같이 앞에 commit 종류를 붙여 분류해주면 좋다. [INITIAL] — repository를 생성하고 최초에 파일을 업로드 할 때 [ADD] — 신규 파일 추가 [UPDATE] — 코드 변경이 일어날때 [REFACTOR] — 코..

개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다. (라고한다.) 예를들어 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하는 경우가 그렇다. 이런 경우 유용한 것이 바로 new연산자와 생성자 함수이다. About 생성자 함수 생성자 함수와 일반함수에 기술적인 차이는 없다. 다만 생성자 함수는 다음 두 관례를 따른다. 함수 이름은 일반명사로 짓는다. 함수 이름의 첫 글자는 대문자로 시작한다. 반드시 new연산자를 붙여 실행한다. function User(name) { // this = {}; (빈 객체가 암시적으로 만들어짐) // 새로운 프로퍼티를 this에 추가함 this.name = name; this.isAdmin = false; this.sayHi = function()..

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..