티스토리 뷰

Study/FastCampus

[Java Project] Part 2. 게시판 서비스 만들기 - 게시판 페이지 생성

코딩하는 앤지 2023. 9. 1.
728x90
반응형

1. 게시판 페이지 생성

  • html 파일들은 main > resources > templates 안에 넣어주면 된다.

(1) 기본 페이지 생성

  • templates > articles 아래 index.html 파일을 생성한다.
    • lang = "ko"
    • title: 게시판 페이지
  • body에는 헤더, 메인페이지(테이블), 푸터를 넣을 것이다.
    • sementic tag 참고
    • <header></header>
    • <main></main>
      • 검색창은 form 태그로 작성한다.
        • 보여주고 싶지 않은 부분은 hidden 처리를 해준다.
        • 제목, 본문, ID, 닉네임, 해시태그 옵션을 라벨로 주어준다.
        • 검색어를 input으로 받는다.
        • submit 버튼을 넣는다.
      • 테이블
        • <table> 태그를 사용하여 게시글 리스트를 보여준다.
          • <thead> 여기에는 제목, 해시태그, 작성자, 작성일을 넣어준다.
            • 이때, <tr> 은 row , <th>는 column 명을 의미하는 것 같다.
          • <tbody> 여기에는 임의로 데이터를 작성해 넣어준다.
            • <tr>은 마찬가지로 row, <td>를 통해 내용을 하나씩 입력한다.
            • <tr> <td> 첫번째글 </td> <td> #java </td> <td> Angie </td> <td> 2023-09-01 </td> </tr>
      • 네비게이션 바
        • <nav> 태그를 사용한다.
          • 여기서도 <table> 을 사용한다.
          • <table><tr><td>prev</td><td>1</td><td>2</td><td>next</td></tr></table>
    • <footer></footer>
  •  작동 확인을 하려면 Controller에서 해당 페이지를 return 하도록 해주면 된다.
@GetMapping
public String articles(ModelMap map) {
	map.addAttribute("articles",List.of());
	return "articles/index";
    }
  • 테스트를 할 때, 에러가 나올 수 있는데 만약 text/html의 옵션에 따른 에러라면, 기존에 contentType으로 테스트 했던 것을 contentTypeCompatibleWith로 바꾸어주면 된다.
  • LiveReload 확장 프로그램을 사용하면 변경점이 바로바로 반영된다.
  • <html lang="ko" xmlns:th="http://www.thymeleaf.org"> 를 넣으면 thymeleaf 템플릿임을 명시해주는 역할을 한다. (요즘엔 생략 가능)
  • header 와 footer는 반복되는 부분이다. 이 부분은 thymeleaf의 기능을 통해 한 번만 작성하고, 다른 곳에서 포함시켜 사용할 수 있도록 할 수 있다.
    • <header th: replace="~{header :: header}">
    • header.html 파일을 templates 안에 생성한다.
      • <header> 안에 꾸며주면 이제 replace인 부분에도 동일하게 적용될 것이다.
      • footer도 마찬가지이다.

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/43z0P6S

 

 

#패스트캠퍼스 #포트폴리오 #직장인자기계발 #환급챌린지 #포트폴리오챌린지 #패스트캠퍼스후기 #초격차패키지 #오공완

728x90
반응형

'Study > FastCampus' 카테고리의 다른 글

[Java Project] Part 11. 자소서 작성 팁  (0) 2023.09.03
[Java Project] Part 2. 게시판 서비스 만들기 - 로그인 페이지 생성 & 디자인  (1) 2023.09.02
[Java Project] Part 2. 게시판 서비스 만들기 - API & 뷰 엔드포인트  (0) 2023.08.31
[Java Project] Part 2. 게시판 서비스 만들기 - 데이터베이스 접근 로직3 & API 테스트 정의  (0) 2023.08.30
[Java Project] Part 2. 게시판 서비스 만들기 - 데이터베이스 접근 로직2  (0) 2023.08.29
댓글