<14:30 5교시>
오전에 내가 한거 수업시간 직전즈음 완성 시킴.
선생님이 작성한 코드 백업
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/user/signup_form3.jsp</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1>회원가입 폼 입니다</h1>
<form action="signup.jsp" method="post" id="signupForm" novalidate>
<div class="mb-2">
<label class="form-label" for="id">아이디</label>
<input class="form-control" type="text" name="id" id="id"/>
<small class="form-text">영문자 소문자로 시작하고 5~10 글자 이네로 입력하세요</small>
<div class="valid-feedback">잘 입력했군요! 짱구가 아니네요~</div>
<div class="invalid-feedback">사용할수 없는 아이디 입니다</div>
</div>
<div class="mb-2">
<label class="form-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" name="pwd" id="pwd"/>
<small class="form-text">특수 문자를 하나 이상 조합하세요.</small>
<div class="invalid-feedback">비밀 번호를 확인 하세요</div>
</div>
<div class="mb-2">
<label class="form-label" for="pwd2">비밀번호 확인</label>
<input class="form-control" type="password" id="pwd2"/>
</div>
<div class="mb-2">
<label class="form-label" for="email">이메일</label>
<input class="form-control" type="email" name="email" id="email"/>
<div class="invalid-feedback">이메일 형식에 맞게 입력하세요.</div>
</div>
<button class="btn btn-success" type="submit" disabled="disabled">가입</button>
</form>
</div>
<script>
//아이디 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isIdValid=false;
//비밀번호 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isPwdValid=false;
//이메일 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isEmailValid=false;
const checkForm = ()=>{
//폼 전체의 유효성 여부에 따라 분기한다 (지금은 id 유효성 여부만)
if(isIdValid && isPwdValid && isEmailValid){
// type 속성이 submit 인 요소를 찾아서 disabled 속성을 제거한다.
document.querySelector("[type=submit]").removeAttribute("disabled");
}else{
// type 속성이 submit 인 요소를 찾아서 disabled="disabled" 속성을 추가한다.
document.querySelector("[type=submit]").setAttribute("disabled", "disabled");
}
};
//아이디를 검증할 정규 표현식
const reg_id=/^[a-z].{4,9}$/;
// id 를 입력할때마다 실행할 함수 등록
document.querySelector("#id").addEventListener("input", (event)=>{
//일단 is-valid, is-invalid 클래스를 모두 지우고
event.target.classList.remove("is-valid", "is-invalid");
//현재까지 입력한 아이디를 읽어온다.
let inputId=event.target.value;
//만일 정규표현식을 통과하지 못했다면
if(!reg_id.test(inputId)){
/*
어떤 요소에 클래스를 추가하는 방법
.classList.add("클래스명")
*/
event.target.classList.add("is-invalid");
//아이디의 상태값 변경
isIdValid=false;
}else{
event.target.classList.add("is-valid");
//아이디의 상태값 변경
isIdValid=true;
}
//상태값을 이용해서 UI 를 변경하는 함수 호출
checkForm();
});
//비밀번호를 검증할 정규표현식 객체
const reg_pwd=/[\W]/;
//함수를 미리 만들어서
const checkPwd = ()=>{
//양쪽에 입력한 비밀번호를 읽어와서 (2줄 코딩)
let pwd=document.querySelector("#pwd").value;
let pwd2=document.querySelector("#pwd2").value;
//일단 is-valid 와 is-invalid 클래스를 제거를 먼저하고 (1줄 코딩)
document.querySelector("#pwd").classList.remove("is-valid", "is-invalid");
//일단 정규표현식을 만족하는지 확인해서 만족하지 않으면 함수를 여기서 종료(return) 해야 한다.
//만일 첫번째 비밀번호가 정규표현식을 통과하지 못하거나 또는
//두번째 비밀번호가 정규표현식을 통과하지 못한다면 isPwdValid 를 false 로 변경하고 checkForm() 호출
if(!reg_pwd.test(pwd) || !reg_pwd.test(pwd2)){
document.querySelector("#pwd").classList.add("is-invalid");
isPwdValid=false;
checkForm();
return;
}
//양쪽에 입력한 비밀번호가 같은지 확인해서 같으면 isPwdValid 를 true
// 다르면 isPwdValid 를 false 로 변경하고 checkForm() 호출
if(pwd == pwd2){
document.querySelector("#pwd").classList.add("is-valid");
//비밀번호가 유효 하다는 의미에서 true 를 넣어준다.
isPwdValid=true;
}else{
document.querySelector("#pwd").classList.add("is-invalid");
//비밀번호가 유효 하지 않다는 의미에서 false 를 넣어준다.
isPwdValid=false;
}
checkForm();
};
document.querySelector("#pwd").addEventListener("input", checkPwd);
document.querySelector("#pwd2").addEventListener("input", checkPwd);
const reg_email=/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
document.querySelector("#email").addEventListener("input", (event)=>{
//입력한 문자열 읽어오기
const email=event.target.value;
//일단 is-valid 와 is-invalid 클래스를 제거를 먼저하고
document.querySelector("#email").classList.remove("is-valid", "is-invalid");
//만일 email 을 제대로 입력 했다면
if(reg_email.test(email)){
isEmailValid=true;
event.target.classList.add("is-valid");
}else{//제대로 입력하지 않았다면
isEmailValid=false;
event.target.classList.add("is-invalid");
}
checkForm();
});
</script>
</body>
</html>
유효성 검증 방법
아이디를 입력하는데 정규표현식으로 사용할 수 없는 아이디를 거르는 것은 해봤으니까,
이제는 존재하던 아이디와 비교해서 중복인 아이디가 아닌 것을 확인하는 작업을 한다.(form4)
<15:30 6교시>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. GET 방식 파라미터로 전달되는 입력한 id 값을 읽어온다.
String id=request.getParameter("id");
//2. DB에서 해당 회원 정보가 있는지 확인해서 사용가능여부를 알아낸다.
boolean canUse=false;
//"kimgura"와 "superman"이라는 아이디는 이미 등록되어 있다고 가정한다.
if(!id.equals("kimgura")){
canUse=true;
}
%>
{"canUse":<%=canUse %>} <%-- 응답되는 json 문자열은 {"canUse":true} or {"canUse":false} --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1>회원가입 폼</h1>
<form action="signup.jsp" method="post" id="signupForm" novalidate>
<div class="mb-2">
<label class="form-label" for="id">아이디</label>
<input class="form-control" type="text" name="id" id="id" />
<small class="form-text">영문자 소문자로 시작하고 5~10글자 이내로 입력하세요</small>
<div class="valid-feedback">사용 가능한 아이디입니다.</div>
<div class="invalid-feedback">사용할 수 없는 아이디입니다.</div>
</div>
<div class="mb-2">
<label class="form-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" name="pwd" id="pwd"/>
<small class="form-text">특수 문자를 하나 이상 조합하세요.</small>
<div class="invalid-feedback">비밀 번호를 확인 하세요</div>
</div>
<div class="mb-2">
<label class="form-label" for="pwd2">비밀번호 확인</label>
<input class="form-control" type="password" id="pwd2"/>
</div>
<div class="mb-2">
<label class="form-label" for="email">이메일 주소</label>
<input class="form-control" type="email" name="email" id="email" />
<div class="invalid-feedback">이메일 주소의 형식을 갖추세요</div>
</div>
<button class="btn btn-success" type="submit" disabled="disabled">가입</button>
</form>
</div>
<script>
//아이디 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isIdValid=false;
//비밀번호 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isPwdValid=false;
//이메일 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isEmailValid=false;
const checkForm=()=>{
//폼 전체의 유효성 여부에 따라 분기(이 예제에서는 id 유효성 여부만, 다음 예제에서는 isIdValid&&isPwdValid&&isEmailValid 이런식으로 들어갈 거임.
if(isIdValid && isPwdValid && isEmailValid){
//type 속성이 submit 인 요소를 찾아서 disabled 속성을 제거
document.querySelector("[type=submit]").removeAttribute("disabled");
}else{
//type 속성이 submit 인 요소를 찾아서 disabled="disabled" 속성을 추가
document.querySelector("[type=submit]").setAttribute("disabled", "disabled");
}
}
/*
폼에 submit 이벤트가 발생하면 입력한 내용을 검증해서 조건을 만족하지 못하면 폼 제출을 막기
*/
const reg_id = /^[a-z].{4,9}$/;
//id를 입력할 때마다 실행할 함수 등록하기
document.querySelector("#id").addEventListener("input", (event)=>{
//일단 is-valid, is-invalid 클래스를 모두 지우고(id가 입력될 때마다 계속 실행됨)
event.target.classList.remove("is-valid", "is-invalid");
//현재까지 입력한 아이디를 읽어오기
let inputId=event.target.value;//event.target=document.querySelector("#id")
//만일 정규표현식을 통과하지 못했다면
if(!reg_id.test(inputId)){
//어떤 요소에 클래스를 추가하는 방법 : .classList.add("클래스명");
event.target.classList.add("is-invalid");
//아이디의 상태값을 여기서 변경
isIdValid=false;
//아이디 상태값 변경이 버튼의 disabled 속성에 변화를 주도록 checkForm()함수 호출
checkForm();
return;
}
//여기서 서버에 입력한 아이디를 전송해서 사용 가능 여부를 응답 받아야 한다.
fetch("${pageContext.request.contextPath}/user/checkid.jsp?id="+inputId)
.then(res=>res.json())
.then(data=>{
event.target.classList.remove("is-valid", "is-invalid");
if(data.canUse){
event.target.classList.add("is-valid");
isIdValid=true;
}else{
event.target.classList.add("is-invalid");
isIdValid=false;
}
checkForm();
});
});
const reg_pwd=/[\W]/;
//함수를 미리 만들어서
const checkPwd = ()=>{
//양쪽에 입력한 비밀번호를 읽어와서 (2줄 코딩)
let pwd=document.querySelector("#pwd").value;
let pwd2=document.querySelector("#pwd2").value;
//일단 is-valid 와 is-invalid 클래스를 제거를 먼저하고 (1줄 코딩)
document.querySelector("#pwd").classList.remove("is-valid", "is-invalid");
//일단 정규표현식을 만족하는지 확인해서 만족하지 않으면 함수를 여기서 종료(return) 해야 한다.
//만일 첫번째 비밀번호가 정규표현식을 통과하지 못하거나 또는
//두번째 비밀번호가 정규표현식을 통과하지 못한다면 isPwdValid 를 false 로 변경하고 checkForm() 호출
if(!reg_pwd.test(pwd) || !reg_pwd.test(pwd2)){
document.querySelector("#pwd").classList.add("is-invalid");
isPwdValid=false;
checkForm();
return;
}
//양쪽에 입력한 비밀번호가 같은지 확인해서 같으면 isPwdValid 를 true
// 다르면 isPwdValid 를 false 로 변경하고 checkForm() 호출
if(pwd == pwd2){
document.querySelector("#pwd").classList.add("is-valid");
//비밀번호가 유효 하다는 의미에서 true 를 넣어준다.
isPwdValid=true;
}else{
document.querySelector("#pwd").classList.add("is-invalid");
//비밀번호가 유효 하지 않다는 의미에서 false 를 넣어준다.
isPwdValid=false;
}
checkForm();
};
document.querySelector("#pwd").addEventListener("input", checkPwd);
document.querySelector("#pwd2").addEventListener("input",checkPwd);
document.querySelector("#email").addEventListener("input", ()=>{
document.querySelector("#email").classList.remove("is-valid", "is-invalid");
let inputEmail= document.querySelector("#email").value;
const reg_email=/[\w]+@[.\w]+/;
if(!reg_email.test(inputEmail)){
document.querySelector("#email").classList.add("is-invalid");
isEmailValid=false;
}else{
document.querySelector("#email").classList.add("is-valid");
isEmailValid=true;
}
checkForm();
});
</script>
</body>
</html>
이제 jsp, jquery 했고, 우린 vue js 할거고, react js 는 심화 및 최종 프로젝트에서도 사용 가능한 수준으로 공부할 것임.
react js는 프론트엔드(프론트엔드가 죽어남)와 백엔드(편리함)가 분리되어 진행되어 작업이 이루어져서 난이도가 높아진다고 함. anglar js는 하지 않는다고 함.
그냥 자바스크립트와 vue js 의 차이를 보기 위한 예제
데이터를 UI에 출력했는데 이걸 업데이트 하기 위해서는 자바스크립트에서는 데이터만 바꾼다고 UI를 업데이트하는 코드가 없이 데이터가 업데이트 되지 않는다.
vue나 react는 출력된 DATA를 바꾸는 것만으로 UI가 자동으로 업데이트되면 편하지 않을까에 대한 고민에서 출발한 코딩으로, vue나 react를 쓰면 UI 반영하는 곳(ex. 변수)에 넣어주기만 하면 vue나 react가 맡아서 UI가 자동 업데이트 된다.
UI에서 사용하는 데이터를 우리는 앞으로 모델이라고 부를 것이다.
모델이 바뀌면 UI가 자동으로 업데이트 되면 좋겠다 라는 생각...
졸립기도하고 아직 뭔말인지 모르겠는거 같기도...
vue js 로딩하는 방법 : 헤드에 아래 코드 로딩하기
<!-- vue js 로딩하기 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
데이터에 모델을 연결해서 UI에 출력했는데, 모델을 변경하니까 UI가 자동업데이트 다 해줌.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello.html</title>
<!-- vue js 로딩하기 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="one">
<button id="changeBtn">변경하기</button>
<p id="fortune"></p>
</div>
<script>
let fortuneToday="동쪽으로 가면 귀인을 만나요";
document.querySelector("#fortune").innerText = fortuneToday;
document.querySelector("#changeBtn").addEventListener("click", ()=>{
fortuneToday = "남쪽으로 가면 구라를 만나요!";
document.querySelector("#fortune").innerText = fortuneToday;
});
</script>
<div id="two">
<button @click="change">변경하기</button>
<p>{{fortuneToday}}</p>
</div>
<script>
//vuejs 를 사용하는 코드 작성
new Vue({
el:"#two",
data:{
fortuneToday:"동쪽으로 가면 귀인을 만나요!"
},
methods:{
change:function(){
this.fortuneToday="남쪽으로 가면 애플워치가 생겨요!";
}
}
});
</script>
</body>
</html>
<16:30 7교시>
vue가 편한건 실행중에 모델이 update 되면 UI도 자동으로 업데이트되게 하는 방법
model 업데이트 방법 this.모델명
this.fortuneToday = "You are truly lucky";
졸았다
일단 패스(근데 어째어째 다 따라 써놓긴 잘 해놨네)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- vue js 로딩하기 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="one">
<button id="changeBtn">변경하기</button>
<p id="fortune"></p>
</div>
<script>
let fortuneToday="Today is your lucky day";
document.querySelector("#fortune").innerText=fortuneToday;
document.querySelector("#changeBtn").addEventListener("click", ()=>{
fortuneToday = "You are filled with determination"
document.querySelector("#fortune").innerText=fortuneToday;//변수에 있는 내용을 UI에 반영하는 code가 필요함
});
</script>
<div id="two">
<button @click="change">변경하기</button>
<p>{{fortuneToday}}</p>
</div>
<script>
//vuejs를 사용하는 코드 작성
new Vue({
el:"#two",//id가 two인 요소에서 일어나는 일을 vuejs로 제어하겠다는 의미
data:{
fortuneToday:"You are filled with determination"
},
methods:{
change: function(){
this.fortuneToday = "You are truly lucky";
}
}
});
</script>
</body>
</html>
모델내용만 변경하면 자동으로 업데이트되기 때문에 업데이트 되는 부분에 대한 코딩을 고민할 필요가 없다.
vue, react, adngular
v-model은 웹브라우저에게는 마크업 오류인데, 로딩한 vue가 동작해준 내용이다.
ui를 화면에 보이게 해주는 걸 view라고 할 때 view는 model에 연결되어 있고, model은 view에 연결되어 있다. MVVM 프레임워크라고도 함
v-model
v-show
v-for
v-on:click => 줄여서 @click
v-어쩌구 : 이런것들이 다 vue js 기능
모델로 연결한 내용을 view에 반영하기 위한 v-model vue js
vue js 맛보기 코드 모음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.box{
width:100px;
height:100px;
background-color:yellow;
border:1px solid red;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="container" id="app">
<input type="text" v-model="msg"/>
<p>{{msg}}</p>
<h3>좋아하는 음식을 선택해 보세요</h3>
<select v-model="food">
<option value="">선택</option>
<option value="ramen">라면</option>
<option value="kimbop">김밥</option>
<option value="ddukbokee">떡볶이</option>
</select>
<p>나는 <strong>{{food}}</strong>을 좋아해</p>
<h3>노란 박스</h3>
<input type="checkbox" v-model="isShow" />보이게 하기
<div class="box" v-show="isShow"></div>
<h3>목록 출력</h3>
<button v-on:click="change">동물로 변경</button>
<ul>
<li v-for="tmp in names">{{tmp}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"",
food:"",
isShow:false,
names:["이름1", "이름2", "이름3"]
},
methods:{
change:function(){
this.names=["강아지", "고양이", "거북이"]
}
}
});
</script>
</body>
</html>
<17:30 8교시>
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
vue js 코딩된 내용 확인해보고 싶어서 이 페이지에 들어가봄.
MIT 에반 유라는 사람이 만들었나보구나... ㄷㄷ...
오늘 한 거 손코딩 하러 감
'공부의 기록 > 자바 풀 스택 : 수업내용정리' 카테고리의 다른 글
| 자바 풀 스택 1/20 오전 기록 041-1 (0) | 2025.01.20 |
|---|---|
| 자바 풀 스택 1/17 오후 기록 040-2 (1) | 2025.01.17 |
| 자바 풀 스택 1/16 오전 기록 039-1 (1) | 2025.01.16 |
| 자바 풀 스택 1/15 오후 기록 038-2 (0) | 2025.01.15 |
| 자바 풀 스택 1/15 오전 기록 038-1 (0) | 2025.01.15 |