230601~02 day40~41 개념 정리

#230601 

form 관련 자바스크립트 실습 

서버와 통신
json(javascript object notation) : 1999년도에 object를 보고 만든 데이터 포멧
- 서버에서 통신으로 데이터를 전송하는 용도 
- 텍스트를 기반으로 하여 가벼움 
- 프로그램 언어나 플랫폼에 상관없이 쓸 수 있음 
- 모바일에서도 서버와 데이터 전송에 사용함
- 데이터를 직렬화하여 전송할 때 사용

자바스크립트 object ---> json
json ---> object

1. 오브젝트를 json으로 직렬화 
JSON.stringify(obj) {
	
	"key1" : "value",
	"key2" : "value",
}
---> 확장자 .json 으로 저장됨

2. json을 오브젝트로 변환 
JSON.parse(json)



#230602

에러가 발생되면 스크립트는 중단되고 콘솔에 에러가 출력됨 
- try catch를 사용하면 스크립트 중단 방지, 에러 처리 가능 (런타임에러, 예외)


try {
	// 에러 발생 확률 코드 
} 
catch( error / e / 에러객체 ) {
	// 에러 처리 
}


1) try{} 코드 실행
 
2) 에러가 없으면 try 마지막 줄까지 실행되고, catch블록은 건너뜀

3) 에러가 있으면 try 안의 코드 실행이 중단되고, catch블록으로 제어 흐름이 
넘어감, 변수는 무슨 에러가 일어났는지에 대한 설명이 담긴 에러 객체가 전달됨

4) 에러 객체 프로퍼티 
- name : 에러 이름 
- message : 에러 상세 내용을 담고 있음


try {
	// 에러 발생 확률 코드 
} 
catch( error / e / 에러객체 ) {
	// 에러 처리 
}
finally {
	// 항상 실행 
} ------> 에러 처리 유무에 상관없이 실행 ??

try-catch 구문은 런타임 에러 처리만 가능한 구문 
(실행 도중에 발생 -> 동작 실행이 가능한 코드에만 작동 / 문법적으로 
잘못된 코드에는 작동하지 않음)


에러 객체 생성자 
Error
ex> let error = new Error(message);

SyntaxError
ex> let error = new SyntaxError(message);

ReferenceError
ex> let error = new ReferenceError(message);

TypeError
ex> let error = new TypeError(message);

throw 연산자 : 에러를 던짐 (발생시킴)
- throw 에러 객체
ex> throw new SyntaxError("이름이 없음");


fetch : 네트워크 요청 
- 서버에 네트워크 요청을 보내고 정보를 받아옴 

AJAX (Asynchronous Javascript Aand Xml)
: 서버에서 추가 정보를 비동기적으로 가져올 수 있게 해주는 포괄적인 기술로, 
이를 바탕으로 fetch가 만들어짐 


css 변수 설정 

ex>
div {
	background: var(--maincolor);
}
h1 {
	color: var(--maincolor);
}
span { background: var(--maincolor); }


1. 변수 선언
:root {
	--color-a : #333;
}

2. 변수 사용 : var(변수명)
div {
	background: var(--color-a);
}


map() - 새로운 배열 리턴
ex> 
["<li></li>", "<li></li>", "<li></li>"]
join()을 쓰면 ul.innerHTML에 이걸 담을 수 있다

filter() - 배열 리턴 
find() - 해당하는 값 리턴