자바 풀 스택 1/10 오후 기록 035-2

공부의 기록/자바 풀 스택 : 수업내용정리

자바 풀 스택 1/10 오후 기록 035-2

파티피플지선 2025. 1. 10. 17:38

<14:30 5교시>

선생님이 한 코드

<%@ 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>
</head>
<body>
	<button id="getBtn">친구이름 목록 받아오기</button>
	<ul id="friendList">

	</ul>
	
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
	<script>
		$("#getBtn").on("click", ()=>{
			fetch("friends.jsp")
			.then(res=>res.json())
			.then(data=>{
				console.log(data);
				for(let i=0; i<data.length; i++){
					//li요소를 만들어서 선택하고 innerText 출력후 jquery 객체(배열)을 상수에 담기
					const li= $("<li> </li>").text("친구 이름: " +data[i]);
					//id가 friend인 요소에 추가하기
					$("#friendList").append(li);
				}
				
			
			})
			.catch(error=>{
				console.log("에러 정보:" +error);
			});
			
			
		});
	</script>
		
</body>
</html>

선생님이 한 코드 바탕으로 내가 했던거 다시 해보기, 는 선생님한테 도움 받아서 함.

내가 했던 코드는

for(let i=0; i<data.length; i++){

$("#friendList").append("<li>"++" </li>");

$("li").text("친구 이름: " +data[i]);

}

이거 였는데 이렇게 하면 li 요소 전체를 선택해버리니까 3번째 요소만 추가하게 됨.

<%@ 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>
</head>
<body>
	<button id="getBtn">친구이름 목록 받아오기</button>
	<ul id="friendList">

	</ul>
	
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
	<script>
		$("#getBtn").on("click", ()=>{
			fetch("friends.jsp")
			.then(res=>res.json())
			.then(data=>{
				console.log(data);
				for(let i=0; i<data.length; i++){
					$("#friendList").append("<li>"+data[i]+"</li>");	
				}
			})
			.catch(error=>{
				console.log("에러 정보:" +error);
			});
			
			
		});
	</script>
		
</body>
</html>

폼 제출 안되는 코딩

<%@ 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>
</head>
<body>
	<h1>폼에 입력한 내용을 페이지 전환 없이 전송하기</h1>
	<form action="${pageContext.request.contextPath}/user/login.jsp" method="post" id="myForm">
		<input type="text" name="id" placeholder="아이디 입력..." />
		<input type="password" name="pwd" placeholder="비밀번호 입력..." />
		<button type="submit">로그인</button>
	</form>
	<script>
		//폼에 submit 이벤트가 일어날 때 실행할 함수 등록
		document.querySelector("#myForm").addEventListener("submit", (e)=>{
			//event 객체의 .preventDefault()함수를 호출하면 기본 동작을 막는다(폼 제출이 막아진다)
			e.preventDefault();
		});
	</script>
</body>
</html>

폼에 입력한 내용을 페이지 전환 없이 전송하기

<15:30 6교시>

쿠키 : 리모컨을 전달해주는데 쿠키 부스러기까지 같이 전달해줌. 그리고 이 쿠키는 웹 브라우저 입장에서 쿠키 부스러기처럼 묻어서 같이 다님.

서버 입장에서 수많은 클라이언트를 대면하는데, 쿠키를 사용하면 나중에 다시 오는 요청에 대해 클라이언트를 식별하고 클라이언트들을 구분할 수 있다.

session에서 쿠키

개발자 입장에서 쿠키 내용이 요청과 함께 날아옴. ex)장바구니

<%@ 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>
</head>
<body>
	<div class="container">
		<h1>인덱스 페이지</h1>
		<ul>
			<li><a href="test_cookie/cookie_form.jsp">쿠키 테스트</a></li>
		</ul>
	</div>
</body>
</html>

cookie_form.jsp

<%@ 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>
</head>
<body>
	<div class="container">
		<h1>쿠키테스트</h1>
		<p>
			클라이언트의 웹브라우저에 특정 key 값으로 문자열을 저장할 수 있다.
			저장할 수 있는 문자열은 Base64인코딩 형식의 64가지 문자열을 저장할 수 있다. 
		</p>
		<form action="cookie_save.jsp" method="post">
			<label for="msg">웹브라우저(client side)에 저장할 문자열</label>
			<input type="text"	name="msg" id="msg" />
			<button type="submit">저장</button>
			
		</form>
	</div>
</body>
</html>

cookie_save.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//폼 전송되는 문자열 읽어오기
	String msg=request.getParameter("msg");
	//1. 쿠키 객체 생성
	Cookie cookie=new Cookie("savedMsg", msg);
	//2. 쿠키 유지 시간 설정(초단위)
	cookie.setMaxAge(60);//60초로 테스트
	//3. 응답할 때 쿠키도 같이 응답하도록 HttpServletResponse를 객체에 담는다
	response.addCookie(cookie);
	//4. 응답할 때 쿠키가 자동으로 응답되고 클라이언트의 웹 브라우저에 저장된다.
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>웹 브라우저에 savedMsg라는 키값으로 "<%=msg %>"를 저장했습니다.</p>
	<a href="cookie_read.jsp">저장된 문자열 확인해보기</a>
	<br />
	<a href="cookie_read2.jsp">저장된 문자열 확인해보기2</a>
</body>
</html>

cookie_read

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	//HttpServletRequest 객체를 이용해서 요청과 함께 전달된 쿠키 읽어내기
	Cookie[] cooks = request.getCookies();
	//반복문 돌면서
	for(Cookie tmp:cooks){
		//쿠키의 키값을 읽어온다.
		String key=tmp.getName();
		//해당 키값으로 저장된 value 값을 읽어온다.
		String value=tmp.getValue();
		
		System.out.println("key: "+key+"value: "+value);
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div class="container">
		<h1>저장된 쿠키 목록</h1>
		<table>
			<thead>
				<th>key</th>
			 	<th>value</th>
			</thead>
			<tbody>
				<%for(Cookie tmp:cooks){%>
					<tr>
						<td><%=tmp.getName() %></td>
						<td><%=tmp.getValue() %></td>
					</tr>
				<% }%>
			</tbody>			
		</table>
		<a href="cookie_form.jsp">다시 테스트</a>
	</div>
</body>
</html>

<16:30>

url마다 고유한 공간에 쿠키가 있는데, 거기에 저장된 모든 쿠키가 클라이언트의 의도와 관계 없이 모두 cookie_read.jsp의 Cookie[ ]에 저장된다.

cookie_read2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//HttpServletRequest 객체를 이용해서 요청과 함께 전달된 쿠키 읽어내기
	Cookie[] cooks=request.getCookies();
	//"savedMsg"라는 키값으로저장된 문자열을 저장할 변수
	String savedMsg=null;
	for(Cookie tmp:cooks){
		String key=tmp.getName();
		//만일 우리가 찾는 키값이라면
		if(key.equals("savedMsg")){
			//해당 키값으로 저장된 value를 읽어온다.
			savedMsg=tmp.getValue();
		}
	}
%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>savedMsg라는 키값으로 저장된 문자열: <%= savedMsg %></p>
	<%--EL을 활용하면 아래와 같다 --%>
	
	<p>savedMsg라는 키값으로 저장된 문자열 : ${cookie.savedMsg.value}</p>
	<a href="cookie_form.jsp">다시 테스트</a>
	<br />
	<a href="cookie_delete.jsp">쿠키 삭제</a>
</body>
</html>

cookie_delete.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//삭제할 키 값을 가지고 있는 Cookie 객체 생성
	Cookie cook=new Cookie("savedMsg","");
	//Cookie 유지시간을 0으로 설정하고
	cook.setMaxAge(0);
	//응답하면 Cookie가 강제로 삭제됨
	response.addCookie(cook);
%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p><strong>savedMsg</strong>라는 키값으로 저장된 쿠키를 삭제했습니다</p>
	<a href="cookie_read.jsp">쿠키 다시 읽어보기</a>
</body>
</html>

로그인 정보 쿠키가 저장되어 로그인 정보를 기억하는 형식

loginform.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//쿠키에 저장된 아이디와 비밀번호를 담을 변수
	String savedId="";
	String savedPwd="";
	//쿠키에 저장된 값을 위의 변수에 저장하는 코드를 작성해 보세요.
	Cookie[] cooks=request.getCookies();
	if(cooks!=null){
		//반복문 돌면서 쿠키객체를 하나씩 참조해서 
		for(Cookie tmp: cooks){
			//저장된 키값을 읽어온다.
			String key=tmp.getName();
			//만일 키값이 savedId 라면 
			if(key.equals("savedId")){
				//쿠키 value 값을 savedId 라는 지역변수에 저장
				savedId=tmp.getValue();
			}
			if(key.equals("savedPwd")){
				savedPwd=tmp.getValue();
			}
			
		}
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_cookie/login_form.jsp</title>
</head>
<body>
	<form action="login.jsp" method="post" >
		<table>
			<tr>
				<th><label for="id">아이디</label></th>
				<td><input type="text" name="id" id="id" value="<%=savedId %>"/></td>
			</tr>
			<tr>
				<th><label for="pwd">비밀번호</label></th>
				<td><input type="password" name="pwd" id="pwd" value="<%=savedPwd %>"/></td>
			</tr>
			<tr>
				<td></td>
				<td>
					<label>
						<input type="checkbox" name="isSave" value="yes" <%=savedId=="" ? "" : "checked"%>/>
						로그인 정보 저장
					</label>
				</td>
			</tr>
			<tr>
				<td></td>
				<td><button type="submit">로그인</button></td>
			</tr>
		</table>
	</form>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	
	//가상의 로그인 페이지
	String id=request.getParameter("id");
	String pwd=request.getParameter("pwd");
	//체크박스를 체크한 상태로 로그인 버튼을 누르면 null 이 아니다. (체크하지 않으면 null)
	String isSave=request.getParameter("isSave");
	if(isSave != null){
		//아이디 비밀번호를 쿠키로 응답하고 1주일 동안 유지되도록 한다.
		Cookie cook1=new Cookie("savedId", id);
		Cookie cook2=new Cookie("savedPwd", pwd);
		cook1.setMaxAge(60);
		cook2.setMaxAge(60);
		response.addCookie(cook1);
		response.addCookie(cook2);
	}else{
		//특정 키값으로 저장된 쿠키값 삭제하기 (value 에는 아무 값이나 넣어도 상관없다)
		Cookie cook1=new Cookie("savedId", "");
		Cookie cook2=new Cookie("savedPwd", null);
		cook1.setMaxAge(0);
		cook2.setMaxAge(0);
		response.addCookie(cook1);
		response.addCookie(cook2);
	}	
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p><%=id %>님 로그인 되었습니다</p>
	<a href="loginform.jsp">다시 테스트</a>
</body>
</html>

<17:30 8교시>

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

{JSON} Placeholder Free fake and reliable API for testing and prototyping. Powered by JSON Server + LowDB. Serving ~3 billion requests each month.

jsonplaceholder.typicode.com

가짜 백엔드

했던 내용 복습하기

'공부의 기록 > 자바 풀 스택 : 수업내용정리' 카테고리의 다른 글

자바 풀 스택 1/13 오후 기록 036-2 (0)	2025.01.13
자바 풀 스택 1/13 오전 기록 036-1 (0)	2025.01.13
자바 풀 스택 1/10 오전 기록 035-1 (0)	2025.01.10
자바 풀 스택 1/9 오후 기록 034-2 (0)	2025.01.09
자바 풀 스택 1/9 오전 기록 034-1 (0)	2025.01.09

현재글자바 풀 스택 1/10 오후 기록 035-2

하고 싶은 게 너무나 많아

유희하는 ENFP, 어제보다 나은 나를 위하여!

티스토리챌린지, 오블완,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

하고 싶은 게 너무나 많아