1. DOM (Document Object Model)
1) 개요
- Document (html 문서)
Object (JS 객체) - 사용자가 만든 html 문서를 웹브라우저가 렌더링 하기 위해서 html 내의 요소에 해당되는 객체 (HTMLButtonElement, HTLMAnchorElement)를 생성해서 메모리에 올리고 (DOM Tree) 메모리에 올라간 객체를 참조해서 관리하는 방법론
- 우리는 메모리에 올라간 JS 객체 (DOM)의 속성과 메서드를 활용해서 동적인 화면처리가 가능함
- DOM 접근 방법
document.querySelectorAll("css 선택자");
2) DOM의 값 종류
(1) 시작 태그와 종료 태그의 content (body)
예>
<p>홍길동</p>
<p><span>홍길동</span></p>
<div>홍길동</div>
<div><span>홍길동</span></div>- content 접근은 innerText / innerHTML 사용함
(2) input 태그같은 폼의 태그 값
- value 속성 사용
3) form 폼과 관련 내용 정리
(1) 기본 내용
- input 태그를 form 태그가 감싸고 있어야 전송이 된다 !!
<form action="target.html" method="get|post" id="myForm>
아이디 : <input />
<input type="submit" value="로그인">
<button> 로그인 </button>
<input type="button" value="로그인"> // submit이 안 됨 !!! JS 이용하면 가능 (f.submit();)
</form>(2) 동적으로 form의 속성값을 변경할 수 있다
var f = document.querySelector("myForm"); // HTMLFormELEMENT 객체
f.action = "http://www.google.com";
f.method = "get|post";
f.submit();(3) submit은 기본으로 동작됨. 하지만 기본 동작을 방지할 수 있다
(id, pw 입력 시 전송되도록 submit 방지)
event.preventDefault();4) 객체 분해 할당 (destrcturing) ★ * 301
- 리액트에서 많이 사용
(1) 배열 객체 분해 할당
const [변수,변수2]= [값,값2];
(2) JSON 객체 분해 할당 ★
const {key변수, key2변수}= {key:값, key2:값};
- 함수 호출시 객체전달 (배열|JSON)하면
함수 쪽에서 객체분해할당 문법으로 데이터를 얻을 수 있다 (*)
2. 클래스
1) 문법
(1) JS에는 접근지정자가 없다 (public, private...)
(2) class가 키워드가 됨
HTML에서는 < p class="X" > 태그 속성이 있음
React.js에서는 충돌되기 때문에 className을 사용한다 (< p className="x" >)
class 클래스명{
변수 // 메서드 및 생성자 내에서만 선언 가능. this.변수
메서드
생성자
}
(3) 클래스 작성 후에는 반드시 객체 생성해야한다
var 변수 = new 클래스명();
- 메서드명을 변수로 설정 가능
let xxx = "setName";
class Person{
[xxx](name){}
}(4) 메서드명 앞에 set/get 키워드를 지정하면 메서드가 아닌 변수처럼 동작한다
class Person{
get getName(){
return this.name;
}
p.getName;(5) 생성자 (constructor)
자바 : 클래스명으로 생성자를 작성
오버로딩이 가능
JS : constructor 명으로 생성자를 작성
단 한 번만 지정 가능
(6) 상속 (inheritance)
- extends 키워드 이용
- 부모 요소를 자식이 상속 받음 (생성자는 상속 X)
- 부모에서 선언된 변수는 반드시 부모에서 초기화해야된다 (super()이용)
- 메서드 재정의 가능 (overriding)
- static 메서드 지원 (클래스명.메서드 사용, 객체생성과 무관)
- generator 함수 사용 가능
예>
class Cat extends Pet{
constructor(name,age,gender){
super(name, age); // 부모에서 초기화 필수
this.name=name; // 에러발생
this.gender=gender;
}3. 모듈
1) 개념
- .js 파일 하나하나를 모듈이라고 부른다
- 여러 js 간에 접근해서 사용하는 방법
- import, export 사용
(import {요소, 요소2} from '경로';) - export default는 한 번만 할 수 있다
(import 요소 from '경로';)
4. 비동기
1) 동기 vs 비동기
(1) 동기
function fun(){
"1출력"
fun2(); function fun2(){ "2출력"} //1시간 작업
"3출력"
}
fun();
실행결과:
1출력
2출력
3출력 ( 1시간 이후에 출력됨 )(2) 비동기
function fun(){
"1출력"
fun2(); //비동기 function fun2(){ "2출력"} //1시간 작업
"3출력"
}
fun();
실행결과:
1출력
3출력
( 1시간 이후에 출력됨 )
2출력2) 비동기 만드는 방법
(1) Promise 객체 이용
- 문법: 함수를 작성할 때 Promise객체를 반환한다.
예>
#일반함수
function fun(){
}#비동기 함수
function fun(){
return new Promise(함수);
}(2) async/await 키워드 이용 ★
- 부적으로 Promise 사용됨
예>
#비동기 함수
async function fun(){
"1출력"
await fun2(); // await 함수가 실행이 끝날 때까지 fun() 실행을 중지시킴
"2출력"
}
var result = fun(); // result값이 Promise 객체이다5. AJAX
Asynchronous Javascript And Xml
- 비동기 + 자바스크립트 + Xml (데이터포맷의미, 현재는 JSON)
=> 클라이언트에서 JS 이용해서 서버와 비동기로 데이터 통신(JSON)을 하는 방식
1) 서버와 통신하는 2가지 방법
(1) 비 Ajax
요청 : a태그, 새로고침, 명시적인 url 입력, form의 submit
웹브라우저 ------------------> 서버
<------------------
응답 : html
* 응답을 html로 받으면 웹브라우저의 전체 화면이 reloading 된다 (깜빡거림)
* 1MB 되는 전체 html을 서버에서 받음 (네트워크 부하가 심하다)(2) Ajax
요청 : JS이용 (XMLHttpRequest 객체)
웹브라우저 ------------------> 서버
<------------------
응답 : JSON
예> {mesg:"logout"}
* 응답을 JSON으로 받으면 웹브라우저의 전체 화면이 reloading 안 됨 (깜빡임 X)
* 크기가 매우 작은 JSON 데이터를 받는다 (네트워크 부하가 적다)2) Ajax 구현
(1) 명시적인 XMLHttpRequest 사용
(OLD 방법, 사용 안 함)
(2) async + await + fetch() 이용 ★
cf) React.js에서 매우 많이 사용되는 코드 패턴
1. arrow 함수
2. 객체분해할당(특히 JSON )
3. async, await 이용한 비동기처리
==> 서버와 연동시 필수
-
fetch() 함수
==> 서버에 요청하는 함수
==> 일반적으로 async, await와 같이 사용. -
백티 사용
-
모듈
- import 및 export
-
Array객체 메서드
- map함수
- filter함수
- foreach함수
