[2023.12.08] 개발자 교육 55일 차 : 강의-서블릿&JSP 실습 [구디 아카데미]

복습

JSP 화면 구성

• 페이지 include? 하나의 웹 사이트를 구성하는 다양한 페이지들의 위치 구성하는 방법
  - 디렉티브 : (하나다), 지정한 페이지를 현재 위치에 포함시켜 함께 컴파일 하는 기능(주로 모든 페이지에서 중복되는 간단한 문장을 쓸 때 사용!)
  - 액션태그 : 다른 jsp로 실행 흐름(컴파일한 파일)을 이동시켜 현재 위치에 포함 시키는 기능

//디렉티브(포함할 파일)
<%@ include file="/common/bootstrap_common.jsp" %>
<%@ include file = "/include/gym_header.jsp" %>
<%@include file = "/include/gym_footer.jsp" %>

//액션태그
<jsp:include page ="포함할페이지" flush="true">
	<jsp:param name = "param1" value="value1">
	<jsp:param name = "param2" value="value2">
</jsp:include>

URL 확장자에 따른 차이

• 확장자가 jsp이면 서블릿을 경유하지 않음. 목록에 보여줄 데이터가 없음
  - 버튼을 눌러서 해당하는 '업무/메소드'.gd가 담긴 url을 통해 오라클 서버를 경유 한다.
• 확장자가 gd이면 오라클 서버를 경유하기 때문에 조회 결과를 쥐고 있다.
  - request.setAttribute()를 통해 쥐고, 화면에 출력할 수 있다.

강의 내용

화면 구현 with [[BootStrap]]

• BootStrap의 CSS, javascript 파일의 경로를 지정 -> 라이브러리를 사용하여 현재 웹 페이지에 스타일, 동적기능을 추가할 수 있음.
• 연동하는 jsp 파일 코드

연동 전 사이트 모습

연동 후 사이트 모습

[[lombok]]의 사용 : 반복 메서드 작성 코드를 줄여주는 코드 다이어트 라이브러리

• 데이터 어노테이션.
  @Data [[어노테이션]]을 활용하면 @ToString, @EqualsAndHashCode, @Getter, @Setter, @RequiredArgsConstructor를 자동 완성 시켜준다.

• 쓸 때(코드 간결해진다)
  

• 안 쓸 때 (코드가 너무 방대해진다)
  

• lobbok 활용 NoticeVO.java 코드

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  package com.vo;   import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor;   //@Getter //get메소드와 set메소드를 생성할 필요없이 어노테이션을 쓰면 사용이 가능하다.  //@Setter @Data @NoArgsConstructor //매개변수가 없는 기본 생성자를 생성한다. //@AllArgsConstructor //모든 필드에 대한 생성자를 만들어준다. 마찬가지로 의존성을 주입받을 수 있다. public class NoticeVO {     private int n_no = 0;     private String n_title = null;     private String n_content = null;     private String n_writer = null;     @Builder     public NoticeVO(int n_no, String n_title, String n_content, String n_writer) {         super();         this.n_no = n_no;         this.n_title = n_title;         this.n_content = n_content;         this.n_writer = n_writer;     } } Colored by Color Scripter

  cs

오라클 프로시저 연결 및 VO에 결과값 저장(작업 中)

• MyBatis 설명서 참고

• 프로시저 구상하기
  

• notice.xml(공지사항 DB에 연동하는 마이바티스 매퍼파일)에 sql문 넣기
  

• test.xml(sql 쿼리 정의, 프로시저 호출, NoticeVO에 결과값 저장)

• MapperConfig.xml([[MyBatis]] 설정 파일) 수정 -> DB 연결할 xml 추가(test.xml)

• NoticeLogic.java(procNoticeList 메소드 이름이 url로 올 경우, 처리 방식 입력)

리액트js (POJO를 Front와 합쳐보기)

[!tip] 학습목표
우리가 설계한 POJO1 프로젝트가 React와 같이 다른 언어(이종언어)와 연계할 때,
현 프로젝트 설계의 부족한 부분에 대해 확인하여 추후 프로젝트에서 보완한다.

• front
  - localhost : 3000

• back
  - localhost : 8000
  => 지금으로선 불가능, 우선 따로 서비스를 제공해보기!!

• 리액트
  - 함수(일급함수-객체)의 이름으로 태그 생성 가능 - 파라미터 자리를 통해 객체를 넘길 수 있음.
  - 설치

[!example] npm 설치파일
라우터 설치
npm i react-router-dom -D
: index.js에서 사용 가능하고, GymApp 함수는 라우팅에 대한 코드를 작성한다.

[!danger] 주의
외부리소스 사용 시 index.js에 추가하는데 jsp의 경우 SPA 처리가 쉽지 않다.
비동기 처리를 따로 해야 함. -> XMLHttpRequest, ajax

1. 뷰 계층과 비즈니스 로직으로 완전 분리 가능
2. 리액트의 경우, SPA를 기본으로 하며 추가적인 비동기처리를 좀 쉽게 처리할 수 있다.
3. 유지보수 유리하며, git으로 소스 관리 편리함.

![[Pasted image 20231208154142.png]]

[!example] 추가설치
npm i @fortawesome/fontawesome-free
npm i [[axios]]
추후 다시 npm 전체 다운로드 받기 위해서는 터미널에 npm install 입력하면 됨!!

![[Pasted image 20231208175300.png]]

강의 마무리

• POJO1 마무리, 개선사항 반영하여 POJO2 실행