33일차 내용 정리

채공부·2025년 7월 9일

JavaScript

Promise

Promise 객체 생성 방법

  • 생성하면서 생성자에 함수를 전달
new Promise(()=>{});
  • 전달한 함수에 매개변수를 선언하면 매개변수에 각각 함수가 전달
  • 즉 a.b 는 function type
new Promise((a,b)=>{});
  • 작업이 성공하면 resolve(data) 호출하면서 결과 데이터 전달
  • 작업이 실패하면 reject(new Error("에러메세지")) 호출하면서 에러 객체를 생성해서 전달
						↱ 작업이 실패했을 때 호출하는 함수
new Promise((resolve, reject)=>{});
				↳ 어떤 작업이 성공적으로 끝 마쳤을 때 호출하는 함수

Promise 의 resolve & reject

new Promise((resolve, reject)=>{
	resolve(xxx);
 	reject(new Error("xxx"));
})
.then(data=>{
	작업 성공 시 resolve 결과 데이터 전달
})
.catch(err => {
	Exception 발생 or reject 발생 시 실행
});
⭐ .catch() : try~catch 의 catch 역할

Promise chain

  • then에서 다시 Promise 객체를 리턴하면 뒤에 또 .then() 을 붙일 수 있다
new Promise(()=>{

})
.then(()=>{
	첫번째 Promise 실행 시 해당 then 실행
	return new Promise(()=>{})
})
.then(()=>{
	두 번째 Promise 실행 시 해당 then 실행
})
.
.
.
.catch(()=>{

});

FileReader

  • 화면에 이미지 출력
<h3>이미지 2개를 선택하세요</h3>
<input type="file" id="fileInput" accept="image/*" multiple>
<div id="preview"></div>
  • FileReader를 Promise 로 감싸는 함수 = Promise 객체를 리턴하는 함수
function readFile(file){
	const promise = new Promise((resolve)=>{
		const reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = ()=>{
			 resolve(reader.result);
        };
    });
    return promise;
}
➤ readFile 함수는 promise 객체를 return
   매개변수에 전달된 파일 객체를 FileReader로 읽는다
   읽기까지 시간이 걸리기에 다 읽은 후 onload 함수를 호출
  • 이미지 선택 시 실행하는 함수
document.querySelector("#fileInput").addEventListener("change",(e)=>{
	const files = e.target.files;
	readFile(files[0])
	.then(data=>{
		const img = `<img src = "${data}">`;
		document.querySelector("#preview").insertAdjacentHTML("beforeend", img);
		return readFile(files[1]);
	})
	.then(data=>{
		const img = `<img src = "${data}">`;
		document.querySelector("#preview").insertAdjacentHTML("beforeend", img);
	});
});

e : 발생한 이벤트에 대한 정보를 담고 있는 event object
e.target : change 이벤트가 발생한 바로 그 요소 (input 요소) 의 그 참조값이 들어 있다
e.target.files : 선택된 파일 객체가 들어 있는 파일 배열

⭐ readFile(files[0]) : Promise type return

await Promise

  • await 예약어 우측에 있는 Promise 객체가 resolve될 때까지 기다린다는 의미
  • 해당 Promise 가 resolve 되면 결과 데이터가 return
  • 리턴된 결과 데이터가 좌측의 변수나 상수에 대입
  • await이 들어 있는 함수는 반드시 비동기(async) 함수로 만들어야 한다

Promise가 해결될 때 까지 실행의 흐름이 멈춤 = Blocking

document.querySelector("#fileInput").addEventListener("change", async (e)=>{
	const files = e.target.files;
	const data1 = await readFile(files[0]);
	const img1 = `<img src="${data1}">`;
	document.querySelector("#preview").insertAdjacentHTML("beforeend", img1);

	const data2 = await readFile(files[1]);
	const img2 = `<img src="${data2}">`;
	document.querySelector("#preview").insertAdjacentHTML("beforeend", img2);
});

JAVA

Servlet

전제 조건 : DBConnector MemberDto MemberDao 파일 존재
webapp > WEB-INF > lib 폴더에 외부 jar 파일을 붙여넣기 하면 이
Project 에서 해당 jar 파일을 사용 가능 = import 가능
  1. HttpServlet 클래스 상속
public class FortuneServlet extends HttpServlet{

}
  1. service( ) 메소드를 오버라이드
public class FortuneServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
	}   
}
⭐ HttpServletRequest : 요청 관련
   HttpServletResponse : 응답 관련       
   response : 메소드의 매개 변수 HttpServletResponse type 객체
  1. 어떤 경로 요청이 오면 이 객체로 응답할지 정보를 맵핑
@WebServlet("/members")
public class FortuneServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    }   
}

➜ Servlet 객체는 하나만 생성하고 재활용 (서비스 메소드만 재 호출)

  • 응답 인코딩 설정
response.setCharacterEncoding("utf-8");
  • 응답 컨텐츠 설정 = 웹브라우저에게 준비시키는 과정
response.setContentType("text/html; charset-utf-8");
  • 클라이언트에게 출력할 수 있는 객체의 참조값 얻어내기

PrinWriter : 클라이언트에게 문자열을 출력해주고 싶을 때 사용

PrintWriter pw = response.getWriter();

서블릿 요청과 응답 처리 흐름

  1. 요청
    클라이언트 ⭢ Apache Http Server(정적 컨텐츠라면 여기서 처리) ⭢ 동적 컨텐츠라면 Tomcat으로 전달

  2. 응답 객체 (HttpServletResponse)
    Tomcat이 클라이언트 요청을 처리할 서블릿을 실행하면서 HttpServletRequest 와 HttpServletResponse 객체를 만들어서 Servlet에 넘긴다

  3. Servlet
    response.getWriter()로 출력 stream 을 얻어서 결과를 작성
    Tomcat이 작성된 응답을 Apache HTTP Server or 직접 클라이언트에게 전달

HttpServletResponse

  • 목록 테이블 출력
pw.println("<!doctype html>");
pw.println("<html>");
pw.println("<head>");
pw.println("<meta charset='utf-8'>");
pw.println("<title>회원 목록 페이지</title>");
pw.println("</head>");
pw.println("<body>");

pw.println("<h3>회원 목록</h3>");
pw.println("<table border='1' cellpadding='8' cellspacing='0'>");

// thead 영역
pw.println("<thead>");
	pw.println("<tr>");
		pw.println("<th>번호</th>");
		pw.println("<th>이름</th>");
		pw.println("<th>주소</th>");
		pw.println("</tr>");
pw.println("</thead>");
	
// tbody 영역 (예시 데이터 포함)
pw.println("<tbody>");
for (MemberDto tmp : list) {
	pw.println("<tr>");
		pw.println("<td>"+tmp.getNum()+"</td>");
		pw.println("<td>"+tmp.getName()+"</td>");
		pw.println("<td>"+tmp.getAddr()+"</td>");
	pw.println("</tr>");
}
pw.println("</tbody>");
			
pw.println("</table>");
pw.println("</body>");
pw.println("</html>");
pw.close();

SSR = 서버 사이드 렌더링
db에서 데이터를 불러와서 완성된 markup을 한 번에 준다
server에서 DB data를 가져와서 완성된 HTML(markup)을 만들어 클라이언트에게 전달

CSR = 클라이언트 사이드 렌더링
makrup을 클라이언트가 완성
클라이언트가 server에서 data를 받아 브라우저에게 직접 markup을 완성

⭐ /프로젝트명 = context path

여러 개의 프로젝트 중 서버 실행 유무 선택

  • index 페이지 생성
<div class="conatiner">
	<h1>인덱스 페이지 입니다</h1>
	<ul>
		<li><a href="/Step01Servlet/friends">친구 목록</a></li>
	</ul>
</div>
  • FriendsServlet 생성
@WebServlet("/friends")
public class FriendsServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// DB 에서 읽어온 친구 목록이라고 가정
		List<String> names = new ArrayList<>();
		names.add("유재석");
		names.add("박명수");
		names.add("정준하");
		
		// 응답 인코딩 설정
		response.setCharacterEncoding("utf-8");
		// 응답 컨텐츠 설정
		response.setContentType("text/html; charset=utf-8");

		// 클라이언트에게 출력할 수 있는 객체의 참조값 얻어내기
		PrintWriter pw = response.getWriter();
		pw.println("<!doctype html>");
		pw.println("<html>");
		pw.println("<head>");
		pw.println("<meta charset='utf-8'>");
		pw.println("<title>친구 목록</title>");
		pw.println("</head>");
		pw.println("<body>");
		pw.println("<h1>친구 목록입니다</h1>");
		pw.println("<ul>");
		
		for(String tmp : names) {
			pw.println("<li>"+tmp+"</li>");
		}
		
		pw.println("</ul>");
		pw.println("</body>");
		pw.println("</html>");
		pw.close();
	}
}

HttpServletRequest

  • 클라이언트가 요청을 하면서 전송한 요청 파라미터 추출

  • post 방식 전송인 경우 추출하기 전에 인코딩 설정을 해주어야 한글이 깨지지 않는다 (tomcat 10 부터는 자동으로 한다)

  • post

<form action="/Step01Servlet/send" method="post">
	<input type="text" name="msg" placeholder="할 말 입력.." />
	<button type="submit">전송</button>
</form>
  • 폼에 입력한 데이터 추출
String name = request.getParameter("name");
String msg = request.getParameter("msg");
  • get : 주소창에 입력값이 그대로 노출
<form action="/Step01Servlet/send" method="get">
	<input type="text" name="name" placeholder="이름 입력 "/>
	<input type="text" name="msg" placeholder="메세지 입력" />
	<button type="submit">전송</button>
</form>

➜ post 의 경우 보이지 않는다

동일 Servlet 에서 다른 동작 처리

  • Query String 으로 파라미터 전달
<ul>
	<li><a href="/Step01Servlet/member?num=1">1번 회원 정보 보기</a></li>
	<li><a href="/Step01Servlet/member?num=2">2번 회원 정보 보기</a></li>
</ul>

JSP

⭐ html 편하게 작성, java 로직도 처리 가능

✏️ JSP의 원리
   내부적으로 JAVA class 파일로 변형된다 ➜ 일종의 Servlet 객체로 변경
  • <%@ ... %> = 선언부
  • 특별한 영역에 작성된 내용 제외하고 그대로 응답
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  • java coding 영역
<%
	// Servlet의 service() 메소드 안쪽 영역이라고 이해하면 된다
%>
  • form 입력
<form action="/Step01Servlet/send.jsp" method="post">
	<input type="text" name="name" placeholder="이름 입력 "/>
	<input type="text" name="msg" placeholder="메세지 입력" />
	<button type="submit">전송</button>
</form>
  • form 데이터 받기
String uri = request.getRemoteHost();
// 입력한 이름 추출
String name = request.getParameter("name");
// 입력한 메세지 추출
String msg = request.getParameter("msg");
// 콘솔창에 출력해보기
System.out.println(name+" : "+msg);
  • 데이터 출력
    <%= %> = 참조 내용 출력 표현식
<p>보낸 사람의 이름 : <%=name %></p>
<p>보낸 내용 : <%=msg %></p>

하나의 JSP로 모든 처리

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	int num = 1;
	String name = "유재석";
	String addr = "압구정";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/jsp/test01.jsp</title>
</head>
<body>
	<h1>회원 한 명의 정보 입니다</h1>
	<p>번호 : <strong><%=num%></strong></p>
	<p>이름 : <strong><%=name%>님</strong></p>
	<p>주소 : <strong><%=addr%></strong></p>
</body>
</html>

➜ jsp 페이지를 요청하면 jsp 페이지가 해석된 결과가 출력

⭐ <%=name+"님"%> = out.write(name+"님")
  • 반복문 출력 방법
<%for(int i=0; i<3; i++){%>
	<li><%=name%></li>
<%}%>

   ⤷ 동일한 코드

for(int i=0; i<3; i++){
	out.write("<li>목록</li>");
}
  • 반복문으로 리스트 출력 
<%
	List<String> names = List.of("유재석", "박명수", "정준하");
%>
<h1>친구 목록입니다</h1>
<ul>
	<%for(String tmp : names){%>
		<li><%=tmp%></li>
	<%}%>
</ul>
profile
채공부
학원 공부 내용 정리
이전 포스트

32일차 내용 정리

다음 포스트

34일차 내용 정리

0개의 댓글