📚 object.keys
: 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환한다. 즉, 객체의 키만 담은 배열을 반환한다.
object.keys(obj)
(obj) : 열거할 수 있는 속성 이름들을 반환 받을 객체
const array = ['a', 'b', 'c'];
console.log(Object.keys(array)); // 결과 : ['0', '1', '2']
📚 object.values
:전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 반환한다. 즉, 객체의 값만 담은 배열을 반환한다.
Object.values(obj)
(obj) : 배열로 변환할 열거 가능한 속성을 가지는 객체
const array1 = ['a', 'b', 'c'];
console.log(Object.values(array1)); // 결과 : [ 'a', 'b', 'c' ]
➕예제 다시➕
const object = {a : 'alligator', b : 'bear', c : 'cat' };
console.log(Object.keys(object)); // 결과 : [ 'a', 'b', 'c' ]
console.log(Object.values(object)); // 결과 : [ 'alligator', 'bear', 'cat' ]
📚 css와 sass (scss)
- CSS는 문서의 스타일을 구현하는 스타일 시트 언어이다.
➡ 프로젝트가 점점 커지고, 복잡해지면 스타일시트도 덩달아 커지고 관리할게 많아지며 복잡해진다. 이에 따라 유지보수도 당연히 힘들어진다.- 불필요한 선택자(Selector)많아짐
- 연산 기능의 한계
- 구문의 부재
- SCSS와 SASS는 이런 CSS의 단점을 보정하기 위한 추가 기능이 있고 CSS를 편리하게 이용할 수 있도록 도와주는 확장판 (CSS를 확장하는 스크립팅언어) 이다.
- 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
- CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
➡ 문법을 포함한 여러 차이점은 간단히 말하자면 {}(중괄호)와 ;(세미콜론)의 유무이지만 SASS보다 SCSS가 뒤에 나왔고 SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하기를 권장하고 있다.
✔ HTML
<ul class='list'>
<li>1</li>
<li>2</li>
<li>3</li>
</div>✔ CSS
.list {
width: 100px;
float: left;
}
li {
color: red;
background: url("./image.jpg");
}
li:last-child {
margin-right: -10px;
}✔SCSS
.list {
width: 100px;
float: left;
li {
color: red;
background: url("./image.jpg");
&:last-child {
margin-right: -10px;
}
}
}✔SASS
.list
width: 100px
float: left
li
color: red
background: url("./image.jpg")
&:last-child
margin-right: -10px📚 동기와 비동기
-
동기(Synchronous)
순차적, 직렬적으로 태스크를 수행한다. 즉, 요청을 보냈다면, 응답을 받아야 다음 동작이 이루어진다.
그러므로 모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기해야 한다.
➡ 데이터양이 많을 수록 실행속도는 저하된다. -
비동기(Asynchronous)
병렬적으로 태스크를 수행한다. 즉, 작업 종료 여부에 관계 없이 다음 작업을 실행한다.
📚 setTimeout
: 지정된 시간이 경과했을 때(일정 시간 후) 처리를 한번만 실행한다. = 타이머
window.setTimeout(func, dur)
func : 타이머가 만료된 뒤 실행되는 처리(함수)
dur : 주어진 함수 또는 코드를 실행하기 전에 기다릴 밀리초 시간 단위 (생략 or 0 일때 '즉시')
setTimeout(function()
{
console.log("2초후에 한번 실행됩니다.");
}, 2000 );📚 setInterval
: 기준 간격을 두고 주기적으로 이벤트를 발생 시키고 싶을 때 사용하며 즉, 결정된 시간 간격으로 반복 처리를 실행한다. = 타이머
window.setInterval (func, dur)
func : 실행되는 처리(함수)
dur : 시간 간격
setInterval(function()
{
console.log("2초 시간마다 계속 실행됩니다.");
}, 2000 ); 
📚 clearInterval
: setInterval로 반복하고 있는 것을 멈추게 하는 메소드이다.
clearInterval(setInterval로 생성된 변수)
let count = 0;
const re = setInterval(function() {
console.log('setInterval'); // setInterval가 총 5번 출력
count++; // count 0 ~ 5 까지 증가
if (count == 5) { // count가 5면
clearInterval(re); // 타이머 처리 중지
}
},1000) // 1초마다 갱신
📚 Promise
: 비동기 처리를 위해 callback을 사용해 왔지만 더 간편하게 처리하게 도와주는 객체이다. 정해진 장시간에 기능을 수행하고 나서 정상적으로 기능이 수행이 되었다면 성공의 메세지와 함께 처리된 결과값을 전달하고 기능을 수행하다가 예상치 못한 문제가 발생했다면 에러를 전달해준다.
promise가 생성되는 순간에 자동적으로 executor가 실행되기 때문에 조심해야한다.
new Promise((resolve, reject) => {statements})
reslove : 기능을 정상적으로 수행해서 마지막에 최정 데이터를 전달하는 콜백함수
reject : 기능을 수행하다가 중간에 문제가 생기면 호출 하게 될 콜백함수
statements : 처리 본체
📚 Promise.all
: 여러 비동기 처리를 병렬로 실행하고 모두 성공한 경우에 처리하는 메소드이다.
: 전달된 결과값이 배열로 전달된다.
Promise.all (promises)
promises : 감시할 Promise 객체들(배열)
// 프로미스 생성
const project = function(value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (value) { // 인수 value가 미정의인지 정의인지에 따라 resolve와 reject가 판정남
resolve(`입력값 : ${value}`);
}else{
reject('입력이 비어 있다');
}
}, 500); // 0.5초후에 실행된다.
});
}
// 프로미스 실행
project('백승민').then(
succcess => { // 성공했을 때 실행되는 처리 (성공 콜백 함수)
console.log(succcess);
},
failure => { // 실패 했을 때 실행되는 처리 (실패 콜백 함수)
console.log(`오류 : ${failure}`);
}
);
Promise.all ([project('백승민'), project('승민오빠'),project('우리오빠')]).then(
succcess => {
console.log(succcess);
},
error => {
console.log(`오류 : ${failure} `);
}
); 
📚async/await
-
async
: 함수를 선언할 때 붙여주는 키워드
: 리턴값은 무조건 Promise -
await
: Promise가 fulfilled가 되든지 rejected가 되든지 끝날 때까지 기다리는 함수
: async 함수에서만 사용할 수 있다.
📚try/catch
: 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정한다.
- catch 블록은 try 블록 안에서 예외가 발생(throw)하는 경우 무엇을 할지 명시하는 코드를 포함한다.
try 블록 (또는 try 블록 내에서 호출된 함수) 내의 명령문이 예외를 throw 하면 제어가 catch 블록으로 이동합니다.
try 블록에 예외가 발생하지 않으면 catch 블록을 건너뛴다. - finally 블록은 try 블록과 catch 블록(들)이 실행을 마친 후 항상 실행된다. 예외가 발생했는지에 관계없이 항상 실행된다.
const h = 1;
try {
h = h * g; // 예외 발생
} catch(e) { // try 블록에서 예외 발생할 경우, 처리는 catch 블록에서
console.log(e.message); // 결과 : g is not defined
} finally { // 불필요한 경우 생략해도 상관없다.
console.log('처리가 완료 되었다.'); // 예외 유무에 관계없이 실행, 결과 : 처리가 완료 되었다.
}
