[Spring] HTML을 이용한 상품 등록 페이지 중복 제거

김상현·2022년 11월 29일
0

Spring

목록 보기
10/13
post-thumbnail

📒 [실전! 스프링 부트와 JPA 활용 - 김영한] 프로젝트를 완성한 후 부족한 기능을 개선한 후 정리하는 글입니다.


📍 개선한 기능

  • 이전에 기존의 책(Book) 유형에 해당하는 상품 유형 1개만 등록이 가능한 상태에서 앨범(Album)과 영화(Movie) 상품 유형을 추가로 등록할 수 있도록 수정한 시도가 있었습니다. 🧷 참고
  • 기능 구현 및 동작에는 오류가 없었지만, 3개 유형의 상품을 등록하기 위해 상품 유형에 해당하는 페이지를 각각 제작하였습니다.
    • 책(Book) 유형에 해당하는 상품을 등록하기 위한 createBookForm.html
    • 앨범(Album) 유형에 해당하는 상품을 등록하기 위한 createAlbumForm.html
    • 영화(Movie) 유형에 해당하는 상품을 등록하기 위한 createMovieForm.html
  • 비슷한 Form 3개를 복사 붙여넣기를 통해 주먹구구식으로 해결했지만, 이것은 분명 좋지 않은 개발 상태임을 개발 호소인으로서 직감하였지만 해결 방법이 떠오르지 않아서 일단 남겨두기로 하였습니다.
  • 이후 상품 목록 기능을 개선하기 위해 BootStrap의 Docs에서 컴포넌트를 확인하던 중 아코디언 을 발견하였습니다.
  • 3개의 상품 유형을 1개의 페이지 안에 다 담게 되면 페이지가 너무 길어져 사용자가 기능을 한번에 파악하기 어려워져서 UX(사용자 경험) 측면에서 좋지 못하다고 생각했습니다.
  • 하지만 3개의 상품등록 페이지에 해당하는 HTML을 1개의 아코디언 컴포넌트를 사용하여 구성하면 화면상에서는 축약되어 표현되기 때문에 사용자 경험 측면에서도 나쁘지 않고, 개발적인 측면에서도 중복을 제거할 수 있기 때문에 진행하고 있던 상품 목록 기능 개선을 잠시 접어두고 다시 상품 등록 기능을 재구성 하였습니다.

📌 수정 전 상품 등록 페이지

📌 수정 후 상품 등록 페이지


📍 기능 개선 과정

📒 BootStrap Docs의 Accordion을 참고하여 작성하였습니다.

📌 상품 등록 페이지 통합

  • BootStrap Docs Accordion 컴포넌트를 활용하여 <div class="accordion-body"> 의 CONTENT 부분에 각 상품의 createForm 을 작성하였습니다.

🧷 BootStrap Accordion

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        CONTET
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        CONTET
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        CONTET
      </div>
    </div>
  </div>
</div>

📌 중복으로 작성되었던 코드 제거

  • 각 상품 별로 작성되었던 createOOOOForm.html 파일을 모두 제거하였습니다.
  • Controller 에서도 각 상품 별로 존재하던 GetMapping 코드 모두 제거하였습니다.
  • 1개의 GetMapping으로 모든 모든 상품을 등록할 수 있도록 수정하였습니다.
@GetMapping("/items/new")
public String createBookForm(Model model){
    model.addAttribute("albumForm", new AlbumForm());
    model.addAttribute("bookForm", new BookForm());
    model.addAttribute("movieForm", new MovieForm());
    return "items/createItemForm";
}
  • model 에 3개의 Form Attribute를 추가하는 이유는 3개의 상품 중 어떤 상품이 등록될지 모르기 때문에 모든 상품의 Form 을 추가하였습니다.

📍 고찰

  • 이번 상품 등록 기능을 개선할 때 사용한 주요 요소는 아코디언 컴포넌트, 즉 HTML 이다.
  • 중복 제거 문제SpringBoot 혹은 ThyemeLeaf 로 해결해야 한다는 생각이 무의식 중에 있었던 것 같다.
  • HTML로 간단하게 해결할 수 있는 문제를 복잡한 기술을 사용하여 해결하는 것은 소잡는 칼로 닭잡는 격이고 완전히 비효율적이다.
  • 앞으로 열린 사고를 가지고 문제에 접근할 때 다양한 방식을 열어두고 효율적으로 접근할 수 있도록 노력해야겠다.
profile
목적 있는 글쓰기

0개의 댓글