RE:ISC프로젝트 3-홈화면 및 프로젝트 홈 화면 제작

주요 변경사항

• 화면
  기존 ISC컨트롤러에서 이 단계는 크게 변화한 것이 없으나, 색상을 전반적으로 통일하고, 카드뷰의 크기를 줄여주었다.
  

  • 이후 전체적으로 완성된다면, 각각의 사용 화면들을 미리 보여주어 로그인 이후 할 수 있는 일들을 로그인하기보다 위에 큰 캐러셀로 만들어주는 것도 계획에 있다

• 코드
  이부분은 폴더 구조 정리 게시물에서도 말하였듯, mvc구조를 지키지 못한 부분들을 고친 것이 주요 수정사항이다.
  

  Autowired삭제

  예전에는 @controller과 @Autowired를 사용하여 컨트롤러에 의존성을 주입하였는데, 함께 프로젝트를 진행해주시던 분께서 이젠 예전에 보던 책의 코드만 따라가지 말고 무엇이 어떻게 돌아가는지를 알아야된다는 조언을 해주셨다.
  결론부터 말하자면, @Autowired가 어떤 역할을 하는지 찾아본 뒤에 전체적인 코드를 @RequiredArgsConstructor와 private final을 활용하여 서비스와 뷰 코드를 주입하는 방식으로 수정하였다.

  고친 코드의 장점

  객체가 생성되자마자, 필요한 모든 의존성이 주입된다.
  우리 프로젝트는 파이어베이스를 사용하였는데, ProjectService의 생성자로 Firestore이 필요하다.
  기존의 코드와 달리 고친 코드는 private final projectService 객체를 생성함과 firestore가 동시에 주입되므로 에러의 발생을 막을 수 있다.
  또한 final옵션을 사용하면 객체의 예기치 못한 변경을 원천적으로 차단할 수 있다는 장점 역시 존재한다.

  의존성 주입이란

  자바에서는 기본적으로 단일 책임 원칙, 즉 1클래스가 1책임(기능,역할)을 하기를 권장한다.
  그러나 우리가 실질적인 작업을 하다보면 A라는 클래스가 하나의 원칙을 하기 위해서 B에 있는 외부 라이브러리의 기능이나 데이터를 참고해야하는 일이 생긴다.
  이럴 때에 최대한 각 클래스의 결합은 막고(수정을 용이하게 하기 위하여),두 객체간의 관계성을 외부에서 형성해주기 위하여 탄생한 개념이 바로 의존성이다.

  프로젝트 홈

  
  위 화면은 프로젝트 탭에 들어가면 가장 먼저 나오는 화면으로 기존의 프로젝트를 위에서 띄워주고 새로운 프로젝트 추가를 할 수 있는 곳이다.
  여기에서는 정보를 불러오고 새로운 프로젝트를 추가할 수 있도록 해두었다.

  트러블 슈팅

  시간을 파싱하는 과정에서 몇번 시행착오가 있었다.
  

    public static Date getDate(String dateString, DateTimeFormatter formatter) {
        Date date = null;
        if (dateString != null && !dateString.isEmpty()) {
            LocalDateTime localDateTime = LocalDateTime.parse(dateString, formatter);
            localDateTime = localDateTime.truncatedTo(java.time.temporal.ChronoUnit.MINUTES);
            date = java.sql.Timestamp.valueOf(localDateTime);
        }
        return date;
    }
  

  위 코드를 통해 string을 분명 변경하여,Firebase에는 내가 원하는 대로 데이터가 잘 들어갔으나 페이지의 출력에서는 자꾸 필요없는 소수점 단위의 초까지 나오는 것을 발견하였다.
  파이어베이스에 들어간 코드는 문제가 없는 것으로 보아 페이지를 띄우는 과정에서 문제가 생기었을 것으로 추측하고 타임리프 상에서 시간을 다시 파싱하는 방향으로 코드를 수정하였다.

  타임리프 시간 파싱

  우선 project의 생성일자와 수정일자는 자바에서는 Date타입으로 관리하여 시간을 원하는대로 포멧할 수 있도록 해두었고, 파이어베이스에 그 포멧한 정보를 string으로 넘겨주었다.
  그러므로, 파이어베이스 상으로 들어간 적 없는 초 단위가 출력되는 것은 타임리프의 기본 포멧팅된 시간 출력 형식이 내가 원하는 형식과 맞지 않는 것으로 판단하고 타임리프의 코드를 수정하였다.
  

        <section class="widgets">
            <a th:each="project : ${projects}" th:href="@{/project/{name}(name=${project.name})}" class="widget">
                <h2 th:text="${project.name}">프로젝트명</h2>
                <p th:text="${project.place_name}">매장명</p>
                <p th:text="'생성일자 ' + ${#dates.format(project.date, 'yyyy/MM/dd HH:mm')}">생성일자</p>
                <p th:text="'수정일자 '+${#dates.format(project.update_date, 'yyyy/MM/dd HH:mm')}">수정일자
                </p>
                <p th:text="${project.version}">버전</p>
            </a>
        </section>
  

  이렇게 dates.format를 사용하고, 내가 원하는 형식을 적자 원하는대로 코드가 작동하는 것을 확인할 수 있었다.