수학과의 개발자 도전기

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

Book Reivew 페이지 오른쪽 하단에 update 버튼을 만들었는데, 그 버튼을 누르면 해당 책 정보를 수정할 수 있는 페이지로 넘어간다. 

이미 저장되어 있는 정보를 불러와야하는 게 save와는 달랐다. 체감상 저장기능보다 구현하기 어려워서 시간이 꽤 걸렸던 부분이었다 

templates 패키지에 bookshelf-update.mustach 파일을 생성하고 코드를 작성한다.

bookshelf-id.mustache 구현할 때처럼 객체(?)를 받아서 객체 정보를 표시하는 방식으로 작성했다 

수정이 다 되었을 때 '수정완료' 버튼을 누르면 완료되고, delete버튼도 있어서 해당 책을 삭제할 수 있다 

bookshelf-id.mustache는 다음 링크에서 확인가능하다

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

화면을 다 구성했으면 수정 기능을 할 수 있게 index.js 파일에 update()를 작성한다 

자세한 정보는 다음 링크에서 확인 가능하다 

https://github.com/heyazoo1007/bookproject/blob/master/src/main/resources/static/js/app/index.js

메인페이지와 bookshelf 페이지를 완성한 후 게시글을 저장하고 수정하는 view를 만들었다

추가로 게시글 저장후 해당 책이름을 선택하면 책 후기를 볼 수 있는 Review 화면으로 이동하는 것까지 구현했다.

이후 실제로 작동을 할 수 있게 index.js를 만들어서 save,update,delete 기능을 추가했다 

1. 게시글 저장 View

먼저 templates 패키지에 bookshelf-save.mustache 파일을 생성했다

관련 코드는 다음 링크에 가면 확인할 수 있다.

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

이 단계에서 발생한 문제:

-카테고리를 정수값으로 설정했을 때 코드가 복잡해짐

원인:

처음에는 카테고리를 정수로 받아서 db에 입력하고, 그걸 불러올 때 정수에 해당하는 카테고리를 표시하려고 했으나,

코드가 복잡해질 것 같았다

해결:

카테고리도 문자열로 변경후 입력된 문자열을 그대로 저장하고 불러오는 구조로 만들었다 

-책 저장시 입력된 카테고리값이 db에  반영되지 않는 오류

원인:

카테고리는 다른 항목들과는 다르게 selectbox로 이루어져있기 때문에 index.js에 따로 설정을 해주어야한다

해결:

index.js에 category항목에 변형을 주었더니 해결되었다 

자세한 건 다음 링크를 참조하면 된다 

https://heyazoo1007.tistory.com/185 

2. 등록 기능 index.js에서 구현하기 

save 화면만 만든다고 해서 게시글을 등록할 수 있는 것은 아니다. 실제로 데이터베이스에 등록할 수 있게 resource/static\js\app 패키지를 만들어 index.js 파일을 만든다

해당 코드는 다음 링크를 통해 확인 할 수 있다.

https://github.com/heyazoo1007/bookproject/blob/master/src/main/resources/static/js/app/index.js

작성하면서 주의해야할 점

-오타,괄호 짝 맞는지 확인

: 이거때문에 오류도 많이나고, 고생도 많이 했기 때문에 조심해서 코딩하면 좋을 것 같다

그럼에도 오류가 발생한다면 8080포트로 프로젝트 실행후 브라우저에서 f12를 누른 후 콘솔창에 출력된 오류와 오류 위치를 확인해서 문제를 해결하면 된다 

3. 책 이름 선택 시 Book Review로 이동하기 

선택한 책의 정보를 구체적으로 볼 수 있는 BookReview 페이지를 만들고 책 이름을 눌렀을 때 이동하게 만들었다.

먼저 templates 패키지에 bookshelf-id.mustache 파일을 생성했다 

여기서 id는 책에 주어진 id로 id를 기준으로 책 정보를 불러온다 

여기서 발생한 문제: 

-저장된 책이름 클릭시 책 후기를 불러올 수 없다는 오류( no method or field name 'review')

원인:

Book Review로 이동한 뒤 db에서 review에 해당하는 내용을 가져와야하는데 repository,service,index controller에서 불러오는 메소드가 없어서 발생했다

해결:

repository,service,index controller에 findReview() 메소드를 생성했더니 오류가 해결되었다 

-게시글 2개 이상 일때 query did not return a unique result:2 오류 

원인:

처음에는 db에 저장된 데이터를 어떻게 불러오는지 몰라서 책을 보고 따라했다. 책에서는 db에 저장된 전체 게시글만 불러왔기 때문에 findAllDesc()라는 메소드를 사용했다.

나도 그걸 그대로 사용하다보니 책이 1개만 있을 경우 전체 내용도 하나이므로 책이름을 클릭 했을 때 전체 책(1개)의 정보가 불러와졌다

그런데 책을 2개이상을 만들다보니 Book Review 페이지로 이동시 하나의 아이디에 전체 책 정보가 불러와지니까 unique result를 반환할 수 없었던 것 같다.

해결:

findAllDesc()를 삭제하고, findById로 수정하니 unique 값이 불러와져서 문제가 해결되었다 

바로 위의 문제에서도 findById()로 다 해결이 되어서 findByReview()도 삭제 했다

이 오류를 통해서 원하는 정보를 불러오는 것에 대해 자세하게 생각해야하고, controller,service,repository 모두 이용해야하는 것을 배웠다 

- Id is null 오류

원인:

index controller bookshelfId()에서 id로 액세스 할 수가 없어서 발생했다

해결:

@Pathvariable id 파라미터를 추가했더니 해결되었다

저장된 정보 불러오는데에는 @Pathvariable id 사용하기

프로젝트에 참고한 책: '스프링 부트와 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가 깔끔하지 않아서 그나마 깔끔하게 하려고 느리지만 하나씩 해보면서 시간을 조금 들여서 만들었다 (버튼 위치 조정, 표 위치 조정 등)