오늘 한 일

• 인프런 모든 개발자를 위한 HTTP 웹 기본 지식 수강 중
• 개인 연습 : 홈 목록조회 화면 (메인), 홈 상세조회 화면 html 수정 및 css 추가

화면 수정

• css파일을 추가해서 꾸미려고 하니 egov로 만들었던 폴더 구조와 달라 어디에 폴더를 만들어야 할지 고민이 되었다.
• /resources/static/css 폴더 아래에 새로운 css 파일 추가했다.
• 브라우저 별 차이점 초기화를 위해 normalize.css를 다운로드했다.
• 내가 주로 사용하는 디폴트 설정 적용을 위해 style.css를 생성했다.
• 기타 css설정은 main.css에 작성하였다.
  
• springboot 정적파일 경로 작성 참고

마우스 올리면 확대되는 이미지

• transform 먼저 설정 -> transition으로 움직임 제어 -> overflow:hidden으로 부모태그 넘치는 것 안 보이게 처리
  

.main-container section ul li a .img-wrap {
    width: 100%;
    margin-bottom: 1em;
    overflow: hidden;
}
.main-container section ul li a .img-wrap img {
    width: 100%;
    height: 100%;
    transition: all 0.3s;
}
.main-container section ul li a .img-wrap img:hover {
    transform: scale(1.1);
}

th:href

• css 파일을 가져올때도 href 방식으로 작성
• 로컬파일을 그대로 크롬에서 볼 때와 서버 돌려서 볼 때 css 파일 경로 작성법이 다름

<!-- 로컬 파일 그대로 크롬에서 볼 때 -->
<!-- <link rel="stylesheet" href="../../static/css/normalize.css">
<link rel="stylesheet" href="../../static/css/style.css">
<link rel="stylesheet" href="../../static/css/main.css"> -->

<!-- 이클립스에서 서버 구동해서 사이트에서 볼 때 -->
<link rel="stylesheet" th:href="@{/css/normalize.css}">
<link rel="stylesheet" th:href="@{/css/style.css}">
<link rel="stylesheet" th:href="@{/css/main.css}">

thymeleaf 조건문 th:if, unless

• th:if, th:unless를 사용하여 결과리스트 길이가 0이면 (결과 없으면) "등록된 게시물이 없습니다" 텍스트 보이기

<p th:if="${postList.size==0}" class="no-resultList" >등록된 게시물이 없습니다.</p>
<ul th:unless="${postList.size==0}" class="list-wrap">...</ul>

sql 변경

• 게시물은 최신일수록 맨 위에 있어야 함. repository 구현체에서 jpql을 수정해서 제일 늦게 수정된 게시물이 맨 위로 오도록 변경

// JpaPostRepository.java
@Override
public List<Post> findAllFromHome(Long homeId) {
	return em.createQuery("select p from Post p where p.homeId = :homeId order by updatedAt desc", Post.class)
			.setParameter("homeId", homeId)
			.getResultList();
}

PostForm.java 대신 Post.java 테스트

• 변수가 거의 비슷한데 html에서 보낸 데이터를 form객체로 받고, 그걸 다시 post객체로 받는 과정이 꼭 필요한가 의문이 들었음
• 직접 테스트한 결과, 아무런 문제 없이 잘 작동함....!

// PostController
// 기존 form 객체 사용
public String createPost(@PathVariable("homeId")Long homeId, PostForm form) {
  Post post = new Post();
  post.setHomeId(homeId);
  post.setAuthorId(form.getAuthorId());
  post.setContent(form.getContent());
  postService.createPost(post);
  
  return "redirect:/homes?homeId=" + homeId;
}

// post 객체 사용
public String createPost(@PathVariable("homeId")Long homeId, Post post) {
	post.setHomeId(homeId);
    postService.createPost(post);
    
    return "redirect:/homes?homeId=" + homeId;
}