32일차 내용 정리

채공부·2025년 7월 8일

JavaScript

in java

  • 메소드는 반드시 클래스 안에만 존재 (단독으로 존재 불가)
  • heap 영역의 객체를 통해 사용 or static 영역에 로드된 클래스에서 직접 사용
class Main{
		↱heap 영역 안의 객체에 만들어지는 메소드
	public void test(){}
	public static void main(){}
    ↳ static 영역 안의 클래스에 만들어지는 메소드
}

in javascript

  • 함수 자체가 data
  • 변수에 할당, 다른 함수에 함수를 전달 가능
function test(){
}

const test = function(){};
const test = ()=>{};
  • 함수를 호출하면서 함수 전달
<script>
	// 기상하는 함수
	function wakeUp(callback){
		setTimeout(()=>{
        	console.log("1. 기상 완료");
       		callback();
		},1000);
	}
        
	// 밥먹는 함수
	function eatBreakfast()

	}

	// 학교 가는 함수
	function goToSchool(){
	}

	wakeUp(()=>{
		eatBreakfast();
	});
</script>

FileReader

<h3>이미지를 선택하세요</h3>
<input type="file" id="fileInput" accept="image/*" multiple>
<div id="preview"></div>
<script>
	 // 이미지를 선책했을 때 실행할 함수 등록
     document.querySelector("#fileInput").addEventListener("change",(e)=>{
		// e.target 은 "change" 이벤트가 발생한 바로 그 요소의 참조값
		// 선택된 파일 객체가 들어있는 배열
		// const filese = document.querySelector("#fileInput").files;
		const files = e.target.files;
		// FileReader 객체를 이용해서 선택한 파일 데이터를 읽어들인다
		const reader = new FileReader();
		// files 배열의 0 번 방에 들어 있는 파일을 DataURL 형식으로 읽어들기ㅗ
		reader.readAsDataURL(files[0]);
		// 다 읽었을 때 실행할 함수 등록
		reader.onload = () => {
			// 읽은 DataURL 형식의 문자열을 콘솔창에 출력하기
            console.log(reader.result);
		};
		console.log("FileReader 객체를 이용해서 읽기 시작!");
	});
</script>

➜ 밑에 있는 콘솔을 먼저 출력 = 비동기 방식

  • HTML 화면에 이미지 출력
// backtic 을 이용해서 html 형식의 문자열을 구성하고
const img = `<img src="${reader.result}">`;
// id 가 preview 인 곳에 HTML 로 해석이 되도록 끼워넣는다
document.querySelector("#preview").insertAdjacentHTML("beforeend",img);
⭐ insertAdjacentHTML : HTML로 해석
  • 출력 순서 보장
<h3>이미지 2개를 선택하세요</h3>
<input type="file" id="fileInput" accept="image/*" multiple>
<div id="preview"></div>
<script>
	// 이미지를 선책했을 때 실행할 함수 등록
   	document.querySelector("#fileInput").addEventListener("change",(e)=>{
		const files = e.target.files;
		// 0 번 방 이미지 로딩
		const reader = new FileReader();
		reader.readAsDataURL(files[0]);
		reader.onload = () => {
			const img = `<img src="${reader.result}">`;
			document.querySelector("#preview").insertAdjacentHTML("beforeend",img);
			// 1 번 방 이미지 로딩
			const reader2 = new FileReader();
			reader2.readAsDataURL(files[1]);
			reader2.onload = () => {
				const img = `<img src="${reader2.result}">`;
                document.querySelector("#preview").insertAdjacentHTML("beforeend",img);
			};
		};
	});
</script>

➜ callback 함수 지옥에 빠져들 수 있다

Promise

  • callback 함수 지옥을 해결해주는 방법

Promise 객체라면 or 해당 Promise 가 해결 (resolve) 되면

  • then( ) 안에 전달한 함수가 호출되고 resolve() 로 전달한 데이터가 매개변수에 전달된다
.then((data)=>{
	여기서 Promise 객체를 또 리턴하면 두번째 then() 에 있는 함수가 호출
})
.then((data)=>{

})
  • 삽입한 순서대로 사진 출력
<h3>이미지 2개를 선택하세요</h3>
<input type="file" id="fileInput" accept="image/*" multiple>
<div id="preview"></div>
<script>
	// FileReader를 Promise 로 감싸는 함수 (Promise 객체를 리턴하는 함수)
	function readFile(file){
    const promise = new Promise((resolve)=>{
    	// 이 안에서 비동기 동작을 하고 동작이 완료되면 resolve() 함수를 호출
    	// 호출하면서 필요 시 매개변수에 동작의 결과 데이터를 전달 가능
    	const reader = new FileReader();
    	reader.readAsDataURL(file);
    	reader.onload = ()=>{
			// resolve() 함수를 호출하면서 읽은 결과 데이터 전달
			resolve(reader.result);
			};
 		});
        return promise;
	}

	// 이미지를 선택했을 때 실행할 함수 등록
    document.querySelector("#fileInput").addEventListener("change",(e)=>{
		const files = e.target.files;
        // Promise 객체를 리턴해주는 readFile() 함수를 호출하면서 file 객체 전달
        readFile(files[0])
        .then(data=>{
			// data 는 읽은 이미지의 DataURL
			const img = `<img src = "${data}">`;
            document.querySelector("#preview").insertAdjacentHTML("beforeend", img);
				// 두번째 Promise 객체를 리턴해준다
				return readFile(files[1]);
		})
		.then(data=>{
			const img = `<img src = "${data}">`;
            document.querySelector("#preview").insertAdjacentHTML("beforeend", img);
		});
	});
</script>

JAVA

전제조건 : Tomcat 으로 Server 와 연동

⭐  src : java 클래스를 만들고 coding 하는 공간
    webapp : 클라이언트 (웹브라우저)에게 서비스할 파일을 넣어 놓는 공간
                                               ⭣
                            (HTML, CSS, JavaScript, 이미지, Jsp 등)
             요청 경로만 맞으면 웹 서버는 해당 컨텐츠를 찾아서 응답

run 버튼 click

  • html 페이지를 선택해서 run 버튼을 누르면
  1. Tomcat Server 가 html 페이지가 속해 있는 Hello 프로젝트를 서비스할 준비를 한다
  2. Tomcat Server 를 start 시킨다
  3. Computer 에 설정된 default 시스템 웹 브라우저를 실행시키면서 해당 html 페이지를 로딩할 경로를 전달한다
  4. 웹 브라우저는 전달받은 경로대로 요청을 한다
  5. Tomcat 서버는 해당 요청에 대해서 적절한 컨텐츠를 응답한다

Eclipes로 HTML & CSS & JavaScript

  • index.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
	<h1>인덱스 페이지 입니다</h1>
	<a href="study.html">공부하기</a>
	<a href="sub/play.html">놀러가기</a>
	<a href="images/SouthKorea.png">South Korea 이미지</a>
	<br />
	<img src="images/SouthKorea.png" alt="대한민국 국기" />
</body>
</html>
  • study.html 파일 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>study.html</title>
</head>
<body>
	<h1>공부하는 페이지</h1>
</body>
</html>
  • sub 폴더 생성 후 그 안에 play.html 파일 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/sub/play.html</title>
</head>
<body>
	<h1>노는 페이지</h1>
</body>
</html>
  • css 파일 생성
@charset "UTF-8";

/* webaap/css/custom.css 파일*/
h1{
	color:red;
	background-color:yellow;
}

경로 설정

  • 외부 css 로딩
<link rel="stylesheet" href="css/custom.css"/>

➜ 경로 앞에는 기본 ./ 이 생략
    여기서 / 는 webapp

  • 상위 경로
<link rel="stylesheet" href="../css/custom.css"/>
⭐ 상위 폴더 : ../
  • tomcat 서버 내에서의 절대 경로
<li><a href="/Hello/study.html">공부하기</a></li>
  • web 에서의 절대 경로
<li><a href="http://localhost:8888/Hello/study.html">공부하기</a></li>

➤ 이 경로로 요청을 해서 응답되는 문자열을 css 로 평가해 해석해준다

  • 외부 javaScript 로딩
<script src="/Hello/js/my-script.js"></script>

➤ 이 경로로 요청을 해서 응답되는 문자열을 javascript 로 해석해준다

Servlet

java Resources > src/main/java 에
test.setvlet package 생성, 그 안에 FortuneServlet class 생성
  • index 페이지
<li><a href="/Hello/fortune">오늘의 운세 보기</a></li>
  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 : 응답 관련
  1. 어떤 경로 요청이 오면 이 객체로 응답할지 정보를 맵핑
@WebServlet("/fortune")
public class FortuneServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    }   
}
  • 응답 인코딩 설정
response.setCharacterEncoding("utf-8");
  • 응답 컨텐츠 설정
response.setContentType("text/html; charset=utf-8");

오늘의 운세 출력

package test.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/fortune")
public class FortuneServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {	
		// 20개의 운세 목록
        String[] fortunes = {
            "동쪽으로 가면 귀인을 만나요!",
            "서쪽으로 가면 돈을 벌 수 있어요!",
            "오늘은 조심히 행동하세요.",
            "뜻밖의 선물을 받게 될 거예요!",
            "좋은 친구를 만나게 될 거예요.",
            "지금 떠오른 생각을 실천해보세요.",
            "잠시 휴식을 취해보세요.",
            "계획했던 일이 순조롭게 풀려요.",
            "전화 한 통이 기쁨을 가져다줄 거예요.",
            "오늘은 행운의 날이에요!",
            "도움이 필요한 사람을 도와보세요.",
            "기대하지 않은 곳에서 기회를 얻어요.",
            "옛 친구에게 연락이 올 거예요.",
            "실수가 전화위복이 돼요.",
            "포기하지 마세요, 좋은 일이 생길 거예요.",
            "당신의 노력이 결실을 맺어요.",
            "즐거운 소식이 찾아올 거예요.",
            "자신감을 가지세요, 당신은 잘하고 있어요.",
            "마음의 여유를 가지세요.",
            "오늘은 당신 편이에요, 무엇이든 해보세요!"
        };

        // 랜덤하게 운세 선택
        Random rand = new Random();
        String fortuneToday = fortunes[rand.nextInt(fortunes.length)];
		
		// 응답 인코딩 설정
		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("<p> 오늘의 운세 : "+fortuneToday+" </p>");
        pw.println("<img src='/Hello/images/clover.png'>");
		pw.println("</body>");
		pw.println("</html>");
		pw.close();
	}
}
  • 출력 결과
오늘의 운세 : 오늘은 행운의 날이에요!

네잎클로버 사진 출력된 상태
profile
채공부
학원 공부 내용 정리
이전 포스트

31일차 내용 정리

다음 포스트

33일차 내용 정리

0개의 댓글