수학과의 개발자 도전기

프로젝트에 참고한 책: '스프링 부트와 AWS로 혼자 구현하는 웹 서비스'

메인페이지에서 bookshelf 버튼을 눌러 /bookshelf 페이지로 이동했을 때 저장한 책들의 정보를 볼 수 있는 테이블을 만들고, db에서 정보를 가져오려 한다

먼저 templates 패키지에 bookshelf.mustache 파일을 생성해서 책 정보를 담을 수 있는 테이블을 만든다. 

해당 코드는 다음 링크에서 확인할 수 있다 

https://github.com/heyazoo1007/bookproject/blob/master/src/main/resources/templates/bookshelf.mustache

책 정보로 테이블을 형성하고, db에 저장된 책 정보를 보여준다.

화면만 만들면 저장된 책 정보를 볼 수 없으므로 indexcontroller와 service, repository에도 코드를 추가해준다 

그리고 리스트를 반환하는 PostsListResponseDto 클래스도 web/dto 패키지에 생성한다 

-PostsRepository

리포지토리에 정보를 Asc(오름차순)으로 불러오는 메소드를 추가해준다 

@Query 어노테이션으로 쿼리 불러온다

처음으로 접했던 내용이었다 

리스트에서 1번이 가장 위에 있게 하고 싶어서 Desc가 아닌 Asc로 설정했다

-PostsListResponseDto

코드는 다음 링크에서 확인가능하다

https://github.com/heyazoo1007/bookproject/blob/master/src/main/java/com/heyazoo1007/book/web/dto/PostsListResponseDto.java

이걸 통해 테이블도 반환하는 dto를 따로 생성해야하는 것을 배웠다

-PostsService

.map(PostsListResponseDto:: new)는 다음 식과 동일하다

.map(posts -> new PostsListResponseDto(posts))

postRepository 결과로 넘어온 Posts의 Stream을 map을 통해 PostsListResponseDto로 변환 후 List로 변환하는 메소드이다 

-stream().map(): 각각의 item을 변경하여 새로운 컨텐츠를 생성하는 기능이다. stream.filter와 마찬가지로 map으로 어떻게 아이템을 변경시킬지 함수로 정의를 한다 

-collect(Collectors.toLists()

Collectors: stream을 일반적인 List,set 등으로 변경시키는 stream 메소드이다.  

-IndexController 

model을 파라미터로 받아서 posts 생성 후 bookshelf.mustache에 넘기면 posts의 정보들을 테이블에 나타낸다

bookshelf.mustache에 보면 {{posts.#}}인 값들이 있는데 이게 디비에서 받은 정보들을 컬럼기준으로 나타내는 것 같다(?)

model.addAttribute()에 대해 공부해야할 것 같다 

프로젝트에 참고한 책: '스프링 부트와 AWS로 혼자 구현하는 웹 서비스'

view를 만들 때는 책의 내용과 동일하게 진행하지 않고, 기획한 대로 약간의 변형을 주어 만들었다.

들어가기에 앞서 템플릿 엔진이 무엇인지, 머스테치는 무엇인지 공부했는데 해당 내용은 다음 링크를 클릭하면 볼 수 있다. (https://heyazoo1007.tistory.com/215)

이제 본격적으로 view를 만들어본다

1. buildgradle에 머스테치 의존성을 추가한다. 

compile('org.springframework.boot:spring-boot-starter-mustache')

2.  main page, bookshelf page, layout 생성

main/resource에 template, template/layout 패키지를 만든다

1.  resource/template에는 index.mustache

메인 페이지를 나타내는 화면으로 사용하였으며, 구성요소로는 책 리스트로 넘어가는 버튼과 로그인 버튼이 있다

2.  resource/template/layout에는 header.mustache와 footer.mustache를 생성한다

중복되는 헤더와 바디 끝 부분을 매번 치는 것이 번거로우니까 레이아웃을 만들어서 코드를 간단하게 만든다

-레이아웃 방식: 공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식이다. 

   페이지 로딩 속도를 올리기 위해 header에는 화면을 그리는 역할인 css를, footer에는 용량이 커질수록 body 실행이 늦어지는 javascript를 넣는다 

   jquery 다음으로 bootstrap.js이 실행되어야하므로 순서는 jquery -> bootstrap.js(bootstrap이 jquery에 의존한다)

3. main/java/web에는 화면에서 요청하는 정보를 서버에서 응답해줘야하므로 IndexController.java를 생성한다

@GetMapping(#)에서 #에 입력된 주소로 이동하면 해당 메소드가 return 하는 이름에 mustache로 확장된 파일로 이동한다는 것까지 이해하고 기획한대로 페이지를 만들어보았다(이해한게 맞는건가?)

-위의 코드들은 다음 링크에서 확인 가능하다

https://github.com/heyazoo1007/bookproject/tree/master/src/main/resources

위 파트 구현하면서 어려웠던 점:

화면을 처음 구현한 거라 ui가 깔끔하지 않아서 그나마 깔끔하게 하려고 느리지만 하나씩 해보면서 시간을 조금 들여서 만들었다 (버튼 위치 조정, 표 위치 조정 등)

프로젝트에 참고한 책: '스프링 부트와 AWS로 혼자 구현하는 웹 서비스'

엔티티의 생성 및 수정 시간을 손쉽게 입력하기 위해 JPA Auditing을 사용한다. 

BaseEntity abstract class를 domain 패키지에 생성한다. 

코드는 다음을 참고하면된다. 

• @MappedSuperclass: JPA Entity 클래스들이 BaseTimeEntity를 상속할 경우 필드들도 칼럼으로 인식하도록 해준다.
• @EntityListeners(AuditingEntityListener.class): BaseTimeEntity 클래스에 Auditing 기능을 포함시킨다

원래는 Application에 @EnableJpaAuditing을 추가하면 되지만 추후에 로그인 관련 해서 설정할 때 이거 때문에 오류가 발생할 수 있으므로  /config 패키지에 JPAConfig 클래스를 생성해 다음과 같이 코드를 작성하면 된다. 

프로젝트에 참고한 책: '스프링 부트와 AWS로 혼자 구현하는 웹 서비스'

수정기능을 입력하는 순서는 다음과 같다

1. PostsApiController에 update() 와 findById() 메소드 생성

-update() 메소드

• Long Type
• @PutMapping()
• @PathVariable
• @RequestBody

- findById() 

• PostsResponseDto
• @GetMapping()
• @PathVariable

2. PostsReponseDto 생성( GitHub 위치: /web/dto)

해당 Dto는 Entity의 필드 중 일부만 사용하므로 생성자로 Entity를 받아 필드 값에 넣고 response한다. 

3. PostsUpdateRequestDto 생성( GitHub 위치: /web/dto)

4. Posts에 update 생성자 생성

5. PostsService에 update(), findById() 메소드 생성 

• update()

• findById()

6. PostsApiControllerTest 실행 

게시글_저장 test와 다른 점은 세가지가 있어서 짚어보려한다. 

첫번째, 수정은 기존에 저장되어있는 정보를 바꾸는 일이므로 처음 정보를 저장하고, 바꿀 정보도 입력해야해서 두개의 객체              를 생성해야한다. 

두번째, requestEntity를 생성해야한다. 

세번째, //when 부분에서 restTemplate.exchange()를 이용하고, HttpMethod.PUT을 파라미터로 넣는다. 

자세한 코드는 다음 페이지에서 확인할 수 있다. 

https://github.com/heyazoo1007/bookproject/blob/master/src/test/java/com/heyazoo1007/book/web/PostsApiControllerTest.java