🟨 JavaScript

[코딩애플] Local Storage 사용법 (Session Storage, IndexedDB, Cookies, Cache Storage)

브라우저 안에 유저 몰래 데이터를 저장할 수 있다. F12 개발자 도구에서 Application(애플리케이션) > Storage(저장용량) 카테고리를 보자. 1. Local Storage key : value 형태로 데이터를 저장할 수 있다. 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능) 사이트를 재접속해도 유지된다. 2. Session Storage key : value 형태로 데이터를 저장할 수 있다. 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능) 사이트를 나가면 삭제된다. 3. IndexedDB 구조화된 대용량데이터를 저장한다. 3. Cookies 유저의 인증정보(로그인정보 등)를 저장한다. 4. Cache..

Level 3 : 5~8 (ajax, json, array, sort)

5. 카드레이아웃에 데이터를 불러와 카드 3개 생성하기 원시자바스크립트버전 let cardWrap = document.querySelector('.row'); let products = [ { id : 0, price : 70000, title : 'Blossom Dress' }, { id : 1, price : 50000, title : 'Springfield Shirt' }, { id : 2, price : 60000, title : 'Black Monastery' } ]; products.forEach(function(a, i){ let card = ` ${products[i]['title']} ${products[i]['price']} ` cardWrap.insertAdjacentHTML('bef..

[코딩애플] ajax로 서버와 데이터 주고받기 (1)

서버에 요청하는 법 어떤 데이터인지 url을 제대로 작성한다 (틀린 url로 요청시 404error가 뜬다) 어떤 방법으로 요청할지 결정한다 (GET/POST .. PUT, DELETE 등) GET GET 요청은 서버에 있던 데이터를 읽고 싶을 때 주로 사용한다. 브라우저 주소창에 url을 적으면 그곳으로 GET 요청을 날린다. POST POST 요청은 서버로 데이터를 보내고 싶을 때 주로 사용한다. POST 요청을 날리고 싶으면 form 태그 + method="post" + action="url"을 이용하면 된다. GET과 POST는 요청하면 브라우저가 새로고침된다. AJAX 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능이다. (ex. 댓글을 서..

[mdn, 코딩애플 등] for, forEach, for in

for 일반적으로 지정된 횟수만큼 반복할 때 사용한다. 예를 들어 배열의 인덱스를 기반으로 반복을 수행해야하는 경우에 사용할 수 있다. forEach forEach문은 배열을 순회할 때 사용한다. forEach문은 배열의 각 요소에 대해 함수를 실행한다. forEach문은 첫번째 파라미터인 element를 기준으로 index를 받아오기 때문에 index로 array에 접근하는 것은 비효율적이다. 또한 break, continue 등의 제어문을 사용할 수 없다. 화살표함수 버전/일반버전 화살표함수를 쓰면 함수 내의 this값을 바깥에서 가져와 쓰기 때문에 주의. const array = ['a', 'b', 'c']; array.forEach(element => console.log(element)); co..

Level 3 : 4 (array, object, forEach)

4. 바지 선택하면 array에 저장한 바지사이즈 셀렉박스 만들기 조건 바지를 선택하면 array에 입력한 데이터가 사이즈 셀렉박스에 자동으로 추가되어야 한다. 틀린 풀이 상품 선택 모자 셔츠 바지 100 let pants = [28, 30, 32]; let selectBox = document.querySelector('.form-select'); let selectSize = document.querySelector('.form-popup'); function pantsSize() { if (selectBox.value == '바지') { selectSize.classList.remove('form-hide'); for (i = 0; selectSize.length = pants.length; i++..

Level 3 : 1~3 (array, object)

1. object 자료형에 넣은 데이터를 html에 데이터바인딩하기 var car2 = {name: '소나타', price: 50000} document.querySelector('.card > span:first-child').innerHTML = `${car2.name}`; document.querySelector('.card > span:last-child').innerHTML = `${car2.price}`; 2. object 자료형에 넣은 'array 데이터'를 html에 데이터바인딩하기 var car2 = {name: '소나타', price : [50000, 3000, 4000]} document.querySelector('.car-price').innerHTML = `${car2.price[..