SASS는 기본적인 연산 기능을 지원한다. 레이아웃 작업시 상황에 맞게 크기를 계산하거나 정해진 값을 나눠서 작성할 경우 유용하다. 아래는 SASS에서 사용 가능한 연산자 종류이다.

중첩(Nesting)

SASS는 중첩기능을 사용할 수 있다. 상위 선택자의 반복을 피할수 있어 좀 더 편리하게 복잡한 구조를 작성할 수 있다.

정의

ECMAScript6(2015)에서 새로 추가된 비구조화 할당(Destructuring Assignment)이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)이다.

자바스크립트의 fetch 함수는 비동기 통신 API로써 서버에 네트워크 요청을 보내 새로운 정보를 받아올 수 있다. ES6부터 지원하며, 가독성이 매우 뛰어난 장점이 있다. 이곳을 클릭하면 JSON 데이터 화면이 나온다. fetch API를 이용해 이 JSON을 가져와 보자.

객체에 접근하여 property 추가하기

diplay

img 태그와 background-image

커밋 메시지는 타입, 제목, 본문(선택), 꼬리말(선택) 세 부분으로 작성한다.

브라우저(broswer)

자주 쓴 명령어 위주로 작성, 추후 계속 추가 예정

비동기처리와 콜백함수

1. 자바스크립트는 동기적인가 비동기적인가?

1)자바스크립트는 동기적이다. 호이스팅이 된 이후부터 코드가 작성된 순서대로 하나씩 동기적으로 실행한다. *호이스팅(Hoisting)이란? 자바스크립트에서 코드를 처리할 때 먼저 let 변수 등의 선언이나 function declaration을 최상단으로 띄운 후 코드를 읽는다. 이로 인해 let 변수의 경우 중복 선언 가능 등의 문제점이 야기 되자 ES6에서 let 이 추가되었다.

포트(Port)

자바스크립트에서 자주 쓰이는 배열 메서드 정리

TO DO LIST 만들기

조건

1. 버튼을 클릭했을 때 작성한 내용이 할일로 추가 된다.
2. 엔터키를 눌렀을 때 버튼을 클릭한 것과 동일한 효과 적용
3. 작성된 리스트를 더블 클릭하면 밑줄이 그어진 후 서서히 삭제된다.
4. 입력창에 마우스 클릭 시 공란이 되게 한다.

데이터 타입

Array.reduce메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 이전 리턴값을 넘겨 받는다. 이전 값을 넘겨 받아 현재 값과 어떠한 작업을 수행하고 싶을 때 적합한 메서드이다. 인자 값이 다른 메서드와 약간 다르며, 콜백 함수 뒤에 인자를 하나 더 줄 수 있다. 이 인자는 첫 콜백함수의 이전 값으로 주입된다.

Array.some메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 하나의 요소라도 조건을 만족할 때 true를 반환하며, 만족하지 않을 때 false를 반환한다. 특정 조건을 만족하는지 알고 싶을 때 적합한 메서드다.

Array.filter메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 특정 조건에 맞는 요소만 모아 배열로 리턴한다. 특정 케이스만 필터링해서 추출할 때 유용하다.

Array.map 메서드는 Array.forEach와 마찬가지로 배열의 각 요소를 순회하며 콜백 함수를 실행한다. 다만, 콜백에서 리턴되는 값을 배열로 만들어낸다. 원본 배열은 건들지 않고 그 요소들을 사용해서 혹은 약간 변형해서 새로운 배열을 만들어야 할 때 유용하다.

Array.forEach 매서드는 배열 전체를 돌때, 요소마다 콜백 함수를 실행한다. 배열의 요소에 직접 어떠한 작업을 수행하고 싶을 때 적합한 메서드이다. Array.forEach 메서드는 리턴 값이 없다.