Jquery

• 공식도큐먼트

  https://api.jquery.com/

plugin ...javascript loading

datetimepicker

• 공식 도큐먼트

  https://fotorama.io/

jquery로 사용시 손쉽게 html 요소를 제어할 때 사용하면 좋겠군

-집에 가서는 파일 다운로드 하기

https://kimgura.site/student.html

Vuejs

모델(데이터)를 변경하면 자동으로 UI에 반영된다. 그리고 그 변경되는 동작을 methods에 작성한다.

키값(){}로 함수 생성

• v-on:click="clicked"는 클릭하면 clicked 함수가 실행
  

• 키값(){} 으로 함수를 생성할 수 잇다.
  

  앞으로는 키값(){}로 작성하자(아마 이게 제일 많이 작성될 것이여...)

event.target

• div의 클래스 요소로 추가되었고 click하면 clicked 함수가 실행
  
• 위에서 clicked 함수가 등록되었기에 클릭하면 event.target는 각 div의 요소가 된다.
  

  이벤트가 발생한 곳의 무엇가 데이터를 얻고싶거나 제어하고 싶을 때 event를 사용하자.

.prevent

.prevent는 기본 동작을 막는다.

폼데이터를 서버에 보낼 때 : FormData, URLSearchParams(data).toString()

내부 클래스 추가 밎 제거

=javascript에서 내부 클래스 추가는 css 요소를 추가한다는 의미다.

v-bind

• 내부 클래스를 추가하는 친구
  
• v-bind를 생략이 가능함
  

  요소에 css를 추가하고 싶을 때 사용함

UI요소로 데이터를 변경 & 그걸 또 UI에 반영함

• Vue 가 변경된 모델(데이터)를 자동으로 반영한다.
  

vue js에서 인라인 css 조작하기

Vue에서 동적으로 데이터를 변경하기 위해서는 모델에서 관리해야 함

언제 ''을 작성하는가?

vue의 모델에서 관리하는 데이터를 ''없이 그냥 작성해도 되고
문자열이나 정적인 값을 넘을 때는 ''안에 작성해야함

computed

= 원본 데이터에 의지하여 계산된 값을 갖고옴

<UI요소에 computed 데이터 반영하기>

<computed 오브젝트 생성>

모델 안의 데이터를 모델 안에서 사용하고 싶을 때 사용한다.

computed:{
	myStyle(){
    	return(this.원하는 데이터 키값)
    }
}

변경의 의미?

• 기존의 데이터를 뿌려놓은 새로운 배열의 참조값으로 덮어쓰인다.
  
  *** v-for은 요소를 생성하는 동작이 내재되어 있다.
• ...this.메세지가 저장되는 배열
  

spread(...this)

• 새로운 object에 새로운 키값으로 내용을 추가할 수 잇다.
• 배열 펼치는 방법
  

  기존의 요소를 유지하면서 새로운 요소를 추가하고 싶을 때

CSR SSR

누가 더 많은 역할(데이터를 가져오는 일)을 하느냐?

1. CSR

= 웹브라우저가 생성한 데이터를 갖고 옴
= 브라우저(클라이언트)가 화면을 완성한다.
= Html이 비어있는 틀로 시작되고 브라우저 데이터를 가져옴

2. SSR

= 서버가 응답하는 데이터를 갖고 옴
= 서버가 데이터를 가져와 화면을 완성하고 완성작을 클라이언트에게 전송함
= Html이 이미 완성된 상태로 바로 그냥 보여준다.

• send.jsp
  

vuejs로 아이디,비번, 이메일 검증폼

보완

1. 증감연산자는 더하고 대입까지 해준다.
2. event, event.target