코딩 학원 32일차 (Jsp MVC 패턴)

Hoder2 2022. 7. 20. 22:45

어제 Jsp로 하던 거랑 비슷한데 좀 쉬운 버전으로 문제 하나 내주셨다.

Html에서

숫자 두개
X input
Y input
계산 버튼 누르면

Servlet에서는
+
-
나오게
근데 결과가 짝수면 파란색으로 나오게

다른건 그냥 다 하겠는데 파란색으로 나오게 하는 것이 String 변수를 4개나 더 만들어야 되서 뭔가 소스 길어지는게 싫었다.

홀수와 짝수 연산의 알고리즘을 찾아보겠다고

짝수 + 짝수 = 짝수
짝수 + 홀수 = 홀수
홀수 + 짝수 = 홀수
홀수 + 홀수 = 짝수

짝수 - 짝수 = 짝수
짝수 - 홀수 = 홀수
홀수 - 홀수 = 짝수
x와 y가 같다면 짝수

짝수 * 짝수 = 짝수
짝수 * 홀수 = 짝수
홀수 * 홀수 = 홀수

이 앰병을 떨다가 나누기에서 실수 나오는 거 보고 집어 던졌다.

계속 고민 하다가 메소드 하나 만들고 계산 값을 그 메소드 파라메터로 넣어주고 클래스명으로 사용할 String 값을 return되게 했다.

선생님도 메소드를 쓰긴 하셨는데 계산값 담을 변수 4개 만드시고 그 변수들을 파라메터 값과 출력용으로 사용하셨다. 그리고 cpu를 혹사시키지 말라고 하셨다.(그리고 나름의 빌드업이었다.)

세번째 페이지를 하나 만들라고 하셨다. jsp로

이렇게 sendRedirect를 이용해서 이동할 페이지를 재설정 해줄 수 있다.

업데이트 같은 것을 할 때 원래 페이지를 보여지지 못하게 하려고 사용하는 기능이다.

정리 좀 하자고 하셨다.

수동이동
1. <a> : 내용부분 누르면 GET 방식 요청
2. <form> + <button> : 버튼 누르면 GET/POST 방식 요청, 입력 받아서 하기 편함.

3. JavaScript

<button ondblclick="gogogo();">계산</button> 이런식으로 이용을 하고 ondblclick에 들어갈 내용을 여러가지 행동으로 바꿔서 이용이 가능하여 의미가 있다고 하셨다. 2.에서 입력 받기가 편하다고 했는데 여기서도 할 수가 있긴 하다.

이렇게 form 밖에 있는 쌩 인풋에 id를 지정하고

이렇게 Js에서 불러올 수 있다.

이런식으로 Js에서도 입력을 받아 get방식 요청을 할 수가 있지만 굳이 불편해서 안 하는 것이다.

4.자동이동

1) redirect : 공사중 딱 이 용도.

2) forward

RequestDispatcher를 챙겨서 이용하는 것이다. 이 것도 아까 redirect 처럼 계산을 누르면 공사중 페이지로 가진다.

그럼 이 두개는 뭐가 다른 것일까?

공사중 페이지에서 x, y값을 받아보라고 하셨다.

잘 받아진다.

그러면 이제 redirect로 받아보라 하셨다.

null이 뜬다.

처음 html 계산 페이지에서 요청을 하면 Calculator.jsp로 넘어갈텐데 이때 요청 했던 그 값이 실려서 가는 것이다. 그런 다음 redirect를 하면 그냥 진짜 redirect고 forward는 Dispactcher(디스패치를 생각하면 편하단다)가 처음에 Calculator.jsp로 가져왔던 요청 값을 가지고 간다.

그래서 foward는 데이터를 갖고 넘어갈 때 이용한다.

3) include

이 녀석도 고자질쟁이 dispactcher를 이용한다.

그런데 이제 다 가져간다. (데이터를 갖고 포함시킬 때)

그럼 이 친구를 밑으로 옮기면 Calculator.jsp의 내용은 다 나온 include에서 지정한 다음 페이지로 넘어갈까?

그런거 안 된단다.
결론은 include = 데이터를 갖고 포함시킬 때 [위치조절 x]

지금 x, y에 해당하는 parameter라는 값들은 html에서 만들어진 값이다.
형은 String(일반박스) or String[](체크박스)일 것이고 request에 소속 되어 실려다닌다.

그렇다면 html에서 만들어진 것이 아닌 java에서 만들어진 값들은 어떡하는가?

값들 중에는 attribute라는 것이 있는데 java에서 만들어진 값을 이걸로 옮긴다. (다른 곳에서 불러올 때도 attribute로 한다.) object 포함 아무거나 다 가능하며 역시 request 소속이다.

set 괄호 안의 값은 ("이름", 넣을 값)을 넣어준다.

파라메터는 이렇게 받아오는데

attribute는 오브젝트로 받아오며 이런식으로 형변환을 한다.

정석대로 하자면 이렇게 3줄이 나오는데

변수를 1회용(형변환용)으로만 쓸 거면 그냥 변수 안 만들고 이렇게 형변환 해도 된다.

자 그럼 JSP로 작업이 불편했던 것 까지 개선이 되었다. 그럼 이제 뭐가 문제일까?

개복잡하다.

JSP를 수업 하시면서 항상 강조 하셨던 것이 쓸 때 간편한거랑 보기 편한 것은 다르다는 것이다.

이제 실전[MVC 패턴]을 생각해야할 때이다. 그리고 이를 위한 것이 JSP Model 2 이다.

JSP Model 2 (정식 명칭인지는 모르겠다.)

JSP 프로젝트에 MVC패턴 적용.

C에 해당하는 Controller : 흐름제어 부터 해보자 하셨다.

Controller라 하면 상황판단해서 흐름제어 하는 앤데 jsp는 get/post 구별을 못하고, 웹기반에 구멍내서 java소스 쓰니까 복잡하기만 할 뿐이다. 그래서 servlet으로 한다.

사이트 진입점
주소를 알고 있어서 주소를 검색해서 접속한다. 혹은 주소를 몰라서 포털사이트 등에 검색을 해서 접속한다.

그러니까 사람들이 인터넷을 사용할 때, 어떤 사이트에 처음 들어갈 때 post 방식으로 하는 경우는 없을 것이다.
그래서 Servlet의 get쪽으로 들어간다.

이제 V(View)에 해당하는 html 페이지(누군가 우리 홈페이지를 접속했을 때 처음 마주하게될 페이지)를 만들고 아무거나 쓴다.

그리고 누군가 접속하면 강제로 그곳으로 보내준다.

이렇게 보낼 form을 대충 만들고 C servlet에 post 방식으로 요청한다.

그리고 실제로 계산 같은 것을 할 M(Model)을 그냥 Java Class로 만들어 준다.
jsp 쪽에서 자동완성이 열 받게 뻑뻑했는데 사실 여기서 다 할 것이기 때문에 의미가 없다.

저렇게 request를 받아와서 그 파라메터 값으로 계산을 하고 attribute로 보내준다.

C의 post 쪽에 java에서 만든 메소드 기능을 부르고 request값을 넣는다.

V2에 해당하는 JSP 파일을 만든다.

그리고 C의 post에서 forward를 써서 V2로 보낸다.

근데 윗윗 사진 처럼 힘들게 쓰지말고 이렇게 쓰란다.

V2.jsp 에서는 따로 계산할 필요 없이 request로 보내 놓은 값들 다 불러와서 출력만 해준다.

그리고 궁금해서 사이트에서 사이트로 request를 통해 보내 놓은 값들이 서버에 계속해서 잔류하는 건가 여쭤봤는데 값을 받고 보내고 난 다음에는 안 남긴다고 하셨다.

그리고 참고로 예전에 나왔던 thread는 사용자가 접속할 때 마다 그 사용자만을 위한 thread가 알아서 생성 되서 처리 되는 중이다.

이제 MVC를 알았으니 우리 학원 국밥 예제 BMI판정 프로그램을 만들어보자.

파일 이름들 그냥 냅다 M V C로 만들어놨는데 강사님은 C는 MainController V는 input 이런식으로 만드셨다.

일반적으로 사이트 첫 접속은 get이고 parameter는 없을 것이다. 하지만 계산은 get과 parameter가 있을 것이다.

그렇기에 이렇게 해준다. 그리고 이번엔 모바일로 디자인을 해보자고 하셨다.

크롬에서 f12를 누르고 저 버튼을 누르면 모바일로 접속했을 때의 화면이 나온다. (기기 변경도 가능하다.)

html에서 저렇게 써주면 이 페이지를 접속한 디바이스 가로넓이에 맞춰서 적당히 나온단다.

그리고 뒤 쪽에 이런 문구를 써주면 화면을 확대해준 다음 이용자가 확대를 못하게 만든다.

(이 화면에 맞춰서 디자인 할 것이기에 적용)

이렇게 하고 CSS를 먼저 해보라고 하셨었는데 못 듣고 그냥 html - servlet - jsp - js 순으로 작업 해버렸다.

덕분에 css는 건들지도 못했다.

모바일 얘기가 나온 김에 앱 개발에 관련해서도 말씀을 해주셨다.

앱 개발
native app
java -> AndroidSDK
Object -> IOS SDK
위 2개는 어플을 만드는 언어 임에도 쌩판 다르다.

web app
아이콘 누르면 웹페이지 열리게
사실은 웹이다
근데 폰 자원은 못씀
HTML5가 폰자원을 쓸 수 있게 되면서

web app으로 작업한 것을 native app으로 compile 해주는 hybrid app은 죽어버렸다.

다시 MVC로 와서 css를 재끼고 만들었더니 일찍 만들긴 했는데 원하는 방식대로 작동은 가능 했으나
놓친 부분이 있었는데 바로 싱글턴 패턴과 DTO를 통해 데이터를 전달하는 것이었다.
그래서 디자이너한테 형변환을 하게끔 만들었다는 것이다. 그들에게 Java를 시켜서는 안 된다.

이건 생각지도 못했는데 선생님이 만약에 파라메터 값을 한글처리 해야한다면 최초로 읽기 전에 해야한다고 하셨다.

(M쪽에서 해야 된다는 말)

만약 M 클래스에 싱글턴 패턴 적용을 안 한다면 C쪽에서 이용자가 많아질수록 들어와서 값을 입력할 때마다 무수한 객체를 생성할 것이기에 싱글턴을 적용해주는 것이다.

그리고

V의 jsp에서는 이렇게 객체를 불러온다.

나머지는 다 뻔해서 굳이 올리지 않았다.

그런데 만약에 지금 여기서

소수점 자리수 조절과 출력 시 css 차별 적용 같은 것을 하는 것은 java로 가능한 것들인데
분명히 V쪽의(이용자에게 보여지는 쪽의) 영역이기도 하다. 그런데 디자이너에게 Java를 쓰게 한다..?

완벽한 업무 분담, 완전한 MVC 패턴이 불가한 상태이다.

그래서 이 완벽한 MVC 패턴 즉 V[ .jsp]에 java소스를 완전히 박멸하기 위한 것이 있다.

---------------

바로 위 와는 별개의 내용이다.

프로젝트에 index.html을 만든다.(도메인 주소 간략화를 위해)