3-1
🏹Array vs Object
얘네 왜쓰냐? 여러가지 자료를 한 곳에 저장하고 싶을 때 사용
Array는 인덱싱이 가능하다는 특징이
Object는 Key-Value 형태로 저장한다는 특징이 있다.
저장할때의 편리함과 인덱싱이 가능하단 점에서 Array도 장점이있고
저장 데이터가 많아지면, Key값으로 조금 더 쉬운 구분을 할 수 있는 Object도 장점이있다.
/* array 순서개념이 있음, array는 정렬, 자르기 등이 가능, 인덱싱가능*/
var car = ['소나타', 50000, 'white'];
/* object 순서개념이 없음, Key값으로 구분*/
var car2 = { name: '소나타', color: 'white', price: 50000 }3-2
🏹array, object에 대해서 조금 더 , 그리고 이거 왜 쓰냐?
var car2 = { name: '소나타', price: [50000, 40000, 3000] }
console.log(car2);위 코드를 출력해보면
위 처럼 나온다.
var car2 = { name: '소나타', price: [50000, 40000, 3000] }
console.log(car2.price);위 코드를 출력하면?
위와 같이 나온다.
출력값에서 알 수 있듯, Array는 []로, Object는 {}로 시작한다.
웬만한 상황에서 들어맞으니 저런식으로 구분해보자.
Object안에 Array집어넣는건 보다싶이 가능하다.
그래서 이거 왜 배우냐?
실제사이트는 html이 항상 바뀌어야 하기 때문이다.
매일매일 변경하는 값에다가 '50000' 딱 박아놓으면 수정하기도, 찾기도 어렵다.
🏹Client Side Rendering vs Server Side Rendering
웹 서비스 개발하는 2가지 방식이다.
Client Side Rendering(이상 CSR)은 서버에서 빈 html과 데이터를 받아와 클라이언트가 가공
Server Side Rendering(이상 SSR)은 서버에서 완성된 html 파일을 넘겨주는 것이다.
각각의 장단점이 있다, 간단한 말로는 CSR은 서버가 편하고, SSR은 서버가 불편하다.
SSR(서버사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)의 차이점 비교
둘을 비교 한 좋은 글이 있어 첨부한다.
3-3
🏹문자 중간에 변수 편하게 넣기
우리는 보통 문자를 표현할때 '', 또는 ""을 많이 사용한다.
하지만 이 친구들은 띄어쓰기를 허용하지 않고
문자 중간에 변수를 삽입할때
let a = '해윙~';
let letter = '오호 ' + a + ' 배윙~';위와 같이 + 기호를 사용한다. 많은 +는 헷갈리고 가독성도 떨어진다.
이때 우리에겐 백틱 기호가 있다. 키보드 물결쪽에 있는 `` 요 친구다.
이 친구의 특징은 크게 2가지로
1. 띄어쓰기에서 자유롭다
2. 문자 사이 변수를 넣을때 ${}를 사용한다.
let a = '해윙~';
let letter = `오호 ${a} 배윙~`이렇게 해도 결과는 위 코드와 같다.
3-4
🏹select 인풋
input과 똑같다.
다만 사용자에게 입력을 받는 것이 아닌
option을 제공하여, 선택을 받는다.
1. input과 마찬가지로 chage 이벤트 발생
2. input과 마찬가지로 value()값 가져올 수 있음
3-5
🏹자바스크립트로 html 생성하기
왜 배우냐? 하드코딩으로 짠 코드는 확장성이 약하다.
이를테면, 셔츠의 사이즈가 95, 100으로 되어있는데 이걸 85, 90으로 변경해야한다면?
하드코딩한 코드는 찾고, 변경해야한다.
코드가 길어지면 길어질수록 한계점이 온다. 그래서 서버에서 받아온걸 개수에 맞게 처리하는 과정을 배울 필요가 있다.
var a = '<p>안녕</p>';
/*추가*/
$('#test').append(a);
/*변경*/
$('#test').html(a);3-6
🏹forEach, for in, arrow function
let pants = [28, 30, 32, 34, 36, 38];
let shirts = [95, 100, 105];
$('.form-select').change(function () {
selected = $('.form-select').val();
if (selected == 'shirts') {
$('.form-select').eq(1).css('display', 'block');
$('.form-select').eq(1).html('');
for (let i = 0; i < shirts.length; i++) {
let optionTag = `<option>${shirts[i]}</option>`
$('.form-select').eq(1).append(optionTag);
}
} else if (selected == 'pants') {
$('.form-select').eq(1).css('display', 'block');
$('.form-select').eq(1).html('');
pants.forEach( (data) => {
let optionTag = `<option>${data}</option>`
$('.form-select').eq(1).append(optionTag);
})
} else {
$('.form-select').eq(1).css('display', 'none');
}
});지금까지의 실습코드를 다양한 방식을 사용해 만들었다.
먼저 forEach문!
왜 쓰냐? 배열을 한바퀴 쫙 돌때 사용한다.
첫 파라미터론 배열 인덱스 번호의 데이터
두번째 파라미터론 배열 진행 번호(0~)
그냥 for문이 아주 조금 더 성능이 좋다고 한다.
for in문!
let obj = { name: 'kim', age: 20 }
for (let key in obj) {
console.log(obj[key]);
}for in문은 객체의 key값을 순회한다.
arrow function!
/*일반 함수*/
function(data) {
}
/*화살표 함수*/
(data) => {
}위와 같은 표기 차이가 있고, 가장 큰 차이는 'this'의 차이다.
function 사용 시, 함수 내부에 this가 정의되고
arrow function 사용 시, 함수 외부의 this가 정의된다.
3-7
🏹Ajax
- Ajax 왜 쓰냐? 서버랑 데이터를 주고받고 하려고
- 그럼 서버가 뭔데? 유저가 데이터를 달라고 요청하면 데이터를 주는 간단한 프로그램
- 근데 그냥 달라고 떼쓰는게 아니라? 1.어떤 데이터인지 url로 기재 2. 방식(GET/POST)기재
- GET : 서버에 있던 데이터를 읽고싶을때 POST : 서버로 데이터를 보내고싶을때
🏹그래서 Ajax장점이 뭔데?
- 근데 이제 Ajax를 사용하면 새로고침 없이 데이터를 받아올 수 있다
- 그리고 jquery를 이용하면 자동으로 문자로 변환해준다.
if (url != null) {
$.get(url).done((data) => {
appendCard(data);
}).fail(function () {
console.log('실패');
})
}위 코드처럼 url을 입력받고 성공 시 appendCard함수를, 실패시 실패 로그를 띄우는 로직을 작성한다.
function appendCard(data) {
data.forEach((a) => {
$('.row').append(
`<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${a.title}</h5>
<p>가격 : ${a.price}</p>
</div>`);
});
};그리고 이건 appendCard함수이다. 카드 UI를 추가하는 코드인데
앞서배운 forEach문을 통해 배열의 전체순회하며 배열의 타이틀과 가격을 속성으로 집어넣는 모오습이다.
보다시피 데이터가 배열형태로(가장 앞 괄호를 보면 알 수 있다) 돼 있기 때문에
각 해당 배열을 순회하면 객체형태의 요소들을 볼 수 있따.
