본문 바로가기

국비과정/Spring

20230713 _[29일차]_01. Spring 맛보기2

오늘자 Legacy Project 생성 

표시된부분 버전변경

jul13에서 마우스 우클릭

맨 아래 Properties - Project Facets 에서 java 버전 11로변경

 

Window - Preferences 에서 enc 검색 후 아래 항목들 들어가서 UTF-8로 변경 

 

 

* pom (= project of maven)

 

webapp폴더 = 최상위 root폴더

   하위의 views 폴더에 jsp파일들이 들어감

         하위의 spring폴더 - appServlet - servlet-context 보면

=> views 폴더에 jsp파일 넣겠다고 명시되어 있음

 

[ HomeController.java ] 에서 return하는 home이라는 값이 저 사이에 들어감

 

@RequestMapping => get방식의 /요청이 들어오면 실행하겠다.

 

그냥 전체적인 설명 + MVC설명 다시 해주심

 

( MVC관련 참고 )

MVC - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN (mozilla.org)

 

MVC - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

MVC (모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고

developer.mozilla.org

 

 

<context:component-scan base-package="com.phyho.web" />

내 패키지의 하위폴더 싹 불러옴


com.phyho.web 패키지 아래

[ BoardController.java ] 클래스 생성

컨트롤러 기능 사용할수 있게 선언!

 

@RequestMapping (value = "/board", method = RequestMethod.GET)

get방식으로만 동작, post는 동작안함

post방식으로도 동작하려면

get/post방식 동시에

 

축약형태는 아래

board에 get으로 들어올때 / post로 들어올 때

 

일단 우리는 get방식만 사용할거니 @GetMapping(~~)만 사용 (import필요!) _ ctrl + shift + O --> import정리

이제 board 라는 이름의 jsp파일 만들러 가자

잘 구동됨

 

home.jsp 파일은 위에 선언이 없기때문에 아래처럼 한글이 깨짐

한글깨짐


 

model에 차곡차곡 쌓아주고 view로 가져갈때 한꺼번에 같이 가져가려고

위의 serverTime => EL태그는 home.jsp 에있음.

 

ModelAndView 객체생성

> ModelAndView는 Model보다 보내는 시간이 더 짧다고함

/board 요청에 대해 작동하게 될 메소드 board() 의 타입을 ModelAndView 로 설정하고 

ModelAndView 의 객체인 mv를 리턴. (메소드 타입과 리턴타입 같아야함!)

board.jsp로 같이 데리고 갈 값을 붙여 (키는 "name" 값은 "홍길동")

ModelAndView는 결국 값(홍길동) & 전송위치(board.jsp)를 같이 담아주는 역할

 

이렇게 보낸 값을 board.jsp 에서 받아보자

EL 태그를 이용해서 출력


BoardDTO 타입으로 LIst 선언

 

아직 BoardDTO가 없어서 밑줄뜬다,  마우스 올리면 나오는 create~~~해서 

[ BoardDTO.java ] 생성

=> 변수들 선언

각 변수들에 대한 getter / setter 생성

 

for문으로 DTO에 값들 하나하나 넣어주고 한꺼번에 list에 담아주기

for문이 한번 돌때마다 한줄의 값들이 채워지는거 (dto 가 한줄한줄이 된다)

값들을 넣어준 list를 "list" 라는 이름으로 mv에 담아서 가져갈거!

 

board.jsp 에서 list 불러와보면 데이터 잘 불러와짐.

EL태그로 호출할 때는 미리 지정해준 이름으로 ("list")

 

 

기본 기능들이 들어가 있는 core 태그 불러오는 선언문 상단에 추가

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt " prefix="fmt" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions " prefix="fn" %>

> core태그 외에 다른것들도 요런식으로 불러올 수 있음

 

core 태그를 사용할 수 있는 이유는 pom.xml 에서 jstl과 연결했기 때문

나중에는 java.sun.com  요거말고  자카르타~ 사용해서 연결할 예정


<% %> 요거대신 이제

<c:forEach> 요거 사용, 훨씬 간단하고 편함!

 

forEach 로 반복문 출력

 

이제 list를 출력해보자

list 내부의 dto 하나하나(한줄한줄)를 i라는 변수에 넣어주고 i를 출력! 

이제 i가 dto니까  i.bno 로 값을 불러와

 


오류

400은 없을때

500은 내잘못 _ bwrite로 해야댐


다시 제대로

dto가 데이터 한줄이라고 생각하면됨

dto를 변수 i로 출력할거니 i에서 각각의 값들(bno, btitle, bwrite)을 뽑아냄.

 

( table 만들기 )

tbody 속 tr 을 forEach로 반복시키자

1 ~ 10 까지 반복

tr은 줄(행)을 만들어주는거

10번 반복해서 10줄 만들기! 

 

<c:forEach items="${list }" var="row">

=>  list에 있는 하나하나를 row에 넣어줌 (이제 row가 dto임)

이제 각각의 row(dto)들을 출력해보면


이제 css로 스타일지정 해보자

[ board.jsp ] 상단에 

<link href=" " rel="stylesheet"> 추가해주고

               css파일 위치 넣어줄거

 main - webapp - resources 폴더 아래에 css폴더 생성

css폴더에 [ board.css ] 파일 생성

 

생성한 파일 위치 board.jsp에도 알려줘

href는 css 파일의 위치인데

 

요기에서 확인가능

 

jsp파일이랑 css파일 연결이 잘 됐는지 확인

회색 적용됨

 

 

표꾸

 

각각의 td에 id를 지정해서 하나하나 다르게 꾸며보자

넓이를 퍼센트로 지정 

아무것도 없는 roiw.tilte 열(td)은 위에서 퍼센트로 가져간거에서 나머지 넓이만큼을 다 가져감

 

 

btitle 에는 class 지정해주고 왼쪽정렬해주기

 

tr 에 hover 적용 (마우스 올리면 배경색이 회색으로)

 

border-collapse: collapse;   => 표 사이의 공간 없애줌

 


위 두줄은 축약형태

 

BoardDTO 생성자 만들고

 

생성자 7번줄만 살려야됨.....9번부터는 없어도됨

mybatis는 기본생성자가 꼭 필요. 

 

아무튼 dto에서 명시된 생성자를 만들고

컨트롤러에서는 매개변수로 각각의 값들을 지정해줌.

Map을 사용한 list2도 생성

list2를 출력해보면 요렇게

Map은 순서가 없기 때문에각 값들이  bno ~ blike 의 순서로 들어가지는 않는다.

대신 이 한줄 한줄을 순서가 있는 list에 넣어줬기 때문에 bno_1번줄 ~ bno_10 번줄은 순서대로 출력된다.

 

list2를 row라는 변수에 넣고

테이블 생성해서 하나의 행에  row 한줄의 값들이 들어가도록 출력


(Model 방식으로)  _ board2

/board2 요청이 들어오면

=> board2 () 메소드가 실행, 얘는 model을 매개변수로 가지고 있음. 

=> model에는 "name" 이라는 이름으로 "홍길동"이라는 값이 들어있음.

=> board2.jsp를 리턴

 

 

이제 board2.jsp 만들러 가보자

컨트롤러에서 지정해준 "name" 이라는 이름으로 "홍길동" 이라는 값을 출력

 

 

board2.jsp 에도 core태그 추가

 

 테이블 만들고 foreach문으로 출력 (게시판 형태로)

 

board2 에도 BoardDTO의 값을 가져와 list에 넣고 출력해보자

아래처럼 dto에 값을 넣을 때

i < 0 으로 설정해서 출력해보면 요렇게 나옴

다시 말해 list에 아무 값도 안들어간거.

그래서 이 때 list 의 길이는 0이 나옴

한번 jsp에서 찍어보자

 

 

board2.jsp 상단에 하나더 선언 (jstl function 사용을 위한)

캡쳐는 board.jsp인데 잘못씀, board2.jsp 에 선언해줘야함


 

( jstl fn정리 )

https://cofs.tistory.com/262

 

jstl fn 정리 / jstl functions 정리

jstl functions (jstl fn) 정리 최상단에 다음과 같이 jstl functions 를 사용하겠다고 선언해야 함 1 cs 단독으로 사용할 수 없고 EL 표현식과 함께 사용해야 한다. ex. ${fn:contains(str, str)} ${fn:split(str, '|')} fn:co

cofs.tistory.com


fn:length(item)  _ EL 태그와 함께 사용
=>  item이 배열이나 컬렉션이면 요소의 개수를 / 문자열이면 문자의 개수를 반환

list의 길이가 10이라면

list에 dto 한줄씩 넣어주는걸 10번 반복한다면 

list 길이는 당연히 10 이라고 출력됨


( if문은 else를 사용하지 못함 )

if~else 문 대신 사용할 수 있는애가 

=> choose 

when (if) , otherwise (else)

캡쳐는 없지만 list 길이가 10이 아닌가보다. 아마 for문에서 i의 범위 바꿔준듯?

 

여기서는 <> 괄호를 사용하기 때문에 값비교할때는 부등호 대신 비교표현식을 사용

list 의 길이가 0보다 크다면  "참입니다. " 문구 출력

   (otherwise) 아니라면 "출력할 데이터가없~ 관리자문의~  " 문구 출력

 

list 의 길이가 0보다 크다면(데이터가 있다면) 데이터들 출력

   (otherwise) 아니라면 (데이터가 없다면) "출력할 데이터가없~ 관리자문의~  " 문구 출력


list의 길이가 0이면

otherwise 부분이 나옴


 

(참고)

egovframework:rte:ptl:view:paginationtag [eGovFrame]

 

egovframework:rte:ptl:view:paginationtag [eGovFrame]

전자정부프레임워크에서는 페이징 처리의 편의를 위해 <ui:pagination/> 태그를 제공한다. 페이징 기능을 사용할때 기능은 유사하지만 이미지나 라벨등의 포맷만 다양하게 사용하게 되는 경우가 있

www.egovframe.go.kr

 


( UTF-8 한글설정 참고 )

[Spring] Spring UTF8 한글 설정하기 - Heee's Development Blog (gmlwjd9405.github.io)

 

[Spring] Spring UTF8 한글 설정하기 - Heee's Development Blog

Step by step goes a long way.

gmlwjd9405.github.io

 


 

이제 저장소 만들자 (db에 저장되어 있는 찐 데이터를 불러와서 화면에 출력하자)

pom.xml 에서 repository 추가추가

mariadb version 변경

 

web.xml  에서

board.jsp 페이지를 첫페이지로 설정해주자

webapp은 최상위 폴더라 위에서 /로 써준거

/ 를 요청했더니 board.jsp 페이지가 열림

컨트롤러를 통과안해서 다시 말해 list가 0이여서(값이 나오지 않음) 요렇게만 나온거!


이번에는 board2.jsp 페이지를 첫페이지로 설정해주자

 

/ 를 요청했더니 board2.jsp 페이지가 열림

(하지만 데이터는 없음_데이터를 넣어주는 과정이 있는 컨트롤러를 지나지 않아서)

 

요렇게 주소창에 board2 를 입력해서 들어가면 데이터가 잘 나옴

 


root-context.xml 에 db연결해주자

src/main/resources 패키지 아래에

mybatis 폴더 생성

하위에 각각 config, mappers 폴더생성 & 각각 xml파일(단톡) 넣어주기

 

파일 이름이랑 맞춰주기

 

com.phyho.web 패키지 아래에

[ BoardService.java ] 클래스 생성 

@Service 라고 선언해주고

@Autowired 로 컨트롤러와 서비스 연결해주기

 

[ BoardDAO.java ] 생성

@Repository 선언으로 mybatis 와 연결

( 컨트롤러 - 서비스 - DAO 연결 )

( 연결방식 )

 

BoardController 에서

아래 데이터를 list에 넣어주는 과정 삭제

이제 컨트롤러는 명령만(컨트롤 역할) 할거라서

 

BoardDTO 타입의  list를 만들고 for문으로 데이터 담는건 서비스에게 시키자

 boardList() 메소드로 일을 시켰는데 아직 서비스에는  boardList() 메소드가 없어서 밑줄생김

밑줄에서 create~~ 해서 BoardService에 boardList() 메소드 생성

서비스는 다시 DAO에게 일을시킴

밑줄에서 create~~ 해서 BoardDAO에 boardList() 메소드 생성

 

DAO 는 SqlSession과 연결해주고 여기에 일을 시킬예정.

열일한 결과인 리턴값을 받아올건데 어디에서?

boardtest.boardList  => boardtest 의 boardList를 가져와 sqlSession 에 담을거야

=> board-mapper.xml 파일에서 

namespace를 boardList 로 설정해줬고, 쿼리문의 결과값(SELECT문 실행값)을 boardList 라는 id로 지정해줬음

자바에서 호출할 수 있는 이름

* selectList () : 여러개의 객체를 리턴하는 메소드

불러올 데이터가 dto한줄한줄이 담긴 list로 여러개니까

 

 

 board-mapper.xml 파일에서 결과값 가져오려면 resultType 도 지정해줘야함

                                               말 그대로 한줄한줄을 어디에 담을건지  => DTO에 담아야져

그런데  아래처럼 BoardDTO 라고 써주면 안되고 경로까지 써줘야한다.

하지만 경로인 com.phyho.web.BoardDTO 전부 써주기는 너무 길다.

별명을 만들어서 별명만 써주자

 

 

별명은 mybatisConfig,xml 에서 만듬

아래처럼 com.phyho.web.BoardDTO 를 boardDTO 라는 별명으로 지정해줬다. 

이제 resultType은 boardDTO 로 설정해준다.

board-mapper.xml 에서는 위의 쿼리문 실행한다.

SELECT * FROM board 결과를 boardDTO에(한줄) 담아와서 boardList 로(여러줄) 만들겠다

라는 뜻.


** 오류 ** 

아이디 설정을 대문자로 했는데 소문자로 작성해서 오류가 났었다 ㅎㅎㅎㅎ 대문자인거 기억하기


 

오류 해결하고 db의 데이터 불러오기 성공!!