모두의 다이어리(3) - 홈화면과 포스팅 구현

서론

저번 포스팅에 이어 오늘은 홈화면과 포스팅화면을 구현해봤다.
앞서 나왔던 이미지에서 홈화면은 단순 html파일로 구현한 정적 파일이었는데 오늘은 thymeleaf를 이용해서 post 변수를 넘겨주어 화면에서 db에 저장된 포스트들이 출력되도록 구현하였다.

현재까지 진행상태

홈화면

로그인을 하지 않고 글쓰기 버튼을 눌렀을 때

글쓰기 버튼을 눌렀을때 일기를 쓸 수 있는 Form

등록된 글을 클릭했을 때 (Path-variable)

DB에 저장된 포스트들이 순서대로 보여지는 홈화면

HomeController - GetMapping(“/”)

HomeController - GetMapping(“/posts”)

HomeController - PostMapping(“/posts”)

HomeController - GetMapping(“/posts/{postId}”)

home.html

사실 이번 프로젝트에서 자바-스프링 코드를 작성하는 것에서보다 타임리프와 html파일을 작성하는 것에 더 어려움을 느끼고 있다..
화면이 예쁘게 안보이면 뭔가 찝찝한 기분때문에 조금이라도 더 css를 만지게 되는 것 같다.. 이번 포스팅에서는 주로 타임리프의 each문과 path-variable처리를 많이 다루었던것 같다.

그래도 나름 시간을 쓰면서 노력한 결과 이정도 화면은 마음에 든다 😊

또 애먹었던 점, java의 LocalDateTime을 쓰면서 내가 원하는 방식의 시간형식으로 출력하는 것.. format을 써도 되지만 나는 substring을 이용해서 원하는 길이만큼 잘라서 출력해주었다.

다음 포스팅에서는 지금까지 만든 것을 좀 다듬어보고 jwt, 스프링 인터셉터, 페이징처리를 위주로 구현해보아야겠다.

다음 포스팅에서 계속!