1125 | 스프링의 정석 :: 2-4
HTML형식으로 띄우기!
원리는 기존과 동일하다.
1124 | 스프링의 정석 :: 1-9
Http 요청과 응답 👉 프로그램의 실행 결과를 톰캣이 아니라 브라우저에 출력하기 👉 입력값을 main 메서드의 args로 받으므로, 콘솔에서 실행 target > 우클릭 > show in > Terminal > cd>classes로 이동해서
ala-nueva.tistory.com
👉다만 입력값이 없으므로 request를 제외하고 response만 넣되, outprintln에 HTML형식으로 내용을 작성해준다.
@Controller
public class TwoDice {
@RequestMapping("/rollDice")
public void main(HttpServletResponse response) throws IOException{
response.setContentType("text/html"); // html 일때 text/html
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.println("<html>");
out.println("<head>");
out.println("</head>");
out.println("<body>");
out.println("<img src = '/img/dice1.jpg'>");
out.println("<img src = '/img/dice2.jpg'>");
out.println("<img src = '/img/dice3.jpg'>");
out.println("</body>");
out.println("</html>");
}
}이때 이미지파일은 src아래에 폴더자체를 넣어준다.
톰캣 돌렸는데 톰캣이 45초가 지나도록 안된다고 시간 늘리라고 에러창이 뜨질않나, 코드에 괄호 하나가 더 들어가있어서 내용을 받아올 수 없다고 에러가 뜨질 않나 (캡쳐해뒀어야했는데 해결한다고 이것저것 만지면서 창을 닫아버림) 식겁했으나 추론하면서 찾아가니까 일단은 소소한 에러라 해결가능했다.
(정신이 없긴 없나보다. 이 글을 쓰면서 다시보니 body안에 이미지를 넣어야하는데 헤드안에 넣어놔서 수정함)
🤷♀️ 이미지가 왜 안끌려왔는지 확인해보자
👉 우클릭 > 검사 창에서 http://localhost:8080/ch2/rollDice 이하에 /img/dice1.jpg 로 이미지 경로까지 입력했을시, 404에러가 뜬다는건 경로가 잘못되었다는 것. 이미지가 리소스 폴더 안에 있으므로 그 경로로 수정해서 작성
👉 http://localhost:8080/ch2/resources/img/dice1.jpg 로 입력하자 이미지가 출력된다.
out.println("<img src = 'resources/img/dice1.jpg'>");
out.println("<img src = 'resources/img/dice2.jpg'>");
out.println("<img src = 'resources/img/dice3.jpg'>");👉 알맞은 이미지 경로를 확인했으므로 이미지경로를 재설정해준다.
👉 웹페이지에서 바로 이미지가 출력되는걸 볼 수 있다.
🤷♀️ 항상 같은 이미지가 아니라, 다른 이미지가 뜨도록 하고싶다면?
public void main(HttpServletResponse response) throws IOException{
int idx1=(int)(Math.random()*6)+1; // 랜덤값 추출
int idx2=(int)(Math.random()*6)+1;
int idx3=(int)(Math.random()*6)+1;
response.setContentType("text/html"); // html 일때 text/html
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.println("<html>");
out.println("<head>");
out.println("</head>");
out.println("<body>");
out.println("<img src = 'resources/img/dice"+idx1+".jpg'>"); //변동값출력.
out.println("<img src = 'resources/img/dice"+idx2+".jpg'>"); //기존의 'resources/img/dice2.jpg'는 고정값
out.println("<img src = 'resources/img/dice"+idx3+".jpg'>");
out.println("</body>");
out.println("</html>");
✔서버가 제공하는 리소스 종류에는 두가지가 있다
TwoDice 클래스는 실행할때마다 결과가 달라짐 ▶ 동적 리소스
이미지파일 ▶ 정적리소스
1. 동적리소스 : 프로그램이 생성해내는 리소스 결과. 리소스 내용이 고정되어있지 않음. ex. 스트리밍(라이브방송)
2. 정적리소스 : 파일형태로 되어있어서 바뀌지 않는 것 (이미지, *.js, *.css *.html)
Http요청과 응답
✔ 클라이언트와 서버
클라이언트 (client)
: 서비스 요청. 브라우저로 프로그램을 호출해서 요청
서버(server)
: 서비스(service) 제공. 프로그램을 실행해서 html로 반환해줌
(* 웹프로그래밍: 요청을 받아서 출력할 수 있는 문자열을 만들어주는 것)
++ etc.
하나의 JAR가 TLD들을 찾기 위해 스캔되었으나 아무 것도 찾지 못했습니다
> 톰캣 돌아가면서 이 문구가 지나가는데 출력에는 문제가 없었단 말이지... 이 문구가 무슨뜻인지 아직은 이해 못하지만 (구글링해봐도 아직은 이해를 못하겠다) 나중에 알아들으면 추가해야지.
아주아주 기본이자 쉬운파트이긴 하지만, 나는 이번 파트를 작업하면서 가장 흥미로웠고 이러려고 자바를 공부했구나...! 가 확 느껴지는 부분이었다. 몇 달 전에 Math.random()으로 로또숫자 출력할 때는 원리는 알겠는데 이걸 어쩌려는거지 싶었는데 지금은 출력물과 연결되니까 너무너무 신기했다. 👏👏👏 특히 초등학교때 html 혼자 공부하다가 머릿속에 남은거라곤 헤드, 바디와 같은 기본틀과 img src 밖에 없었는데 어릴때 알음알음 알던 지식과 20년뒤의 내가 공부해서 만들어낸 합작물을 보는거같아서 너무 신이 났다. 뒤로가서 어려워져도 이 마음 간직하길 ㅋㅋㅋㅋㅋㅋ