오전에 했던거 중에 에러났던거 오타 찾음... 중괄호... 그놈의 중괄호!!
아니 분명 중괄호 제대로 갈랐는데 졸면서 다른거 따라 치다가 졸아서 오타낸거 지우다가 같이 지워버린걸꺼야 ㅠㅠ
내가 중괄호를 쓰지 않았을리가 없어 ㅠㅠㅠㅠㅠ (정말?)
<14:30 5교시>
와 수업 시작전에 10분 졸았는데 계속 졸려가지고 수업시작하고도 20분쯤 졸면서 하다가 이제 정신 차릴랑 말랑하다가 또 졸림 뭐지. 수면귀신 붙엇나 ㄷㄷ
아아도 사와서 마시는중인데 영 졸립네 ㅠ 진짜 감기인가!!
한 30분 미친듯이 졸았음....ㅋㅋㅋㅋㅋㅋ 그래도 어케어케 또 따라가긴 했...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/vue2/test06.html</title>
</head>
<body>
<div class="container" id="app">
<h3>vue js 에서 인라인 css 조작하기</h3>
<p v-bind:style="{color:'red', fontSize:'30px'}">p1 입니다</p>
<h3>css 를 동적으로 변경하기</h3>
글자 크기 <input type="range" v-model="fontSize" min="10" max="100" step="1"/>
<br>
글자 색상 <input type="color" v-model="color"/>
<p v-bind:style="{fontSize:fontSize+'px', color:color}">
글자 크기 : <strong>{{fontSize}}</strong>px
<br />
글자 색상 : <strong>{{color}}</strong>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
fontSize:16,
color:"#000000"
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/vue2/test06.html</title>
</head>
<body>
<div class="container" id="app">
<h3>vue js 에서 인라인 css 조작하기</h3>
<p v-bind:style="{color:'red', fontSize:'30px'}">p1 입니다</p>
<h3>css 를 동적으로 변경하기</h3>
글자 크기 <input type="range" v-model="fontSize" min="10" max="100" step="1"/>
<br>
글자 색상 <input type="color" v-model="color"/>
<p v-bind:style="{fontSize:fontSize+'px', color:color}">
글자 크기 : <strong>{{fontSize}}</strong>px
<br />
글자 색상 : <strong>{{color}}</strong>
</p>
<h3>모델 object 를 이용해서 css 적용하기</h3>
<div :style="styleObj">box</div>
<h3>모델의 값을 모델 object 에서 사용할수 있을까?</h3>
<p :style="myStyle">
color: <strong>{{myStyle.color}}</strong>
<br />
fontSize: <strong>{{myStyle.fontSize}}</strong>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
fontSize:16,
color:"#000000",
styleObj:{
width:"100px",
height:"100px",
border:"1px solid red"
}
},
/*
computed object 안에 있는 함수의 이름이 모델명이다
해당함수 안에서 리턴하는 데이터가 모델 데이터 이다
또 다른 모델 데이터를 이용해서 모델 데이터에 활용할때 사용한다.
함수이기 때문에 함수 안에서 여러가지 로직을 수행한 다음 데이터를 리턴해 줄수도 있다.
종속된 모델(this.color, this.fontSize) 값이
변경되면 자동으로 새로운값을 받아가서 사용하게 설계 되어 있음
*/
computed:{
myStyle(){
//다른 코딩을 하고 결과값을 리턴해 줄수도 있다.
console.log("호출됨!");
//함수 안에서 리턴하는 값이 myStyle 이라는 모델의 데이터가 된다.
return {color:this.color, fontSize:this.fontSize+"px"};
}
}
});
</script>
</body>
</html>
test07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="container" id="app">
<input type="text" v-model="msg" placeholder="메세지를 입력하세요" />
<button>추가</button>
<ul>
<li v-for="tmp in msgs">{{tmp}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msgs:["hi"]
}
})
</script>
</body>
</html>
msgs의 배열을 변경한다는 의미는 아이템을 추가하는게 아니라, 새로운 배열을 대입해줘야 한다는 의미이고, spread 연산자 ... 을 써서 이걸 구현하게 될 것이다.
(모바일에서 사진찍은거 올리기)
<15:30 6교시>
지금 우리가 하고 있는건 client side rendering : 미완성된 스크립트를 받아서 클라이언트의 사이트에서 웹페이지가 자바스크립트가 구현된 것(데이터만 있으면 됨) 최근 웹 개발의 유행은 CSR 지향하고 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="container" id="app">
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr v-for="tmp in members">
<td>{{tmp.num}}</td>
<td>{{tmp.name}}</td>
<td>{{tmp.addr}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
members:[
{num:1, name:"하나", addr:"주소1"},
{num:2, name:"두울", addr:"주소2"},
{num:3, name:"세엣", addr:"주소3"}
]
}
});
</script>
</body>
</html>
우리가 jsp로 했던건 server side rendering : 서버 측에서 테이블을 만들어낸걸 완성한 상태로 웹페이작 응답 받음
<%@page import="test.member.dto.MemberDto"%>
<%@page import="java.util.List"%>
<%@page import="test.member.dao.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//memberdao 객체를 이용해서 회원 목록 얻어오기
MemberDao dao=new MemberDao();
List<MemberDto> list = dao.getList();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<jsp:include page="/include/resource.jsp"></jsp:include>
</head>
<body>
<div class="main flwx-grow-1">
<%-- navbar.jsp 페이지를 포함시키고 해당 페이지에 current 라는 파라미터명으로 "member" 전달하기 --%>
<jsp:include page="/include/navbar.jsp">
<jsp:param value="member" name="current"/>
</jsp:include>
<div class="container">
<a href="insertform.jsp">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-add" viewBox="0 0 16 16">
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0m-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/>
<path d="M8.256 14a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z"/>
</svg>
<span class="visually-hidden">회원추가</span>
</a>
<!-- href="/Step02DataBase/member/insertform.jsp"라고 해도 되고 -->
<!-- href="${pageContext.request.contextPath}/member/insertform.jsp" 라고 해도 됨, 그리고 나중에 실제 개발을 하게 되면 이걸 쓰게 됨-->
<h1>회원 목록</h1>
<table class="table table-bordered">
<thead class="table-dark">
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
<th>수정</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
<%
for (MemberDto tmp:list){ %>
<tr>
<td><%=tmp.getNum() %></td>
<td><%=tmp.getName() %></td>
<td><%=tmp.getAddr() %></td>
<td><a href="updateform.jsp?num=<%=tmp.getNum()%>">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen" viewBox="0 0 16 16">
<path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708z"/>
</svg>
<span class="visually-hidden">수정</span>
</a></td>
<td><a href="delete.jsp?num=<%=tmp.getNum()%>">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
</svg>
<span class="visually-hidden">삭제</span>
</a></td>
</tr>
<% }%>
</tbody>
</table>
</div>
</div>
<jsp:include page="/include/footer.jsp"/>
</body>
</html>
서버에서 데이터를 json으로 전달하기만 하면 vue js 나 react js 등으로 데이터를 알아서 뿌려주게 코딩하기만 하면 됨.
<16:30 7교시>
지난 시간에 한 signup_form4를 vue js 를 사용해서 만드는 건데
어렵누...
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/user/signup_form5.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" id="app">
<h1>회원가입 폼 입니다 (vuejs 이용)</h1>
<form action="signup.jsp" method="post" id="signupForm" novalidate>
<div class="mb-2">
<label class="form-label" for="id">아이디</label>
<input :class="{'is-valid':isIdValid ,'is-invalid':!isIdValid && isIdDirty}"
@input="onIdInput"
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 @input="onEmailInput"
:class="{}"
class="form-control" type="email" name="email" id="email"/>
<div class="invalid-feedback">이메일 형식에 맞게 입력하세요.</div>
</div>
<button class="btn btn-success" type="submit" v-bind:disabled="!isIdValid || !isPwdValid || !isEmailValid">가입</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isIdValid:false,
isIdDirty:false,
isPwdValid:false,
isEmailValid:false
},
methods:{
onIdInput(e){
this.isIdDirty=true;
//아이디를 검증할 정규 표현식
const reg_id=/^[a-z].{4,9}$/;
//e.target 은 id input 요소의 참조값
//현재까지 입력한 아이디를 읽어온다.
let inputId=e.target.value;
//만일 정규표현식을 통과하지 못했다면
if(!reg_id.test(inputId)){
//아이디의 상태값 변경
this.isIdValid=false;
return;
}
//fetch() 함수를 이용해서 get 방식으로 입력한 아이디를 보내고 사용가능 여부를 json 으로 응답받는다.
fetch("${pageContext.request.contextPath }/user/checkid.jsp?id="+inputId)
.then(res=>res.json())
.then(data=>{
//만일 사용할수 있는 아이디라면
if(data.canUse){
//사용할수 있는 아이디라는 의미에서 true 를 넣어준다.
this.isIdValid=true;
}else{
//사용할수 없는 아이디라는 의미에서 false 를 넣어준다.
this.isIdValid=false;
}
});
}
}
});
/*
//아이디 유효성 여부를 관리할 변수를 만들고 초기값 부여
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;
//아이디 상태값 변경이 버튼의 disabled 속성에 변화를 주도록 checkForm() 함수 호출
checkForm();
return;
}
//fetch() 함수를 이용해서 get 방식으로 입력한 아이디를 보내고 사용가능 여부를 json 으로 응답받는다.
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");
//사용할수 있는 아이디라는 의미에서 true 를 넣어준다.
isIdValid=true;
}else{
event.target.classList.add("is-invalid");
//사용할수 없는 아이디라는 의미에서 false 를 넣어준다.
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);
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>
<17:30 8교시>
일단 중간과정 여기까지.
v-model이 각각 pwd, pwd2여야 하는데 두번째거 2 입력 안해서 처음 비밀번호 입력할 때 동시에 같이 입력됨 ㅋㅋㅋ
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/user/signup_form5.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" id="app">
<h1>회원가입 폼 입니다 (vuejs 이용)</h1>
<form action="signup.jsp" method="post" id="signupForm" novalidate>
<div class="mb-2">
<label class="form-label" for="id">아이디</label>
<input :class="{'is-valid':isIdValid ,'is-invalid':!isIdValid && isIdTyped}"
@input="onIdInput" 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 @input="onPwdInput" :class="{'is-valid':isPwdValid, 'is-invalid':!isPwdValid&&isPwdTyped}" v-model="pwd" 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 @input="onPwdInput" :class="{'is-valid':isPwdValid,'is-invalid':!isPwdValid&&isPwdTyped}" class="form-label" for="pwd2">비밀번호 확인</label>
<input v-model="pwd2" class="form-control" type="password" id="pwd2"/>
</div>
<div class="mb-2">
<label class="form-label" for="email">이메일</label>
<input @input="onEmailInput" :class="{'is-valid':isEmailValid ,'is-invalid':!isEmailValid && isEmailTyped}"
class="form-control" type="email" name="email" id="email"/>
<div class="invalid-feedback">이메일 형식에 맞게 입력하세요.</div>
</div>
<button class="btn btn-success" type="submit" v-bind:disabled="!isIdValid || !isPwdValid || !isEmailValid">가입</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isIdValid:false,
isIdTyped:false,
isPwdValid:false,
isPwdTyped:false,
isEmailValid:false,
isEmailTyped:false,
pwd:"",
pwd2:""
},
methods:{
onIdInput(e){
this.isIdTyped=true;
const reg_id=/^[a-z].{4,9}$/;
let inputId=e.target.value;
if(!reg_id.test(inputId)){
this.isIdValid=false;
return;
}
fetch("${pageContext.request.contextPath }/user/checkid.jsp?id="+inputId)
.then(res=>res.json())
.then(data=>{
if(data.canUse){
this.isIdValid=true;
}else{
this.isIdValid=false;
}
});
},
onEmailInput(e){
this.isEmailTyped=true;
const reg_email=/@/;
const email=e.target.value;
if(reg_email.test(email)){
this.isEmailValid=true;
return;
}else{//제대로 입력하지 않았다면
this.isEmailValid=false;
}
},
onPwdInput(e){
this.isPwdTyped=true;
const reg_pwd=/[\W]/;
if(!reg_pwd.test(this.pwd) || !reg_pwd.test(this.pwd2)){
this.isPwdValid=false;
return;
}
if(this.pwd == this.pwd2){
this.isPwdValid=true;
}else{
this.isPwdValid=false;
}
}
}
});
</script>
</body>
</html>'공부의 기록 > 자바 풀 스택 : 수업내용정리' 카테고리의 다른 글
| 자바 풀 스택 1/16 오후 기록 039-2 (0) | 2025.01.16 |
|---|---|
| 자바 풀 스택 1/16 오전 기록 039-1 (1) | 2025.01.16 |
| 자바 풀 스택 1/15 오후 기록 038-2 (0) | 2025.01.15 |
| 자바 풀 스택 1/15 오전 기록 038-1 (0) | 2025.01.15 |
| 자바 풀 스택 1/14 오후 기록 037-2 (0) | 2025.01.14 |