이주헌님 포트폴리오 2주차 작업 내용 피드백

이주헌님 포트폴리오 2주차 작업 내용 피드백

작성일: 2025-08-31
github에 push된 코드를 바탕으로 장점, 단점, 그리고 개선사항을 정리했습니다.
HTML,CSS는 최종적으로 화면에 보이는 결과가 가장 우선됩니다. 아래 사항은 참고만 하시고 적용 여부는 본인이 직접 판단하시면 됩니다.

총평

정적 웹 프로젝트를 Spring Boot 기반의 동적 웹 애플리케이션으로 전환하는 작업을 시작하셨네요!

전반적으로 Spring Boot의 기본 구조를 잘 이해하고 적용하고 있으며, Thymeleaf를 사용하여 기존 HTML을 템플릿으로 잘 변환하고 있습니다.

아래에서는 최근 작업하신 내용을 바탕으로 잘된 점과 몇 가지 개선점을 정리했습니다.

---

🏅 잘된 점

1. Spring Boot로 프로젝트 전환

정적 페이지로 구성되었던 프로젝트를 Spring Boot 기반으로 전환한 것은 매우 큰 발전입니다. MVC 패턴에 따라 Controller, Service, View(Template)를 분리하려는 시도가 돋보입니다.

• src/main/java/com/example/adv/controller/
  • 기능별로 EnjoyControler, FareBenefitController 등 역할을 분리하여 컨트롤러를 작성한 점이 좋습니다. 각 컨트롤러가 특정 도메인을 책임지게 되어 코드 관리가 용이해집니다.

2. Thymeleaf를 사용한 템플릿 적용

기존 HTML 파일의 경로들을 Thymeleaf 문법에 맞게 잘 수정하고 있습니다.

• src/main/resources/templates/enjoy/performance.html
  • 아래와 같이 th:href, th:src 등을 사용하여 Spring Boot 환경에 맞게 정적 리소스 경로를 올바르게 설정하고 있습니다.

  <link rel="stylesheet" th:href="@{/assets/css/common.css}">
  <link rel="stylesheet" th:href="@{/assets/css/performance.css}">
  ...
  <img th:src="@{/assets/img/enjoy/windy_icon2.png}" alt="바람 모양 아이콘">
  

---

🛠️ 개선점

1. Git 커밋 메시지 작성 (❗️개선이 필요합니다)

현재 커밋 메시지가 대부분 “Add files via upload”로 되어 있어, 어떤 파일이 왜 변경되었는지 파악하기 어렵습니다.

• 수정 제안:
  • 커밋 메시지는 다른 개발자(혹은 미래의 나)가 변경 내역을 쉽게 이해할 수 있도록 작성해야 합니다.
  • 좋은 커밋 메시지는 “무엇을”, “왜” 변경했는지 명확히 알려줍니다.
  • 예시:
    • feat: Spring Boot 기본 구조 추가
    • fix: WebHelper 스레드 안전성 문제 해결
    • style: performance.css 코드 포맷팅

2. CSS 코드의 중복 및 구조 (권고 사항)

CSS 코드에 중복되는 부분이 있고, 수정 이력이 주석으로 남아있어 가독성이 조금 떨어집니다.

• html/assets/css/performance.css
  • font-family와 같은 속성이 여러 선택자에서 반복적으로 선언되고 있습니다. 공통 스타일은 body나 상위 클래스에 한 번만 선언하여 상속을 활용하는 것이 좋습니다.
  • /*추가수정보완*/, /*추추가 수정보완*/ 같은 주석 대신, 기존 CSS 구조에 새로운 스타일을 통합하거나 연관된 스타일끼리 그룹화하여 관리하면 더 깔끔한 코드가 될 것입니다.

  /* 예시: 중복되는 font-family를 body에 한 번만 선언 */
  body {
    font-family: "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif;
  }
  
  /* .showTableWrap .titBox .tit 등에서는 font-family 선언을 제거하거나 필요한 경우에만 재정의 */
  .showTableWrap .titBox .tit {
    font-size: 32px;
    font-weight: 700;
    color: #333;
  }
  

3. 하드코딩된 데이터 (권고 사항)

dailyinfo.html 파일의 날짜 스와이퍼 부분이 현재 날짜 값으로 하드코딩되어 있습니다. Spring Boot를 사용하는 만큼, 이 부분은 백엔드에서 동적으로 생성하여 전달하는 것이 좋습니다.

• html/usage-guide/dailyinfo.html (line 40-90)
  • 현재 날짜를 기준으로 캘린더를 동적으로 생성하도록 컨트롤러 로직을 추가하고, Thymeleaf의 th:each 등을 사용하여 화면에 렌더링하는 방식을 추천합니다.