day52. 24-12-18-수
수업진도 및 새로운 내용
- 서블릿
- NOTICE-STEP1 : 글쓰기 수정 삭제 및 프론트엔드DB처리(noticeTest)
- tomcat 톰캣 설치
서블릿
Server + Applet : 서버에서 실행되다가 웹 브라우저에서 요청을 하면 해당 기능을 수행한 후 웹 브라우저에 결과를 전송하여 응답
그 결과를 클라이언트에 내려보낸다 - json, html
자바로 웹 어플리케이션 개발하기
- WAS 설치 (web application server) - 톰켓 v10.1 (jdk21지원버전) - 자바웹어플을 지원하는 서버 (실습에서 포트번호 8000)
https://tomcat.apache.org/download-10.cgi - 이클립스
-
새로운 프로젝트
-
New Runtime > tomcate v10.1선택
-
apache-tomcat-10.1.28 다운받기
-
git 사용할 경우 > Preference 바꾸기 : utf-8 (encoding 타입, 한글 에러 방지) > update 누르기
-
유틸리티 라이브러리 배치하기
log4j01.2.17.jar: 보안 취약, 운영서버에는 비추 - 로그설정시 사용 - 공통된 관심사(AOP <-> OOP)
gson-2.8.5.jar : 구글에서 json형식을 지원하는 라이브러리
mybatis-3.4.6.jar : SQL 매핑 오픈라이브러리
배포위치: dev_jsp2 > src > main > webapp > WEB-INF > lib
웹 단위테스트 -> postman 적극적으로 이용!
day53. 2024-12-19-목
수업진도
- eclipse-workspace/dev_jsp2 > json방식으로 브라우저 출력되도록 servlet써서 java 작성
- 프로젝트 지원: 리액트&express 연결 + mySQL 사용법 > 따로 글작성
- DBeaver 에디터 프로그램 설치 : mySQL연동하여 사용
- D:\workspace_react\tech_aid\reactNexpress\notice-express >>>> 리액트와 nodejs + mySQL :: 프로젝트 만드는 법 아래
자바로 어떻게 웹 어플을 구현하나?
어떤 언어든지 브라우저에 '쓰기'를 지원하는 API가 있다면 웹 어플 구현이 가능하다.
단, 자바(JVM) 만으로는 불가한데, 요청객체와 응답객체가 없기 때문에 서블릿이 필요하다.
따라서, 엔진 역할로 jsp, servlet api 필요하고, 이는 WAS인 TOMCAT 제공하며 res, req을 처리한다. 결국, JVM + tomcat이 자바 기반 웹 구현을 가능하게 한다.
❓document.write("<h1>hello</h1>")는 어떻게 쓸까?
==> 자바에서 println을 사용해라~!
웹 어플? 서버와 클라이언트의 물리적 거리 문제 해결 --> 브라우저 도메인URL으로 연결
쿠키와 세션
HTTP 프로토콜은 Connectionless(비연결지향)과 Stateless(상태정보 유지 안함) 특징이 있다.
- Connectionless : 클라이언트에서 서버에 요청(Request)을 보내면 서버는 클라이언트에 응답(Response)을 하고 연결을 끊는 특징을 가지고 있다.
- Stateless : HTTP 통신은 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는다.
따라서 서버와 클라이언트가 통신을 할 때 통신이 연속적으로 이어지지 않고 한 번 통신이 되면 끊어진다.
하지만, 실제로는 데이터 유지가 필요한 경우가 많다.
예) 장바구니 저장, 페이지 이동해서 로그인 유지
이러한 문제를 해결하는 방법이 바로 쿠키와 세션이다.
쿠키 -> 클라이언트에서 관리 : HTTP의 일종으로 사용자가 어떤 웹 사이트를 방문할 경우, 해당 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다.
세션 -> 서버에서 관리 : 브라우저가 종료되기 전까지 클라이언트의 요청을 유지하게 해주는 기술을 세션이라고 한다.
출처 | https://velog.io/@octo__/쿠키Cookie-세션Session
개념 키워드
- res,req처리: GET, POST 방식 -> 자바: doGet, doPost 함수로 사용 - RESTful API : 프론트엔드
doGet, doPost은 개발자가 main()등으로 직접 호출 불가하고, URL로만 호출 가능하다
URL: Uniform Resource Locator - 서블릿과 요청 url을 등록하기 (1. web.xml한다. 2. annotation을 사용한다-스프링)
- web.xml은 deployement descriptor - 배치 서술자
- 공유 파일
- 서버가 기동할때 한번 읽어서 종료때까지 기억한다.
- 중간에 수정을 한 경우 반드시 서버를 내렸다가 기동해야 반영된다.
- 사용자 데이터 전송 방식 : RESTful
이클립스 자바 외부 라이브러리 추가 > 빌드 패스
지금 단계에서 백엔드 역할은 무엇일까? (PROJ2에서도)
- CRUD : 데이터 처리만 하면 된다!
(물론 프론트 같이 하는 사람은 일이 더 있을수 있지만)
DBeaver - mySQL 연동 프로그램
- UI가 mySQL보다 나아서 mySQL프로그램 대신 사용
- 연동 방법
1) mySQL 프로그램 먼저 설치
2) DBeaver 설치 -> 데이터베이스 새DB연결 -> mySQL선택 -> mySQL 아이디/비번 입력
리액트&express 만들기
tech_aid\reactNexpress\notice-express >>>> 리액트와 nodejs + mySQL
- www에서 포트번호 5000으로 변경
day54. 2024-12-20-금
SQL 복습
- DDL: 구조 정의어 (테이블)- create, alter(수정), drop(삭제)
DDL은 세그먼트 미사용으로 속도가 빠르다 - DML: 데이터 조작어 - select(GET,POST), insert(PUT), update(PUT), delete(Restful API - DELETE함수)
1) commit, rollback 대상 - insert, update, delete
2) 해당 없음 - select - DCL: 권한 - grant(부여), reboke(수정) ex)계정 추가하기
수업진도
- notice-express > 글쓰기 insert
- notice-tomcat
day55. 2024-12-23-월
Java(로컬어플리케이션)
Java API중에서 applet패키지제공
자바클래스를 html문서에 등록할 수 있는 클래스
Web이란?
http/https
Restful API(전송방식 - get|post|put|delete)
웹서비스란 요청과 응답으로 구성
요청객체와 응답객체 제공
HttpServletRequest
HttpServletResponse
2개의 객체를 주입받으려면 서블릿이 되어야 한다.
약속, 강제성 - > inferface, extends - > 메소드 오버라이드 지원 -> 원형을 수정할 수 없다.
리턴타입과 파라미터를 손댈 수 없다.
웹서비스를 위해서는 URL통한 요청으로 시작된다.
http://localhost:8000/업무이름/페이지이름 이거나 혹은 요청 이름
웹어플리케이션
- 서블릿(Servlet+Applet 합성어)
서블릿이 되기 위해서는 HttpServlet을 상속 받아야 한다.
@Override
void doGet(HttpServletRequest req, HttpServletResponse res)
void doPost(req, res)
메소드의 리턴타입이 void이다.
doGet이나 doPost에서 페이지를 출력하는 방법에는 두 가지가 있다.
1) out.print("<h1>제목</h1>") : 대단히 비효율적이다.(html태그, javascript, css 섞여 있다.)
"<table class='tb_notice' width='500px' height='300px',...>
2)출력 페이지를 호출하기 - 효과적이다. 왜냐면 print에다 태그를 적지 않아도 된다.
res.sendRedirect("XXX.jsp");
JSP (java와 html, css, javascript섞어쓰기)
화면처리를 담당한다.
java오류는 Exception발생 - 화면이 출력되지도 못한다.
어디서 문제가 발생한거지?
화면 처리에는 두 가지 상황이 있다.
DML관련 -
SELECT - executeQuery():ResultSet -> cursor조작한다. -> rs.next(), rs.previous(), rs.isFirst():boolean, rs.isLast():boolean
테이블에 직접적인 변화가 없다.
INSERT|UPDATE|DELETE - executeUpdate():int
리턴값이 int이다.
1row inserted
1row updated
1row deleted
commit / rollback
출력메시지는 회원가입이 완료되었습니다.
if(result ==1) 성공
else if(result == 0) 실패
목록, 조건 검색 결과처리하는 화면
1건(int, String, NoticeVO, Map)
n건(List<Map<>>, List)
DB연동한 후 조회 결과는 서블릿이 쥐고 있는데
출력은 JSP페이지에서 해야 한다.
왜냐면 서블릿으로 화면을 출력하는 것은 비효율적이다.
Java -> jsp 파일이 다르다.
파일이 서로 다른데 어떻게 주소번지를 받아오지?
요청이 유지되는 동안에는 주소번지를 넘길 수 있다.(가능함)
jsp코드안에 자바코드를 섞어쓰면 500번에러(Exception종류) 마주하게 된다.
: 화면이 출력 안됨. 에러 코드가 그대로 출력으로 나간다.
jsp안에는 최대한 자바코드를 쓰지 않아야 한다.
(express-> HandleBars사용한것.)
데이터셋과 태그가 섞여 있다. - 고민
jsp는 View계층을 담당하고
Servlet은 Model계층(비즈니스로직)을 담당하게 한다.
컨트롤러는 앱의 사용자로부터의 입력(파라미터)에 대한
응답(response.sendRedirect("xxx.jsp"))으로 모델 및/또는 뷰를 업데이트하는 로직을 포함합니다.
컨트롤 계층은 응답페이지 이름을 결정해 줘야 한다.
또한 응답페이지가 나갈 수 있도록 처리해야 한다.
뷰를 업데이트 하는 것은 jsp에서 해야 할 일이다.
예를 들어보면, 쇼핑 리스트는 항목을 추가하거나 제거할 수 있게 해주는 입력 폼과 버튼을 갖습니다.
이러한 액션들은 모델이 업데이트되는 것이므로, 입력이 컨트롤러에게 전송되고, 모델을 적당하게 처리한 다음,
업데이트된 데이터(String, json, xml)를 뷰로 전송(화면폼설정과 응답포맷이 맞지 않으면 400에러발생-)합니다.
컨트롤계층의 역할은 서블릿에 맡기는 것이 좋겠다.
서블릿은 req, res를 갖고 있다.
사용자가 입력한 값을 받을 수 있다. -
getParameter에 오는 이름은 form태그에서 정해진 값이다.
<input type="text" name="mem_id">
출력>>
String mem_id = req.getParameter("mem_id")
<input type="text" name="mem_pw">
출력>>
String mem_pw = req.getParameter("mem_pw")
단순히 데이터를 다른 형태로 나타내기 위해 뷰를 업데이트하고 싶을 수도 있습니다(예를 들면, 항목을 알파벳순서로 정렬한다거나, 가격이 낮은 순서 또는 높은 순서로 정렬). 이런 경우에 컨트롤러는 모델을 업데이트할 필요 없이 바로 처리할 수 있습니다.
war
.jar는 로컬 zip파일, .war는 웹 zip파일
배포시 parcel bundler로 묶는데, 이것을 자바에서는 build로 명칭한다. - 슬림하게 서비스최적화
npm run build
서버-클라이언트 네트워크 로딩 문제
npm i cors 설치 at express > 이후 app.js에 아래 추가
const cors = require('cors');
//CORS설정
app.use(cors())day56. 2024-12-24-화요일
수업진도
- webapp/quill/ > quill에디터에서 [게시판 작성] 코드 얻어옴 >> 플젝때 사용하자!
- com.ch01/SqlMapNoticeDao.java : 오라클DB 얻어오기
이때 com.util/MyBatisConfig.xml 파일에서 test.xml, notice.xml를 mapper태그로 물리적거리 해결해줄 것! - notice-react&express
: NoticeDBDetail.jsx - 삭제, 수정 기능
:npm i react-quill-new설치 > 게시판 창 생성QuillWrite.jsx,QuillEditor.jsx>/quill/write- 이미지 서버에 url로 저장해주기(아직 미완성)
API
Application Programming Interface
이종 간의 연결고리
MyBatis를 이용해서 DB연결을 해보자
react와 express 연결
notice-react & notice-express
연결 방법
리액트 어플리케이션 로딩시에
setProxy.js약속한다.
(자동스캔한다, 추가 설정 없지만 읽는다!)
프록시 설정: npm i http-proxy-middleware 설치
setProxy.js파일은 리액트 프로젝트에 배치되고, 설정내용에는 5000번 서버정보, 구분자로 URL접두어에 반드시 users를 붙였을때만 교차 출처에 대해 허용된다.
이미지는 DB로 저장할 수 있을까?
실무에서도 DB에 저장하지 않는다. > URL로 바꿔준다!
REST API
get(조회), post(입력), put(수정), delete(삭제)
day57. 2024-12-26-목요일
수업 내용
- eclipse에서 부트스트랩으로 화면 만들어봄...: webapp/bootstrap/index.jsp
- react-express: quill 복습 - 이미지 잘 불러오도록 수정, board게시판 추가 > express에서 db.js에서 mysql2/promise추가 & users.js 비동기 함수로 전체 수정
- BoardDBList.jsx 초안 작성: 복붙 잘못해온듯; 강사님 소스랑 비교 필요
복습
- res.sendRedirect("xxx.jsp") : 해당 jsp페이지로 이동하면서 주소창에 URL이 바뀐다. 이때 기존 요청이 끊어지고 새로운 요청이 일어난다. - HTTP(stateless)
- statless 문제는 어떻게 해결할까? 쿠키와 세션
- jsp : java + html 섞어쓰는 파일
- 쿠키와 세션 :
1) page : 사용하지 않음
2) request : 사용범위 - sping은 두 가지 지원한다
3) statless : 시간지원 - 30분간 지원해줘
4) application : 계속 저장 - 서버에 많은 부담, 장애 발생 - 구동 순서 : java -> servlet -> jsp
<%
;스크립틀릿
여기에 자바코드 작성하며, 여기에 들어간 모든 자바코드는 service()에 들어가나. 내가 선언한 변수는 servlet에 있으며 지역백수이다
%>
전역변수는 <%! 여기작성 %> : 디클러레이션, 메소드 선언과 전역변수 선언이 가능함
(모두 jsp에 사용되는 기호이다)
- 자바의 클래스이름이 WAS를 무엇으로 하는가에 따라 이름이 매번 달라진다.
- 인스턴스화는 어떻게 하는가? 인스턴스화를 직접 하지는 않지만 WAS로부터 필요할때 주입을 받으므로 NPE가 발생하지 않는다
day58. 2024-12-27-금요일
수업 내용
-
git 연습
-
react/express : BoardDBList.jsx 글쓰기 화면 QuillEditor.jsx연결, BoardDBDetail.jsx > BoardHeader.jsx 상세보기 설정
문제가 있다 >> 상세보기 클릭시 세부정보 안뜸 왜..? ㅇㅅㅇ
