Post

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

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

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

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

작성일: 2025-09-06
github에 push된 코드를 바탕으로 장점, 단점, 그리고 개선사항을 정리했습니다.
아래 사항은 참고만 하시고 적용 여부는 본인이 직접 판단하시면 됩니다.

잘된점 (Good Points)

1. header 드롭다운 메뉴 구현

src/main/resources/templates/index.html (하단 script 태그)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

document.querySelectorAll('.menu-item').forEach((v, i) => {
   v.addEventListener('mouseover', (e) => {
       const current = e.currentTarget;
       const sub = current.querySelector('.sub-item');
       // scrollHeight는 요소의 크기를 벗어난 만큼의 높이를 의미
       // sub의 height=0, overflow=hidden이므로 sub의 높이를 scrollHeight만큼 설정해주어서 마우스를 올렸을 때 보이게 함
       sub.style.height = sub.scrollHeight + 'px';
   });

   v.addEventListener('mouseout', (e) => {
       const current = e.currentTarget;
       const sub = current.querySelector('.sub-item');
       sub.style.height = '0px';
   });
});
  • JavaScript를 사용하여 CSS만으로 처리하기 어려운 드롭다운 메뉴의 동적 높이 조절 기능을 잘 구현했습니다.
  • scrollHeight 속성을 활용하여 각 서브메뉴의 실제 높이만큼 부드럽게 펼쳐지도록 처리한 점이 인상적입니다.

개선점 (Areas for Improvement)

1. JavaScript 코드 위치

src/main/resources/templates/index.html

  • [개선제안] 현재 드롭다운 메뉴를 위한 JavaScript 코드가 HTML 파일 내부에 <script> 태그로 직접 작성되어 있습니다. 기능이 잘 동작하지만, HTML은 구조, CSS는 스타일, JS는 동작으로 역할을 분리하면 유지보수성이 더 좋아집니다.

  • 개선 제안: 해당 스크립트 코드를 src/main/resources/static/assets/js/ 폴더 안에 index.js 와 같은 별도 파일로 분리하고, <body> 태그가 끝나기 직전에 아래와 같이 불러오는 것을 권장합니다. ```html …

</body>

1
2
3
4
5
6
7
8
9
10

### 2. 의미 없는 `<a>` 태그 사용
`src/main/resources/templates/_fragments/header.html`
- **[개선제안]** SNS 아이콘이나 검색 아이콘처럼 클릭은 가능해야 하지만 페이지 이동이 필요 없는 부분에 `href` 속성이 없는 `<a>` 태그가 사용되었습니다.

- **대상 코드 (line 4, 12 등):**
```html
<li><a><img src="/assets/img/sns_facebook.gif" alt="MONAMI 페이스북"/></a></li>
...
<a href="#"><img src="/assets/img/search.gif" alt="상품 검색"/></a>
  • 개선 제안: <a> 태그는 본래 다른 페이지로 이동하는 링크를 위해 사용됩니다. 당장 이동할 페이지가 정해지지 않았다면 href="#" 를 임시로 사용하고, JavaScript로 특정 기능을 실행시킬 목적이라면 href="javascript:void(0);" 나 <button> 태그를 사용하는 것이 더 의미에 맞습니다. ```html
  • MONAMI 페이스북
    1
2
3
4
5
6
7
8
9
10

    ### 3. Controller의 View 이름 반환
`src/main/java/kr/hwan/monami/controllers/LandingController.java`
- **[개선제안]** 현재 Controller에서 `"index.html"` 이라고 `.html` 확장자까지 포함하여 반환하고 있습니다. Spring Boot는 `spring.thymeleaf.prefix` 와 `spring.thymeleaf.suffix` 설정 (기본값: `classpath:/templates/`, `.html`)에 따라 자동으로 View를 찾아주므로, 확장자는 생략할 수 있습니다.

- **기존 코드 (line 15):**
```java
public String index() {
    return "index.html";
}
    • 개선 제안: 더 간결하고 일반적인 Spring Boot 스타일에 따라 아래와 같이 수정하는 것을 권장합니다.
      1
2
3

      public String index() {
  return "index";
}
    • 90.강의리소스, 학생피드백
    This post is licensed under CC BY 4.0 by the author.