arr.splice()

만능 맥가이버 칼 같은 느낌이다.
삭제 뿐만 아니라 배열에 요소 추가까지 가능하다.

arr.slice()

splice()와 유사하게 동작하지만,서브 문자열 대신 서브 배열을 반환한다는 점이 다르다.
배열의 복사본을 만들때 주로 사용한다. 여기서 복사본이란 참조를 한다는것이 아닌, 기존 배열을 카피한 아예 새 것의 배열을 뜻 한다.

객체란?

객체는 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다.

자바스크립트 객체의 중요한 특징

존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다.

어떤식으로 객체에 접근 할 수 있을까?

• 점 표기법: obj.property
• 대괄호 표기법 obj[“property”]: 대괄호 표기법을 사용하면 obj[varWithKey]같이 변수에서 키를 가져올 수 있다.

객체 지향 프로그래밍

객체를 사용하여 개체를 표현하는 방식 (Object Oriented Programing)

모던 Javascript를 보며 정리했습니다.

babel은 약간뗄래야 뗄 수 없는 사이..?인거같다..

babel?

babel은 트랜스파일러(transpiler)로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔준다.(JS Es6언어를 Es5로 변환 시켜준다.)

이 밖에도 기능이 더 있는데, 대표적으로 build시 모든 console.log()코드들을 제거한 상태로 build할 수 있게하는 등 다양한 기능들이 내재되있다.

모던 Javascript를 보며 정리했습니다.

리액트로 javascript를 많이 만졌지만 javascript의 몇몇 개념들은 아직까지 아리송하다. 그 중 하나가 바로 콜백 함수이다.

콜백 함수?

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 나중에 호출(called back)하는 것이 콜백 함수의 개념이다.

이렇게 글로 늘여트려놓으면 콜백 함수가 뭔지 와닿지 않는다. 직접 코드로 만나보자.

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불린다.

Grid 간단 정링

1분 코딩님의 강의를 보고 간단하게 정리했습니다.

Grid 팁

Grid는 두 방향(가로-세로) 레이아웃 시스템이다. (2차원)
파이어폭스를 사용하면 조금 더 레이아웃을 편리하게 짤 수 있다.

자주 사용!

auto-fill 와 minmax로 미디어쿼리를 대체할 수 있다! (오..)

• repeat, minmax 함수
• auto-fill
• auto-fit

코드

• repeat,minmax함수 사용 예시
  (반복,최소최대값 설정)

grid-template-columns: repeat(3, minmax(220px, auto));

• auto-fill
  너비에 따라 요소를 자동으로 배치해준다.
  But! 전체 너비에비해 Element가 적으면 영역이 남는다. 이럴때 사용하는게 auto-fit.

grid-template-columns: repeat(auto-fill, minmax(220px, auto));

• auto-fit
  남는 여백을 알아서 채워준다.

grid-template-columns: repeat(auto-fit, minmax(220px, auto));