(국비교육) 33 - project1 생성하기 + 4회차 시

■ 앞으로 배울 내용

spring + mybatis + jsp

spring + JPA + jsp

spring + JPA + thymeleaf

spring boot + mybatis + thymeleaf

spring boot + mybatis + thymeleaf

 

■ project1 생성하기

 

 

 

프로젝트 생성하고 이전과 동일하게 버전 맞춰준다. 

 

 

인덱스 컨트롤러 생성 및 맵핑

 

 

 

인덱스 JSP 생성

 

 

컨트롤러 없어 다음과 같은 문구 뜬다.

보드 컨트롤러 만들어준다. 

 

컨트롤러 생성 및 맵핑처리

 

 

인덱스로 돌아가는 화면도 만들어주기

 

 

value 값으로 "/" "index" 넣어줘서 해당 명령 받았을 경우 Index 화면으로 돌아가기 설정 가능하다.

 

 

컨트롤러 여러개 등록돼도 맞는 컨트롤러를 선택 후 구동된다. 

흐름은 다음과 같다. 

 

 

이제 보드에 해당하는 서비스를 만들어준다.

보드 서비스에서는 보드 리스트를 불러오는 메소드를 만든다.

 

 

for 문을 통해 Map<String, Object> 타입 객체 map 에 put 을 통해 값을 넣고,

이 객체 값을 list 에 넣는다.

 

10까지 반복된 값이 저장되고 이를 list 로 반환하는 메소드를 만든다. 

 

 

보드 서비스 타입이면서 boardService 라는 이름을 가져간다. 

즉, 서비스의 이름을 지정해주는 것이다. 

 

 

서비스를 만들고 이를 Autowired 말고 Resource 로 연결해보자.

그러나 자바9부터 지원하지 않아 Maven 에 들어가 해당하는 코드 확인 후 입력이 필요하다

 

 

 

resource 이용하기 위해서는 1.3.2 에 해당하는 다음 코드를 pom.xml 에 넣어줘야 한다. 

 

 

 

해당 방법으로 다운받으면 resource 사용 가능하다.

 

 

이제 보드 서비스로 지정된 이름을 @Resource를 통해 자바가 이름으로 연결해준다. 

 

 

resource 로 연결하고, BoardService boardService 변수 선언해준다. 

 

 

Model 은 값만 전송

보드 컨트롤러에서 서비스에서값을 가져온다.

Model 을 통해서 가져오는데 list 라는 이름으로 연결된 boardService.boardList() 메소드 이용한다. 

 

 

 

그리고 jsp 에서 값 찍으면 다음과 같이 확인 가능하다. 

 

 

코어태그 선언 후 for each 구문을 통해 list 값 출력이 가능하다. 

 

 

꾸미는 것은 css 에서 해줄 것이다.

이를 위해 jsp 위에 link 를 통해 css 연결해준다. 

 

효과를 주면 다음과 같다. 

 

 

그러나 link 를 걸 때 href="" 이 길어지므로 servlet 에서 이를 조정해주면 보다 간단하게 표현 가능하다. 

 

 

이제 직접 db에 있는 값을 가져오기 위해 DAO 생성 필요하다.

@Repository 를 통해 선언해주고, 직접 일을 할 boardList() 메소드를 만든다. 

 

 

마찬가지로 Inject 이용해서 서비스와 boardDAO 연결해준다. 

 

https://devmg.tistory.com/143

Spring @Autowired, @Resource, @Inject의 어노테이션 차이

 

 

이제 db 연결 위해서  servlet 에 xml 추가 설정해준다.

 

 

필요 기본설정 jar 넣어준다. 

 

 

spring 폴더 만들고 그 안에 데이터베이스 연결 관련 bean 넣어준다. 

-mapper 소문자처리 잊지말기

 

 

mybatis / config / mappers 폴더 각각 넣어주고 

각 폴더 만들어주고 xml 파일 넣어주기

 

 

namespace 는 추후 board 로 변경한다. 

resultType Map 으로 설정

 

 

BoardDAO 는 sqlSession 과 연결시켜준다. 

레코드 여러개 가져올 떄 selectlist 로 가져오고, namespace=boardtest 의 id boardList 로 값을 가져온다. 

 

 

이제 서비스에서 boardDAO 가 일한값 가져오기

 

 

onclick 은 a 태그처럼 하이퍼링크 표시되지 않지만 이동은 된다. 

전체 줄로 효과를 주기 위해 onclick 을 사용하고, location.href='' 를 통해 이동시켜준다.

각 detail 페이지 이동할 예정이며, 번호는 파라미터 값 변동을 위해 각 게시글 번호 = ${row.bno } 값으로 준다. 

 

그러나 해당하는 detail 에 대한 맵핑이 되지 않아 오류가 뜬다.

따라서 boardController 에서 추가 맵핑처리 해준다.

 

 

디테일 값을 받으면 HttpServletRequest request 객체를 통해 "bno" 파라미터 값을 가져오고

이를 String 타입으로 저장한다.

 

이를 통해 게시글을 클릭하면 연결되는 것 확인할 수 있다.

 

 

bno 에 요청하는 값 db로 보내 개별 페이지로 만들어줄 수 있다.

boardService의 detail 메소드에 bno를 통해 게시물 번호를 매개변수로 받아 해당 게시물 상세 정보를 반환하게 한다. 

그리고 이 상세 정보를 BoardDTO 객체에 저장한다. 

 

 

이제 값에 맞는 DTO 만들어주고 getter setter 처리한다. 

 

 

이제 받은 dto는 model.addAttribute 를 통해 dto 라는 이름으로 dto 값을 저장한다. 

 

 

이제 서비스에서 BoardDTO 타입의 detail 메소드를 만들어준다. 

리턴값은 boardDAO.detail메소드 값으로 받는다. 

다만 메소드 없는 것 동일하게 만들어준다.

 

 

마찬가지르 BoardDTO 타입의 detail 메소드를 만든다.

리턴값은 sqlSession 에서 값 하나를 받아오는 selectOne 을 사용해서

namespace boardtest의 bno 하나의 값을 받아온다. 

 

 

mybatisConfig 파일에서 경로 별칭을 사용하면 사진과 같이 resultType을 줄여서 사용 가능하다. 

 

 

parameterType 속성은 쿼리에 전달되는 매개변수의 타입을 지정

# : mybatis 에서 이 자리 변수 들어가요 라고 인식한다. 

 

 

board.detail 은 MyBatis 매퍼 파일에서 정의된 SQL 쿼리의 ID를 나타낸다. 

따라서 이를 통해 board.detail 해당하는 쿼리를 찾아 실행하고

해당하는 게시물의 상세 정보를 BoardDTO 객체로 반환한다. 

 

■ 결과물

 

 

 

* 시험문제

 

[문항1]  HTML 요소(element)를 가장 잘 작성한 코드는? 1번

1) <p>HELLO</p>

2) <p>HELLO

3) HELLO</p>

4) </p>HELLO<p>

5) </p>HELLO</p>

 

[문항2]  HTML에서 p 태그에 width값 요소를 적용하지 않을 경우? 2번

1) width값이 없을 경우 출력 되지 않는다.

2) 새로운 줄에 브라우져 크기 만큼 가장 넓은 너비로 출력된다.

3) 새로운 줄에 가장 좁은 너비로 출력된다.

4) 같은 줄에 가장 좁은 너비로 출력된다.

5) 같은 줄에 브라우져 크기 만큼 가장 넓은 너비로 출력된다.

 

[문항3]  HTML에서 이미지를 출력하는 코드는? 3번

1) <print image='image.jpg'>

2) <image print='image.jpg'>

3) <img src='image.jpg'>

4) <paint href='image.jpg'>

5) <img file='image.jpg'>

 

[문항4]  하이퍼링크를 만드는 HTML 코드는? 4

 

 1) <link href='http://www.w3schools.com'>w3schools</link>
 2) <hyper href='http://www.w3schools.com'>w3schools</hyper>
 3) <goto href='http://www.w3schools.com'>w3schools</goto>
 4) <a href='http://www.w3schools.com'>w3schools</a>
 5) <new href='http://www.w3schools.com'>w3schools</new>

 

[문항5]  class가 abc인 요소들을 선택하는 css 선택자는? 5번

1) &abc

2) #abc

3) $abc

4) !abc

5) .abc

 

[문항6]  id가 abc인 요소를 선택하는 css 선택자는? 1

1) #abc

2) !abc

3) .abc

4) &abc

5) @abc

 

[문항7]  다음 중 javascript에서 경고 메세지를 사용하는 함수는? 2번

1) window.open

2) alert

3) confirm

4) prompt

5) console.log

 

[문항8]  다음 중 javascript에서 HTML 코드를 출력하기 위한 코드는 무엇인가? 2번

1) console.log

2) innerHTML

3) innerText

4) innerhtml

5) innertext

 

[문항9]  다음 중 함수의 인자값을 올바르게 실행되는 함수는? 3번

1) function abc('a',2b,'100') {}

2) function abc(1a,b,c2) {}

3) function abc(a1,b1,c1) {}

4) function abc(a1,1b,1c) {}

5) function abc('a',1b,'100') {}

 

[문항10]  다음 중 해당 () 안에 들어갈 문법을 완료 하시오.

 

function bbb(a,b){
//10 ~ 1까지 역순으로 출력
var w;
for(  내용에 들어갈 구문  ){

  console.log(w);
}

}
bbb(10,1);

 

정답 : w = a; w >=b; w--