Post

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

메가스터디IT아카데미 SpringBoot 백엔드 개발자 과정 주말반 (25.02.22 ~ 25.09.13). 이창환님의 포트폴리오 1주차 작업 내용에 대한 피드백

Posted
Preview Image
By
6 min read
이창환님 포트폴리오 2주차 작업 내용 피드백

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

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

총평

전반적으로 프로젝트 구조를 잘 설정하셨고, Spring Boot와 Thymeleaf의 기본을 잘 이해하고 활용하고 계십니다.

코드 스타일이 깔끔하고 수업 내용을 잘 소화하신 것이 보입니다.

아래에는 잘된 점과 몇 가지 개선 제안 사항을 파일별로 정리했습니다.

잘된 점 (Good Points)

1. 일관성 있는 프로젝트 구조

  • controllers, models, static, templates 등 Spring Boot의 표준적인 프로젝트 구조를 잘 따르고 있습니다. 덕분에 코드를 이해하고 파일을 찾기가 수월합니다.

2. Thymeleaf Fragment 활용

  • 파일: index.html, _head.html, header.html 등
  • _fragments 폴더를 만들어 header, footer, head 등 공통적인 UI 요소를 분리하고 th:replace를 사용해 재사용한 점이 훌륭합니다. 이는 코드 중복을 줄이고 유지보수성을 크게 향상시키는 좋은 습관입니다.
1
2
3
4
5
6
7
8

<!-- src/main/resources/templates/index.html -->
<head>
    <th:block th:replace="~{_fragments/_head :: my-head('MONAMI')}"/>
    <link rel="stylesheet" th:href="@{/assets/css/index.css}"/>
</head>

<body>
<th:block th:replace="~{_fragments/header}" />

3. 깔끔한 컨트롤러 로직

  • 파일: src/main/java/kr/hwan/monami/controllers/LandingController.java
  • 컨트롤러의 역할에 맞게 복잡한 비즈니스 로직 없이 요청을 받아 적절한 뷰를 반환하는 역할에 집중하고 있어 코드가 간결하고 명확합니다.

개선점 (Areas for Improvement)

1. 모델 클래스 필드 오타 (반드시 수정해야 하는 부분)

  • 파일: src/main/java/kr/hwan/monami/models/UploadItem.java

  • UploadItem 클래스의 filedName 필드에 오타가 있습니다. filed가 아니라 field가 올바른 표기입니다. 이런 오타는 나중에 데이터를 주고받을 때 값을 제대로 인식하지 못하는 심각한 문제로 이어질 수 있습니다.

  • 인용 (line 7):
    1
2
3
4

    public class UploadItem {
    private String filedName;   // <input type="file">의 name 속성
    // ...
}
  • 개선 제안: fieldName으로 수정하는 것을 권장합니다.
    1

    private String fieldName;   // <input type="file">의 name 속성

2. JavaScript 코드 위치 (수정을 권고하는 제안사항)

  • 파일: src/main/resources/templates/index.html

  • 메뉴의 마우스 오버 효과를 처리하는 JavaScript 코드가 HTML 파일 내에 <script> 태그로 직접 작성되어 있습니다. 기능적으로는 문제가 없지만, HTML은 구조, CSS는 스타일, JS는 동작을 담당하도록 역할을 분리하는 것이 유지보수에 더 좋습니다.

  • 인용 (line 15 ~ 30):
    1
2
3
4
5
6
7
8
9
10
11

    <script>
    document.querySelectorAll('.menu-item').forEach((v, i) => {
       v.addEventListener('mouseover', (e) => {
           // ...
       });

       v.addEventListener('mouseout', (e) => {
           // ...
       });
   });
</script>
  • 개선 제안: 이 코드를 assets/js/ 폴더에 main.js 같은 별도 파일로 분리하고, _scripts.html 프래그먼트를 통해 페이지에 포함시키는 것을 추천합니다.

3. 시맨틱 HTML 및 웹 접근성 (수정을 권고하는 제안사항)

  • 파일: src/main/resources/templates/_fragments/header.html
  • SNS 아이콘과 상단 메뉴의 <a> 태그에 href 속성이 비어있거나 #으로 되어 있습니다.

  • 실제 링크가 아니라면 <a> 태그 대신 <div>나 <span>으로 구현하거나, role="button" 속성을 추가하여 스크린 리더 사용자에게 버튼처럼 동작함을 알려주는 것이 좋습니다.

  • 인용 (line 5, 12):
    1
2
3

    <li><a><img src="/assets/img/sns_facebook.gif" alt="MONAMI 페이스북"/></a></li>

<li><a href="#">HOME</a></li>
  • 개선 제안:
    • 실제 이동할 페이지가 정해졌다면 href="/" 와 같이 경로를 지정해주세요.
    • 로고 이미지 역시 홈페이지로 이동하는 링크를 걸어주는 것이 일반적입니다.
      1
2
3
4
5

      <div class="logo">
    <a href="/">
        <img src="/assets/img/monami_logo.jpg" alt="logo">
    </a>
</div>

4. 주석 처리된 푸터 (수정을 권고하는 제안사항)

  • 파일: src/main/resources/templates/index.html

  • 페이지의 푸터(footer) 부분이 현재 주석 처리되어 화면에 표시되지 않고 있습니다. 의도된 것일 수 있으나, 페이지의 완성도를 위해 푸터가 필요하다면 주석을 해제하는 것이 좋습니다.

  • 인용 (line 13):
    1

    <!--<th:block th:replace="~{_fragments/footer}" />-->
90.강의리소스, 메가스터디IT아카데미 - SpringBoot 백엔드 과정 주말반(25.02.22 ~ 25.09.13)
This post is licensed under CC BY 4.0 by the author.