Jquery

• 이벤트명으로 함수가 만들어져 있음

애니메이션 동작 &

구조를 파악하면서 치기

공식 도큐먼트

https://api.jquery.com/

입력한 아이디 실시간 검증

bootcss 사용

회원가입폼

해당 아이디가 아니면 밑에 요소가 나타나게끔(signup_form)

정규식 결과가 맞는 결과가 아니라면(false)
클래스명이 invalid-feedback div의 요소의 css의 display 요소의 속성 "block"로 변경

e : 발생한 이벤트 자체
e.target : 이벤트가 발생한 요소(여기서는 #signForm 을 뜻함)

입력 아이디에 따라서 메세지 나오게끔

• 매번 검사결과를 받기위해서 결과를 초기화
• 추가 & 제거가 계속 필요함

• 어떤 요소에 클래스를 추가하는 방법 = .classList.add("클래스명")

입력할 때마다 실시간 검증을 하기위해서는 꼭 결과를 초기화한다.

ID 전체흐름

1. 입력 시 이벤트 발생
   
   1-1. input 요소에 is-invalid 혹은 is-valid 추가하기
   

• 첫 글자를 입력하는 순간에는 초기화 코드가 실행되도 별로 영향을 끼치지 않음
• 입력값에 따라서 2가지 결과 (input 요소의 내부클래스 와 버튼 활성화 상태)를 뿌린다.
• 버튼의 활성화를 위한 상태를 설정

  입력값을 검증하는 기능에는 class 속성을 초기화하는 코드가 필요함

2. input 요소의 클래스에 따라서 보일 div 요소 나누기(valid-feedback, invalid-feedback)
   

   input 내부클래스의 상태에 따라서 다른 요소가 나타남
   (class="valid-feedback 혹은 class="invalid-feedback")
   버튼 구역을 따로 생성

3. 입력할 때 받은 버튼 활성화 상태 결정
   

• button 속성을 삭제하는 경우 : removeAttribute("disabled")
  
• button 속성에 추가하는 경우 : setAttribute("disabled","disabled")

  동작을 자주 사용할 경우에는 따로 함수를 생성

3. 그 이후에 결과에 따라서 checkform() 함수가 실행되어 버튼을 활성화 시킴
   

비밀번호와 비밀번호 확인

1. 비밀번호와 비밀번호 확인 입력값의 정규 검증 함수 생성하기
   
   1-1.맞지 않다면 상태 비활성화 , 작업 끝내기

   return; 은 아예 작업이 끝내고 다음 코드를 실행할 필요가 없을 때 사용

1-2. 맞다면 일치 하는지 검증하기

• 일치하면 valid-feedback 실행
• 버튼 활성화

2. 입력할 때 함수 실행시키기
   

함수를 먼저 만들고 나중에 실행하는 느낌으로

이메일 검증

비밀번호 검증 프로세스와 다르게 입력하면서 실행했네

fetch 함수로 아이디 중복 검사

1. document.querySelector("[type=submit]") 은 type이 submit인 요소를 찾는 표현

fetch 함수로 id 서버에 접속

• fetch 함수는 jsp에서 응답을 받아옴(서버에 접속)

응답 jsp 파일

내가 궁금한 건 아이디를 사용할 수 있는지의 여부

내가 어떤 걸 궁금해 하는지 생각하기

react js

• 프론트 엔드와 백엔드가 완전히 분리된다.
• 백엔드는 응답할 json만 작성하면 된다.

vue js

• 데이터를 변경하면 UI의 내용이 자동으로 변경하는 과정이 내재되어있음
  *UI에 사용한 데이터 == 모델

• view : 보여주는 화면
  =MVVM 프레임워크

vuejs 사용하는 방법

모델(데이터)이 변경하면 UI는 자동 반영된다.

vuejs 여러개 사용법

• v-model : 데이터를 관리하는 애
• v-show : 화면에 보일지 말지 결정하는 스위치 (단 결정의 여부는 v-model에서 받아옴)
• v-for : for문 돌려주는 애(= 단축for문), 요소를 생성하는 기능이 내재되어 있다.
• {{}} : 화면에 나타나는 데이터를 박는 애
  
• v-on:click ="methods의 함수" = @click : 동작을 불러옴

javascript 리마인드

1. 선택창 생성
   
2. 내부 클래스 요소에 "box"라는 요소를 추가하면 화면에 박스가 나옴

<div class="box" v-show="isShow"></div>

보완

1. 스마트에디터 공유문서 확인하고 로컬에서 다운받기
2. 자바스크립트 object 확인