inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

mvc2 form 프로젝트에 있는 add.html 문법문제

330

성 민

작성한 질문수 1

0

제가 지금 스프링부트 3.0 이상 사용하고 있는데 타임리프 문법오류가 나는데 혹시 버전 문제인건가요?


<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="utf-8">

<link th:href="@{/css/bootstrap.min.css}"

href="../css/bootstrap.min.css" rel="stylesheet">

<style>

.container {

max-width: 560px;

}

</style>

</head>

<body>

 

<div class="container">

 

<div class="py-5 text-center">

<h2>상품 등록 폼</h2>

</div>

 

<form action="item.html" th:action th:object="${item}" method="post">

<div>

<label for="itemName">상품명</label>

<input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">

</div>

<div>

<label for="price">가격</label>

<input type="text" id="price" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">

</div>

<div>

<label for="quantity">수량</label>

<input type="text" id="quantity" th:field="*{quantity}" class="form-control" placeholder="수량을 입력하세요">

</div>

 

<hr class="my-4">

 

<!-- single checkbox -->

<div>판매 여부</div>

<div>

<div class="form-check">

<input type="checkbox" id="open" th:field="*{open}" class="form-check-input">

<label for="open" class="form-check-label">판매 오픈</label>

</div>

</div>

 

<!-- multi checkbox -->

<div>

<div>등록 지역</div>

<div th:each="region : ${regions}" class="form-check form-check-inline">

<input type="checkbox" th:field="*{regions}" th:value="${region.key}" class="form-check-input">

<label th:for="${#ids.prev('regions')}"

th:text="${region.value}" class="form-check-label">서울</label>

</div>

</div>

 

<!-- radio button -->

<div>

<div>상품 종류</div>

<div th:each="type : ${itemTypes}" class="form-check form-check-inline">

<input type="radio" th:field="*{itemType}" th:value="${type.name()}" class="form-check-input">

<label th:for="${#ids.prev('itemType')}" th:text="${type.description}" class="form-check-label">

BOOK

</label>

</div>

</div>

 

<!-- SELECT -->

<div>

<div>배송 방식</div>

<select th:field="*{deliveryCode}" class="form-select">

<option value="">==배송 방식 선택==</option>

<option th:each="deliveryCode : ${deliveryCodes}" th:value="${deliveryCode.code}"

th:text="${deliveryCode.displayName}">FAST</option>

</select>

</div>

 

<hr class="my-4">

 

<div class="row">

<div class="col">

<button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button>

</div>

<div class="col">

<button class="w-100 btn btn-secondary btn-lg"

onclick="location.href='items.html'"

th:onclick="|location.href='@{/form/items}'|"

type="button">취소</button>

</div>

</div>

 

</form>

 

</div> <!-- /container -->

</body>

</html>

spring mvc

답변 1

0

y2gcoder

안녕하세요. 성 민님, 공식 서포터즈 y2gcoder입니다.

강의에서 제공하는 form-start 프로젝트를 변경해서 사용하고 계신 것이 아니라 새로 프로젝트를 만들어서 사용하고 계신 것으로 보입니다!

form 프로젝트에 있는 addForm.html을 그대로 붙여넣기 했을 때 오류가 발생하여 실행이 되지 않는 상태라고 인지했습니다.

제가 생각해도 스프링 부트 3버전으로 올라가면서 호환되는 thymeleaf 의 버전도 같이 올라가면서 구현방식이 바뀌어 발생한 문제점으로 보입니다. 

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}"
          href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>
<body>

<div class="container">

    <div class="py-5 text-center">
        <h2>상품 등록 폼</h2>
    </div>

    <form action="item.html" th:action th:object="${item}" method="post">
        <div>
            <label for="itemName">상품명</label>
            <input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">
        </div>
        <div>
            <label for="price">가격</label>
            <input type="text" id="price" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">
        </div>
        <div>
            <label for="quantity">수량</label>
            <input type="text" id="quantity" th:field="*{quantity}" class="form-control" placeholder="수량을 입력하세요">
        </div>

        <hr class="my-4">

        <!-- single checkbox -->
        <div>판매 여부</div>
        <div>
            <div class="form-check">
                <input type="checkbox" id="open" th:field="*{open}" class="form-check-input">
                <label for="open" class="form-check-label">판매 오픈</label>
            </div>
        </div>

        <!-- multi checkbox -->
        <div>
            <div>등록 지역</div>
            <div th:each="region : ${regions}" class="form-check form-check-inline">
                <input type="checkbox" th:field="*{regions}" th:value="${region.key}" class="form-check-input">
                <label th:for="${#ids.prev('regions')}"
                       th:text="${region.value}" class="form-check-label">서울</label>
            </div>
        </div>

        <!-- radio button -->
        <div>
            <div>상품 종류</div>
            <div th:each="type : ${itemTypes}" class="form-check form-check-inline">
                <input type="radio" th:field="*{itemType}" th:value="${type.name()}" class="form-check-input">
                <label th:for="${#ids.prev('itemType')}" th:text="${type.description}" class="form-check-label">
                    BOOK
                </label>
            </div>
        </div>

        <!-- SELECT -->
        <div>
            <div>배송 방식</div>
            <select th:field="*{deliveryCode}" class="form-select">
                <option value="">==배송 방식 선택==</option>
                <option th:each="deliveryCode : ${deliveryCodes}" th:value="${deliveryCode.code}"
                        th:text="${deliveryCode.displayName}">FAST</option>
            </select>
        </div>

        <hr class="my-4">

        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button>
            </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='items.html'"
                        th:onclick="|location.href='@{/form/items}'|"
                        type="button">취소</button>
            </div>
        </div>

    </form>

</div> <!-- /container -->
</body>
</html>

먼저 form 프로젝트의 addForm.html을 첨부하겠습니다.

실행이 불가능한 상태이고 스스로 해결이 불가능하시면


실제 동작하는 전체 프로젝트를 압축해서 구글 드라이브로 공유해서 링크를 남겨주세요.

구글 드라이브 업로드 방법은 다음을 참고해주세요.

https://bit.ly/3fX6ygx


주의: 업로드시 링크에 있는 권한 문제 꼭 확인해주세요


추가로 다음 내용도 코멘트 부탁드립니다.

1. 문제 영역을 실행할 수 있는 방법

2. 문제가 어떻게 나타나는지에 대한 상세한 설명

감사합니다.

1

성 민

https://drive.google.com/file/d/19sOKtdOB1WNw75Uw28o5YNJa5wdslGqM/view?usp=drive_link

form-start를 form 으로 바꾼후 실행하였는데 스프링부트 run 실행 자체가 안돼요.

0

y2gcoder

image

액세스 권한 문제를 해결해주시고 다시 올려주시겠습니까?

 

1

성 민

https://drive.google.com/file/d/19sOKtdOB1WNw75Uw28o5YNJa5wdslGqM/view?usp=drive_link

권한 문제 수정했습니다.

1

y2gcoder

보내주신 코드 살펴보았습니다.
보내주신 코드를 그대로 실행해보았을 때(jdk 17.0.6 기준)

image아래와 같이 잘 실행되는 것을 볼 수 있습니다.

자주하는 질문(클릭)에서 안내하는 것과 같이 한 번 더 프로젝트 초기화 후 실행해보시겠습니까?

 

1

성 민

감사합니다.
혹시 sts4 사용해서 그런건가요? run configurations 자체가 없어서요.

0

y2gcoder

아!
아마도 IDE 차이로 실행되지 않을 수도 있을 것 같습니다.

다음 링크(클릭)을 보고 시도해보시겠습니까?

강의는 Intellij 기준으로 되어있기 때문에, 위의 방법으로 해결이 되지 않으신다면 Intellij 무료 버전으로 수강하시는 게 좀 더 수월하게 진행이 되실 것이라 생각합니다 :)

1

성 민

IDE 차이였네요 감사합니다.

0

y2gcoder

파이팅입니다!

이미지 업로드와 db 트랜잭션 묶는법

0

43

1

Could not resolve org.springframework.boot:spring-boot-starter-validation:2.4.4

0

53

2

MessageSourceTest 코드

0

47

1

인터셉터 에러 설정

0

48

1

resolveArgument()메서드 질문

0

57

1

43강 검증1 에서 실패 로직 관련 질문있습니다.

0

57

2

타임리프 3.X 버전 rendering, serializer 에러 해결 방법

2

133

3

스프링 빈에 등록이 안되는거 같은데 어떻게 하면 좋을까요?ㅠㅠ

0

90

3

pdf 오타 문의

0

57

1

ItemUpdateForm 검증 관련 질문입니다.

0

48

1

22page 링크 주소 변경

0

59

2

특정 데이터와 파일을 함께 저장 시, 테이블 구조 질문

0

53

1

섹션3번 수업에 대한 질문입니다.

0

80

2

@Autowired 보다 더 좋은 방법이 어떤 걸까요?

0

85

2

타입컨버터 가 람다랑 비슷해 보이는데 저의 생각이 맞는지?.

0

65

1

자바스크립트 인라인에서 객체 직렬화 시 오류가 납니다

0

142

3

스프링부트 - 오류페이지2 에서 500.html 에서 쓰인 객체 질문

0

63

1

톰캣 에러 페이지가 안보입니다.

0

103

2

apiEceptionController에서 센드 에러 호출하면 안되는지?

0

81

1

세션 타임아웃시 쿠키 삭제 방법이 없나요?

0

118

2

ApiExceptionController 질문드립니다.

0

64

1

셀렉박스 챕터에서 option value에 ==배송 방식 선택== 이것을 넣은 이유가 궁금함, 이렇게 구상해도 되는지?

0

66

1

MemberRepository 필드의 fianl 선언 유무

0

85

2

혹시 index.html 에서는 fragment 사용이 안되는건가요

0

58

1