34일차 내용 정리

채공부·2025년 7월 10일

JavaScript

Promise

then 추가 가능

new Promise(()=>{
	비동기 동작이 실행되는 영역
})
.then(()=>{
	위의 Promise가 resolve 되면 실행되는 영역
})
.catch(()=>{
	위의 Promise가 reject 되거나 실행 중에 Error 발생 시 실행되는 영역
});

2개의 이미지 출력

<h3>이미지 2개를 선택하세요</h3>
<input type="file" id="fileInput" accept="image/*" multiple>
<div id="preview"></div>

function readFile(file){
	const promise = new Promise((resolve)=>{
		const reader = new FileReader();
    	reader.readAsDataURL(file);
		reader.onload = ()=>{
		 	resolve(reader.result);
    	};
    });
    return promise;
}

// 이미지 파일을 선택하고 확인을 누르면 change 이벤트 발생
document.querySelector("#fileInput").addEventListener("change", async (e)=>{
	const files = e.target.files;
	try{
		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);
	} catch(err){
		console.log(err);
	};
});

await

우측에 있는 Promise가 resolve 될 때까지 기다린다 = 실행의 흐름이 잡혀있다
resolve되면 대입연산자의 우측에 값이 결정되고 대입연산자가 동작해서 data에 값이 대입된다
data 는 resolve를 호출하면서 전달한 값
async 예약어가 필수이며 return 하는 시간이 걸린다는 의미

try{
	let data = await new Promise(()=>{
		
	});
} catch(e){
	위의 Promise가 reject 되거나 실행 중에 Error 발생 시 실행되는 영역
}

3초 뒤 출력

async function test(){
	console.log("test 함수 시작");
	const data = await new Promise((resolve)=>{
		console.log("3초가 걸리는 작업");
		setTimeout(()=>{
			resolve("hello");
		}, 3000);
	});
	console.log("data:"+data);
	console.log("test 함수 리턴");
}

> test()
Step14_promise4.html:56 test 함수 시작
Step14_promise4.html:59 3초가 걸리는 작업
< Promise {<pending>}

... 3초 후
Step14_promise4.html:64 data:hello
Step14_promise4.html:65 test 함수 리턴

JAVA

주석

웹 브라우저가 무시하는 주석

<!-- 안녕하세요 -->

➜ 클라이언트에게 출력된다

jsp 페이지가 무시하는 주석

<%-- 반갑습니다 --%>

➜ 클라이언트에게 출력되지 않는다

java 에서 주석

// 좋은 하루 되세요

java 에서 여러줄 주석

/*  
	즐거운
    하루 보내세요
*/

JSP

<form action="save.jsp" method="post">
	<input type="text" name="inputName" placeholder="숫자 입력" />
	<button type="submit">저장</button>
</form>

전송된 데이터 출력

<%
	int num =  Integer.parseInt(request.getParameter("inputName"));
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/jsp/save.jsp</title>
</head>
<body>
	<% if(num%2==0) { %>
		<p>전송한 숫자 <%=num %> 는 짝수 입니다</p>
	<%} else{ %>
		<p>전송한 숫자 <%=num %> 는 홀수 입니다</p>
	<%} %>
</body>
</html>

삼항 연산자

<h3>3항 연산자 이용</h3>
<p>입력한 숫자 <%=num%>는 <%=num%2 == 0? "짝수":"홀수" %> 입니다</p>

경로 설정

context path

context path 를 HttpServletRequest 객체의 메소드를 이용해 얻는다

<%
	String cPath = request.getContextPath();
%>

<a href="<%=cPath%>/index.html">인덱스</a>

Expression Language

EL : jsp 페이지에서 특별히 해석되는 언어
💡 ${ 이 안에 작성하는 언어가 EL }

⭐ jsp page 안에서 ${ }은 특별한 기호
   클라이언트에게 해당 기호가 있는 부분을 그대로 출력하지 않고 해석한 결과를 출력
   jsp page가 ${ }를 해석하지 않게 만들려면 앞에 \ 를 붙어주면 된다

<a href="${pageContext.request.contextPath}/index.html">인덱스</a>
<img src="${pageContext.request.contextPath}/images/Spain.png"/>

context path를 미리 변수에 담아두고 편리하게 사용 가능

JS에서 ${ }

JSP가 ${ } 를 EL 로 해석하지 않도록 앞에 \ 를 붙여 클라이언트로 전달

function printMsg(msg){
	const result = `매개 변수에 전달된 내용:\${msg}`;
	console.log(result);
}

수정 form

기본값 설정

String nickName = "유재석";
String gender = "man";
String job = "developer";
String hobbys = "[\"game\", \"music\"]";

value

닉네임 입력

<label for="nick">닉네임</label>
<input type="text" name="nick" id="nick" value="<%=nickName %>"/>

성별 선택

<fieldset>
	<legend>성별</legend>
	<label>
		<input type="radio" name="gender" value="man"/>남자
		<input type="radio" name="gender" value="woman" />여자
	</label>
</fieldset>

checked

성별 속성

<input type="radio" name="gender" value="man" checked/>
<input type="radio" name="gender" value="woman"/>

➜ name 이 같다면 같은 그룹으로 묶어서 그 그룹에서 하나만 선택 가능

checked : input 요소의 초기 상태를 결정
같은 name을 가진 <input type="radio"> 는 하나만 선택 가능
- <%=gender.equals("man")? "checked":""%>
  <%=gender.equals("woman")? "checked":"" %>

⭐ js에서 문자열 비교
    gender == "man"
    
    java에서 문자열 비교
    gender.equals("man")

selected

<select> 태그의 <option> 요소의 기본값 선택

<div>
	<label for="job">직업</label>
	<select name="job" id="job">
		<option value="student"<%=job.equals("student")?"selected":"" %>>학생</option>
		<option value="developer" <%=job.equals("developer")?"selected":"" %>>개발자</option>
		<option value="etc"<%=job.equals("etc")?"selected":"" %>>기타</option>
	</select>
</div>

contains

저장된 값 목록에 특정 항목이 포함되어 있는지 확인
여러 개 선택 가능한 <input type="checkbox"> 는 DB에서 여러 값을 배열 or 리스트로 저장

<fieldset>
	<legend>취미 (여러개 선택 가능)</legend>
	<label>
		<input type="checkbox" name="hobby" value="game" <%=hobbys.contains("game") ? "checked":""%>/>게임
	</label>
	<label>
		<input type="checkbox" name="hobby" value="sports" <%=hobbys.contains("sports")? "checked":"" %>/>스포츠
	</label>
	<label>
		<input type="checkbox" name="hobby" value="music" <%=hobbys.contains("music")? "checked":"" %>/>음악
	</label>
</fieldset>

getParameterValues

여러 개의 정보가 넘어올 수 있는 경우 사용
아무 것도 선택하지 않으면 null 도 가능
같은 name 을 가진 input이 여러 개를 전송하면 폼 제출 시 값이 배열로 넘어간다

String[] hobbys = request.getParameterValues("hobby");

if(hobbys != null){
	for(String tmp : hobbys){
		System.out.println("hobby"+tmp);
	}
}

폼 전송 정보 추출

String nick = request.getParameter("nick");
String gender = request.getParameter("gender");
String job = request.getParameter("job");

System.out.println("nick:"+nick);
System.out.println("gender:"+gender);
System.out.println("job:"+job);
System.out.println("comment:"+comment);

JSON

MVN REPOSITORY

➜ lib 폴더에 해당 gson 파일 붙여넣기

String[] 에 저장된 문자열을 json 문자열로 변환

String[] hobbys = request.getParameterValues("hobby");

if(hobbys != null){
	Gson gson = new Gson();
	String result = gson.toJson(hobbys);
	System.out.println(result);
}