TIL) JavaScript - 코딩애플 Lv.3

oatraspberry·2023년 2월 4일
post-thumbnail

Array []

      let car = ['소나타', 50000, 'white'];
  • 순서 개념이 있다.
  • 자료.sort() - 가나다순 정렬되고
  • 자료.slice(x, y) - x번부터 y번 전까지 자르기
  • 자료.push(x) - x를 맨 뒤에 입력

Object {}

      let car2 = {name:'소나타', price:50000};
      car2.price = 60000;
      console.log(car2.price);
      
      car2['name'] = '그랜저'; // 자료 수정
	  console.log(car2['name']);
      
  • key:value 형태로 이름을 붙여서 저장해야 한다.
  • 순서 개념이 없다.

forEach 안에 파라미터 2개 생성 가능

  • 첫번째는 array안의 데이터
  • 두번째는 0부터 1씩 증가하는 정수

화살표 함수

function 키워드 대신 화살표(=>)를 사용한다.
익명 함수에서만 사용할 수 있다.
매개변수가 없을 때 =>로 함수 선언하기
중괄호 안에 식이 하나뿐인 경우 return문을 생략할 수 있다.

화살표 함수를 쓰면 함수 안의 this 뜻이 달라질 수 있다.
화살표 함수 안에서 쓰면 바깥에 있는 this를 그대로 가져다 쓴다.

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않는다.
화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져온다.

서버와 데이터 주고 받는 법

서버 server

데이터를 달라고 하면 데이터를 보내주는 프로그램
get - 데이터를 읽을 때
post - 데이터를 보낼 때

get/post 요청하면 브라우저 새로고침 된다.

ajax

새로고침 없이 get, post 요청하는 기능
-> ex) 상품 더보기,

ajax로 GET 요청하는 법

$.get('url').done(function() {
        
      });

fetch

fetch('url')
	.then(res => res.json())
	.then(data => {
		console.log(data)
	})
	.catch(error => {
		console.log(error)
	})

서버와 유저는 문자 자료만 주고 받을 수 있다.
object와 array를 보내고 싶다면 따옴표를 쳐서 문자처럼 만들어야 한다.
ex) "{"price" : 5000 }" (json 형태)

axios 라이브러리

array 정렬

array.sort(); // 문자순으로 정렬, 원본 변형O

array.sort(function(a, b) { // a, b는 array 안의 자료
return a - b // return 오른쪽이 양수면 a를 오른쪽, 음수면 b를 오른쪽으로 보낸다.
}); // 숫자 오름차순으로 정렬

array.sort(function(a, b) {
return b - a
}); // 숫자 내림차순으로 정렬

let newArray = array.filter(function(a) {
return 조건식
}); // 원하는 자료만 필터링, 원본 변형X

let newArray = array.map(function(a) {
return a * 숫자
}); // 자료 전부 변형O

브라우저 안에 몰래 데이터 저장하기

Local Storage, Session Storage

key:value 형태로 저장 가능, 용량은 5MB, 문자/숫자만 저장할 수 있다.
Local Storage는 사이트 재접속해도 유지가 되고(반영구적 데이터 저장), Session Storage는 사이트 나가면 자동으로 삭제된다.

저장 - localStorage.setItem('이름', '값');라고 적으면 된다.
불러오기 - localStorage.getItem('이름');
삭제 - localStorage.removeItem('이름');
수정하려면 1. 자료를 꺼낸다. 2. 꺼낸 걸 수정한다. 3. 다시 넣는다.

localStorage에 array, object 저장하려면 JSON 형태로 저장하면 된다.

let arr = [1,2,3];
let newArr = JSON.stringify(arr);

localStorage.setItem('num', newArr);

array/object -> JSON => JSON.stringify()
JSON -> array/object => JSON.parse()

  • IndexedDB - 구조화된 대용량 데이터 저장 시에 사용
  • Cookies - 로그인 정보 저장
  • Cache Storage - html, css, js 파일 저장하는 곳.
profile
개발자가 될테야

0개의 댓글