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