실제 웹서비스 개발할 땐 2개 방식이 있는데

그냥 누가 내 사이트로 접속하면 html 이쁘게 만들어서 보내주는걸 웹서비스라고 합니다.

근데 html을 누가 완성하는지에 따라 개발방식의 차이가 있습니다.

1. 서버에서 html을 미리 완성해서 고객에게 보내줌

이걸 server-side rendering 이라고 합니다.

2. 서버가 비어있는 html과 데이터만 보내줌

그리고 자바스크립트를 이용해서 고객 브라우저안에서 html을 완성합니다.

이걸 client-side rendering 이라고 합니다.

요즘은 2번이 유행이라 우리도 데이터를 서버에서 가져와서 데이터바인딩하는 방법을 배우고 있는 것입니다.

근데 데이터바인딩하는 문법이 너무 길고 복잡하기 때문에 작은 사이트는 쌩 자바스크립트 써도 커버가능한데

큰거 만들 땐 사람들이 라이브러리 설치해서 쓰는 것입니다.

jQuery, React, Vue 이런거 사용하면 코드가 짧아집니다.

더 최근엔 2번에 질려서 또 1번으로 돌아가는 움직임이 있습니다.

각각 장단점이 있음

이벤트에서 target과 currentTarget의 차이

currentTarget : 이벤트 리스너가 달린 요소
target : 실제 이벤트가 발생하는 요소

for in , for of

for ...in

for ...of

입니다.

둘다 반복문으로 사용 되는데요 하나는 객체를 탐색하고 나머지 하나는 배열 요소를 탐색합니다.

for ...in (객체 순환)
var obj = {
a: 1,
b: 2,
c: 3
};

for (var item in obj) {
console.log(item) // a, b, c
}
위처럼 객체의 프로퍼티가 나오는것을 확인해 볼 수 있습니다.
만약 for ...of 를 쓴다면?

var obj = {
a: 1,
b: 2,
c: 3
};

for (var item of obj) {
console.log(item) // Uncaught TypeError: obj is not iterable
}
에러가 나는군요.

for ...of (배열 순환)
var arr = [1, 2, 3];

for (var item of arr) {
console.log(item); // 1, 2, 3
}
배열 순환이 아주 잘 되는군요.
그렇다면 for ...in 을 하게 되면 어떻게 될까요?

var arr = [1, 2, 3];

for (var item in arr) {
console.log(item); // 0, 1, 2
}
사실 자바스크립트에서는 배열도 객체이기 때문에 그 객체의 키값에 해당하는게 나오는데요. 배열로 따지면 index라고 생각하면 되겠네요.

즉, 두가지로 요약할 수 있겠는데

for ...in // 객체 순환
for ...of // 배열 값 순환