자바스크립트 정리

구조 분해 할당 

밑에는 구조 분해 예전과 현재 사용하는 걸 비교해보았다. 

// 이러한 상황이 많이 옴
const example = { a:123, b: {c:135, d: 146 }
const a = example.a;
const b = example.b.d;

// 그래서 새로운 문법이 나옴
const { a, b: { d } } = example;


// 기존
arr = [1, 2, 3, 4, 5]
const x = arr[0]
const y = arr[1]
const z = arr[4]

// 지금 
const [x, y, .... , z] = arr;

 

객체를 사용하고 있을 때 만약 this를 사용하고 있으면 구조 분해하면 this를 사용하고 있는 쪽에서 문제가 발생하니 사용하면 안 된다.

 

클래스 

클래스가 예전 프로토타입이기 때문에 알아두어야 한다. 즉 프로토타입을 깔끔하게 작성할 수 있는 문법이다. 

 

프로토타입

'첫 글자 대문자로 선언'

'static 매소드 선언'

'instance 매소드 선언'

각각 따로 선언.

상속하려면 부모로부터 apply  + 각각의 오브젝트 create

 

클래스 

'첫 글자 대문자로 선언'

'static 매소드 선언'

'instance 매소드 선언'

한 번에 선언 (그룹이라는 것을 한번에 알 수 있음)

extends로 상속 선언 (super로 부모 쪽 매소드 사용 가능 )

 

딱 보면 클래스가 엄청나게 편해졌다. 

 

프로미스

내용이 실행되었지만 결과를 아직 반환하지 않은 객체라는 의미 (필요한 이유 == 코드를 분리할 수 있음) 콜백 헬 방지

-> 함수를 가지고 있다가 then, catch를 붙이면 결과를 반환함

실행이 완료되지 않았으면 완료된 후에 Then 내부 함수가 실행됨

Resolve(성공리턴값Resolve(성공 리턴 값) -> then으로 연결

Reject(실패리턴값Reject(실패 리턴 값) -> catch로 연결

Finally 부분은 무조건 실행됨

 

Promise.resolve(성공리턴값): 바로 resolve 하는 프로미스

Promise.reject(실패 리턴 값):

 

Promise.all(배열): 여러 개의 프로미스를 동시에 실행

하나라도 실패하면 catch로 감

allSettled로 실패한 것만 추려낼 수 있음 

 

-> then 이 너무 많이 잘 수 있음 그래서 밑에 문법 나옴

 

async/await

async function의 도입   ( 오른쪽에서 왼쪽으로 코드를 봄 )

변수 = await 프로미스;인 경우 프로미스가 resolve 된 값이 변수에 저장

변수 await 값;인 경우 그 값이 변수에 저장

const promise = new Promise(...)

promise.then((result) => ...)

// 가능
const result = await promise

// 불안하다면 이렇게 써도됨
async function main(){
	// reject( 실패)의 경우를 처리 할 수 없어서
    try{
		const resuly = await promise;
    	return resuly;
    }catch (error){
    	console.log(error)
    }
}

// return 이 있을 경우 이렇게 두가지 방법이 있음
main().then((name) => ...)

const name = await main()

프론트엔트 

 

서버로 요청을 보내는 코드

라이브러리 없이는 브라우저가 지원하는 XMLHttpRequest 객체 이용

AJAX 요청 시 Axios 라이브러리를 사용하는 게 편함.

HTML에 아래 스크립트를 추가하면 사용할 수 있음

 

axios.get('주소')
	.then((result) => {
    	console.log(result);
    })
    .catch((error) => {
    	console.log(error);
    });

이런식으로 사용가능

 

POST 사용할 때(데이터를 담아 서버로 보내는 경우)

 

HTML form 태그에 담긴 데이터를 AJAX 요청으로 보내고 싶은 경우

FormData 객체 이용

 

FormData 메서드

Append로 데이터를 하나씩 추가

Has로 데이터 존재 여부 확인

Get으로 데이터 조회

getAll로 데이터 모두 조회

delete로 데이터 삭제

set으로 데이터 수정

 

 

 

가끔 주소창에 한글 입력하면 서버가 처리하지 못하는 경우 발생

encodeURIComponent로 한글 감싸줘서 처리

 

URL = 서버에 있는 파일의 위치

URI =  서버에 있는 자원의 위치 <- 요즘 이걸 주로 씀 

 

HTML 태그에 데이터를 저장하는 방법

  서버의 데이터를 프런트엔드로 내려줄 때 사용

  태그 속성으로 data-속성명

  자바스크립트에서 태그.dataset.속성명으로 접근 가능

       data-user-job -> dataset.userJob

       data-id -> dataset.id

  반대로 자바스크립트 dataset에 값을 넣으면 data-속성이 생김

       dataset.monthSalary = 10000 -> data-month-salary=“10000”

 

 

코드 주석화는 생활화하자..