1.주제 정하기
2. Db table 생성
3. Dto 만들고
4. Dao 를 여기에 맞게 만드는데 method 기본만 만들어놓고 추후에 추가를 해도 됨
5. 프론트와 백이 나눠져있고 같은 도메인인데 원래 도메인이 다르면 크로스 브라우저에 대한
처리를 해줘야함 예를 들면 리액트!
데이터 처리하는 백엔드는 서버가 다르고 포트가 다르고 도메인도 다름
그래서 크로스 브라우저 처리를 꼭 해야함 (크로스 브라우저 처리가 뭔지는 일단 모름)
지금까지는 jsp로 했을때는 프론트 백이 나눠져있지 않고
jsp에서 데이터처리랑 출력도하고 프론트 백 나누지않는 방식을 사용했음
근데 ajax는 나눠져있음 출력파일 데이터 처리 파일 백엔드파일이 나눠져있긴함
jsp는 프론트 백 둘다 처리가능
-------------------------------------------------------------------
데이터처리하는 백엔드로써의 jsp파일 만들어두기
6. 출력하는 프론트 역할로써의 jsp 또는 html // ajax는 자바코드 쓰는게 없음
백엔드에서 처리하는게 자바코드라서 url 쪽에서 html 이나 jsp 나 상관은 없음
오늘은 db 설계전에
데이터를 어떻게 보내고 어떻게 출력하는지 연습할 예정
연습 후 주제정하고 입력 출력 계속해서 연습 할 예정
연습용 html 파일 만들고
jsp에서
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
*{
font-family: 'Jua';
}
</style>
</head>
</body>
</html>
를 복붙해놓자
입력 출력은 html
데이터처리는 jsp로 만들자
첫번째로 데이터 보내는 것 html 로 보내면
백엔드에서 받아야하는데 그 백엔드 파일은 jsp파일로 만들어준다 // 지금까지 배운게 jsp여서 일단 배운거로 처리한다
오늘 백엔드처리에서 크게 어렵지 않은 기본만 하면 된다
이번엔 받아서 db 저장이 아니라 프론트로 리턴도 해야함
백엔드에서는 출력안하고 프론트로 보내서 프론트에서 따로 처리함
결과적으로 백의 업무와 프론트의 업무를 순수하게 나눠서 각자 할 일을 따로 한다는 것
백은 로직처리를 위해 jsp 서블릿 스프링 등등을 주로사용 이번에는 jsp로
프론트에서 입력하면 백으로 보냄
그 입력값을 백에서 처리하고 db저장함
그럼 그 결과를 send 해서 프론트로 보내는데
success data 로 프론트에서 백에서나온 결과를 받음
그럼 그 결과를 출력함
ajax에서 프론트/백 개념을 알고 써야함
중구난방으로 이것저것 끌어다 쓰면 안된다
프론트에서 입력하고 데이터처리는 백에서만
ex) ajax
결과받은 프론트에서만 success 로 결과를 출력함
백엔드는 겉으로 보이면안되고 뒤에서만 일해야함
xml , json 뭐가되었든 보내는데 제이슨이 조금 더 편하다
오늘은 xml 없이 json 만 사용할 예정
redirect 같은 페이지에서 처리하는방식으로 만들자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
*{
font-family: 'Jua';
}
</style>
</head>
<body>
<div style="margin: 30px">
이 름 : <input type="text" id="irum" style="width: 120px;">
주 소 : <input type="text" id="addr" style="width: 120px;">
<button type="button" id="btn1">ajax전송</button>
<br><br>
<div id="result"></div>
</div>
</body>
</html>
실행하면
결과는 이렇게 나온다
이름과 주소를 보내서 백에서 받아서 프론트로 보내서 div 석세스로출력
datatype은 아무것도 안보낼때는 html 아니면 text 로 줘야함
json 주고 아무것도 안넣으면 에러나옴
이번엔 json으로 받자
백엔드는 로직이 필요하기때문에 백엔드 언어를 써야하는데
어떤 언어를 쓰든 상관은 없다 데이터 처리만 할 수 있으면 됨
get으로 보냈으니까 이쪽에서는 한글처리를 안해도 된다
백엔드 파일인 jsp 파일에 데이터를 보낼 준비를 해줬다
프론트에서 키값 벨류값 제이슨 형태로 백엔드 파일로 보내준다
백에서 만든 데이터 메세지가 프론트에 석세스 데이터로 들어간다
출력은
h2 사이즈로 크게만들어서 출력을 한다
출력사이트를 보면 num=? 등 값이 url에 지저분하지않게
깔끔하게 나온다
결과가 바로나오는데
순서는 입력한 값을 제이슨파일로 보내서 데이터를 만들어서
프론트에 데이터로 넣어주게 되고 메세지로 바로 출력되서 보여지게 된다
해당 코드가 객체를 문자열로 바꿔주는 코드이다
제이슨은 오브젝트라서 스트링으로 바꿔주기 위해서
위 해당 코드를 꼭 넣어줘야 한다? 이건 좀 다시 공부해봐야겠다 꼭 안넣어도될지도..?
------------------------
다른 학생질문에 대한 강사님 답변:
객체는 원래 출력이 안되는데
toString 을 적어줘서 출력해야하는데
대부분의 객체는 toString을 가지고 있는데
브라우저든 콘솔이든 출력을 해주려면 위에 .toString()을 적어줘야하는데
생략이 가능하다
그럼 저걸 왜써준걸까
7월 25일 예제3번에서 toSting에 대한 내용이 있는데
dto에서 멤버변수 출력용도로 toString을 넣어줌
toString이 없을때에는 출력을 하면
데이터 객체가 출력이 안되고 이상한 주소로 나온다
출력을 하기위해서 만들어주는게 toString을 넣어줘야한다
대부분 알아서 toString이 들어가있어서 생략이 되는데
위의 오브젝트 코드는 우리가 만든 것이 아니기 때문에
생략하지 않고 써준 것이다
저걸 안써주면 모든 객체가 다 나오는줄 아는데
오브젝트 코드를 출력한다는 것을 보여주기 위해서 써준거다
혹시 안에 toString이없어서 객체가 출력이 안될 수 있음으로
아래에 코드를 적어줘서 혹시나 없더라도 출력되도록 하기 위함이다
제이슨형태로 보내려면 주고 받은 모든 곳의 형태를
제이슨형태로 맞춰줘야한다 그렇지않으면
말도안되는 \" \" 이런 형태로 만들어줘야한다
생각만해도 끔찍
toString코드 없으면 프론트에서 출력하면 출력이안됨
데이터 타입
데이터
석세스
이런것들은 바꿀수없고 애초에 정해져있는것
데이터 안에 이름 이름 주소 주소 적은 형태가 가장 많이 쓰이는 형태
타입은 겟타입을 써줬는데 post를 써줘도된다
겟타입은 한글처리를 안해줘야한다
겟으로보낼때는 256바이트를 넘으면안되는데
그 이상일 경우 포스트를 써줘야한다
대부분은 get으로 처리가능
ajax로 프론트 백 나눠져있는경우 대부분 get으로 사용함
보내는 형식은 방법 1과 2가 있는데
위에 방법1이 더 편하기때문에 자주쓴다
새로 예제파일 2번을 만들어서
연습해보자
html 프론트 페이지를 만들어서
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
*{
font-family: 'Jua';
}
</style>
</head>
<body>
<b>사진선택</b>
<select id="selimage">
<option value="1">샌드위치</option>
<option value="2">닭꼬치</option>
<option value="3">육개장</option>
<option value="5">콘치즈</option>
<option value="10">햄마요덮밥</option>
</select>
<br><br>
<input type="text" id="java">
<input type="text" id="jquery">
<input type="text" id="html">
<br>
<button type="button" id="btn1">데이터전송</button>
<br><br>
<div id="result"></div>
<script>
$("#btn1").click(function(){
var photono=$("#selimage").val();
var photofood=$("#selimage option:selected").text();
//alert(photofood); //8월12일날 예제 6번을 참고해서 알아두자
var java=$("#java").val();
var jquery=$("#jquery").val();
var html=$("#html").val();
var s="photono="+photono+"&photofood="+photofood+"&java="+java
+ "&jqeury="+jqeury+"&html="+html;
$.ajax({
type:"get",
url:"ex2_receive.jsp",
dataType:"json",
data:s,
success:function(data){
},
statusCode: {
404:function(){
alert("json 파일을 찾을 수 없습니다");
},
500:function(){
alert("코드를 다시 한번 확인해보세요 오타가 있을 수 있습니다");
}
}
});
})
</script>
</body>
</html>
해당 코드를 작성해준다
백엔드에서 5개의 값을 읽어서 다시 프론트로 전송하면된다
우선 5개의 값을 모두 백엔드에서 읽어준다
총점과 평균을 구해주고
프론트로 데이터를 던져서
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
*{
font-family: 'Jua';
}
</style>
</head>
<body>
<b>사진선택</b>
<select id="selimage">
<option value="1">샌드위치</option>
<option value="2">닭꼬치</option>
<option value="3">육개장</option>
<option value="5">콘치즈</option>
<option value="10">햄마요덮밥</option>
</select>
<br><br>
<input type="text" id="java">
<input type="text" id="jquery">
<input type="text" id="html">
<br>
<button type="button" id="btn1">데이터전송</button>
<br><br>
<div id="result"></div>
<script>
$("#btn1").click(function(){
var photono=$("#selimage").val();
var photofood=$("#selimage option:selected").text();
//alert(photofood); //8월12일날 예제 6번을 참고해서 알아두자
var java=$("#java").val();
var jquery=$("#jquery").val();
var html=$("#html").val();
var s="photono="+photono+"&photofood="+photofood+"&java="+java
+ "&jquery="+jquery+"&html="+html;
$.ajax({
type:"get",
url:"ex2_receive.jsp",
dataType:"json",
data:s,
success:function(res){
var out="<img src='"+res.photo+"'><br>";
out+="<h3>음식명:"+res.food+"</h3>";
out+="<h4>3과목의 합계:"+res.tot+"</h4>";
out+="<h4>3과목의 평균:"+Number(res.avg).toFixed(2)+"</h4>";
/* var p=res.photo;
var f=res.food;
var t=res.tot;
var a=Number(res.avg).toFixed(2);
$("#result").html("<img src='"+p+"'><br><h2>음식명:"+f+"</h2><br><h2>합계:"+t+"</h2><br><h2>평균:"+a+"</h2>"); */
$("#result").html(out);
},
statusCode: {
404:function(){
alert("json 파일을 찾을 수 없습니다");
},
500:function(){
alert("코드를 다시 한번 확인해보세요 오타가 있을 수 있습니다");
}
}
});
})
</script>
</body>
</html>
이렇게 코드를 짜서
데이터를 받은것을 출력을 해주면
이렇게 결과를 출력해서 볼 수 있고
소수점2자리까지 출력하게 만들어줬다
위에 주석처리된 2가지를 포함해서
총 3가지 방법으로 출력 할 수 있다
append를 줄 때는 empty를 해주는 것을 잊지말고 꼭 해줘야함
'개발' 카테고리의 다른 글
| IntelliJ 프로젝트 WAR Export (0) | 2022.12.15 |
|---|---|
| forEach 사용해보기 (0) | 2022.11.16 |
| Ajax를 알아보자 (0) | 2022.08.30 |
| 2022-08-30 스마트 에디터 게시판 만들기-2 (0) | 2022.08.30 |
| 2022-08-29 스마트 에디터 게시판 만들기 (0) | 2022.08.29 |