[ 부트스트랩 ]
부트스트랩 이란
프론트엔드의 디자인은 개발자마다 가지각색이어서 협업 시 어려움을 겪기도한다. 이와 같은 어려움을 해결하기 위해 트위터 개발자들이 반응형 웹을 개발하기 위한 Html, CSS, JS 의 프레임워크를 개발하였는데 이것이 부트스트랩이다.
클래스별 CSS 와 JS 의 코드를 미리 생성해두고, 사용자는 태그마다 이에맞춘 class 값을 갖도록하면 디자인이 적용된다.
부트스트랩 템플릿
사용자들 간 부트스트랩을 이용해 디자인한 템플릿을 제공하기도 한다. 나는 하단의 템플릿을 베이스로 필요에 맞춰 변경해 사용하였다.
https://startbootstrap.com/template/blog-post
[ 홈 화면 구성 ]
상단바
'로고' 'Home' 'Popular' 'My Page' 로 구성된다. 로고와 Home 은 "/" 로 이동하고, Popular 는 인기 게시글들을, My Page 는 사용자의 상세정보를 확인할 수 있도록 할 예정이다.
게시글
게시자 프로필 이미지, 게시자 아이디, 게시 사진, 게시글을 출력한다. 구독기능을 추가하여 구독한 사용자의 게시글들만 홈 화면에 출력되도록 할 예정이다.
좋아요
게시글 좋아요 기능을 추가할 예정이다. 사용자가 이미 좋아요를 누른 경우 빨간하트로 표시된다. 밑에 게시글의 좋아요 수도 출력된다.
댓글
게시글마다 댓글을 달 수 있고, 댓글마다 답글을 달 수 있다.
푸터
추가 기능은 없지만 하단의 푸터도 추가해두었다.
[ 타임리프 템플릿 조각 ]
템플릿 조각이란
header, footer 등은 모든 페이지에 공통적으로 들어간다. 이러한 부분을 미리 만들어두고 필요한 부분에 재사용하면 유지보수 측면에서 효과적이다. 타임리프는 이러한 기능을 템플릿 조각으로 제공한다. 헤더, 푸터 등의 태그 속성에 th:fragment="조각명" 을 선언한 뒤
- 헤더, 푸터 등의 태그 속성에 th:fragment="조각명" 선언
- 필요한 부분에 th:replace="파일경로 :: 조각명" 으로 사용하면 된다.
템플릿 조각 사용
모든 파일에 공통으로 사용될 헤더부분이다. th:fragment="fragment-header" 로 템플릿 조각을 선언해주었다. 파일마다 head를 추가할 수 있기에 head 를 직접 조각화하는게 아닌 div 를 조각화하였다.
story.html 에서 사용해주었다. /layout/header.html 의 fragment-header 를 대체시킨다.
[ CSS, JS 포함시키기 ]
절대 경로 사용
<link href="/css/styles.css" rel="stylesheet" />
<script src="/js/story.js?ver=1"></script>위와 같은 방식으로 html 에서 외부 css 와 js 를 가져다 쓸 수 있다. 이때 / 로 시작하는 절대경로를 사용하자. 상대경로 사용시 현재 파일 위치 기준으로 가져오기 때문에, 위치가 꼬이거나 파일 위치를 변경할 경우 적용이 안되는 문제가 있다.
하지만 페이지 속성으로 보면 프로젝트의 패키징이 그대로 드러날 우려도 존재한다.
캐싱 파일 사용 방지
가끔 CSS, JS 를 HTML에서 가져와 사용하는데 적용이 안되는 경우가 있다. 이 경우 경로가 잘못되거나, 이전에 캐싱한 CSS, JS 를 들고와서 처리하기에 적용이 안되는 것일 수 있다. 후자의 경우 쿼리파라미터로 브라우저에게 다른 JS,CSS 파일임을 알려주면 제대로 적용이된다.
<script src="/js/story.js?ver=1"></script>[ 뷰 매핑 ]
ImageController
ImageController 에서 요청 Url 과 이미지 관련뷰인 story 와 popular 의 매핑을 수행하였다.
UserController
UserController 에서 요청 Url 과 유저 관련뷰인 profile, update, upload 의 매핑을 수행하였다.
