강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

작성자 없음

작성자 정보가 삭제된 글입니다.

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

템플릿 조각

템플릿 조각 활용

작성

·

341

0

템플릿 조각을 실제로 사용해봐야 감이 잡힐 것 같아서 실제 적용을 해보았습니다.

 

확인 하고 싶은 html파일을 절대경로로 확인했을 때 해당 템플릿조각(header, footer)부분이 전혀 적용이 안되었습니다. 

 

어디가 잘못되었던걸까요? 이틀째 이것만 보고 있는데 답이 안나와서 문의 드립니다 ,,, ㅠ

 

/resources/templates/layout/header.html

<!DOCTYPE html>
<html th:fragment="header" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Photogram</title>

	<!-- 제이쿼리 -->
	<script th:src="@{https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js}"></script>
	
	<!-- Style -->
	<link rel="stylesheet" th:href="@{/css/header.css}">
	<link rel="stylesheet" th:href="@{/css/footer.css}">
	<link rel="stylesheet" th:href="@{/css/style.css}">
	<link rel="stylesheet" th:href="@{/css/story.css}">
	<link rel="stylesheet" th:href="@{/css/popular.css}">
	<link rel="stylesheet" th:href="@{/css/profile.css}">
	<link rel="stylesheet" th:href="@{/css/upload.css}">
	<link rel="stylesheet" th:href="@{/css/update.css}">
	<link rel="shortcut icon" th:href="@{/images/insta.svg}">
	
	<!-- Fontawesome -->
	<link rel="stylesheet" th:href="@{https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css}" />
	<!-- Fonts -->
	<link th:href="@{https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap}" rel="stylesheet">
</head>

<body>
	<header class="header">
		<div class="container">
			<a th:href="@{/image/story}" class="logo">
				<img th:src="@{/images/logo.jpg}" alt="">
			</a>
			<nav class="navi">
				<ul class="navi-list">
					<li class="navi-item"><a th:href="@{/image/story}">
							<i class="fas fa-home"></i>
						</a></li>
					<li class="navi-item"><a th:href="@{/image/popular}">
							<i class="far fa-compass"></i>
						</a></li>
					<li class="navi-item"><a th:href="@{/user/profile}">
							<i class="far fa-user"></i>
						</a></li>
				</ul>
			</nav>
		</div>
	</header>
</body>

</html>

/resources/templates/layout/footer.html

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

<footer th:fragment="footer">
	<div class="container">
		<ul>
			<li><a th:href="@{#a}">소개</a></li>
			<li><a th:href="@{#a}">블로그</a></li>
			<li><a th:href="@{#a}">채용 정보</a></li>
			<li><a th:href="@{#a}">도움말</a></li>
			<li><a th:href="@{#a}">API</a></li>
			<li><a th:href="@{#a}">개인정보처리방침</a></li>
			<li><a th:href="@{#a}">약관</a></li>
			<li><a th:href="@{#a}">인기 계정</a></li>
			<li><a th:href="@{#a}">해시태그</a></li>
			<li><a th:href="@{#a}">위치</a></li>
		</ul>
		<div class="copy">
			<p>© 2022 Photogram from Lea Hwang</p>
		</div>
	</div>
</footer>

/resources/templates/auth/signin.html - header, footer 템플릿조각이 잘 적용되었는지 확인해보고 싶은 페이지

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

<div th:replace="~{/layout/header :: header}"></div>

<body>
    <div class="container">
        <main class="loginMain">
        <!--로그인섹션-->
            <section class="login">
               <!--로그인박스-->
                <article class="login__form__container">
                   <!--로그인 폼-->
                   <div class="login__form">
                        <h1><img th:src="@{/images/logo.jpg}" alt=""></h1>
                        
                        <!--로그인 인풋-->
                        <form class="login__input" >
                            <input type="text" name="username" placeholder="유저네임" required="required" />
                            <input type="password" name="password" placeholder="비밀번호" required="required" />
                            <button>로그인</button>
                        </form>
                        <!--로그인 인풋end-->
                        
                        <!-- 또는 -->
                        <div class="login__horizon">
                            <div class="br"></div>
                            <div class="or">또는</div>
                            <div class="br"></div>
                        </div>
                        <!-- 또는end -->
                        
                        <!-- Oauth 소셜로그인 -->
                        <div class="login__facebook">
                            <button>
                                <i class="fab fa-facebook-square"></i>
                                <span>Facebook으로 로그인</span>
                            </button>
                        </div>
                        <!-- Oauth 소셜로그인end -->
                    </div>
                    
                    <!--계정이 없으신가요?-->
                    <div class="login__register">
                        <span>계정이 없으신가요?</span>
                        <a th:href="@{/auth/signup}">가입하기</a>
                    </div>
                    <!--계정이 없으신가요?end-->
                </article>
            </section>
        </main>
    </div>
</body>
<div th:replace="~{layout/footer :: footer}"></div>
</html>

 

1. 절대 경로로 연 signin.html

2. 서버 구동 시켰을 때 나오는 화면, 콘솔

"C:\Program Files\Java\jdk1.8.0_333\bin\java.exe" "-javaagent:C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.3.2\lib\idea_rt.jar=57768:C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.3.2\bin" -Dfile.encoding=UTF-8 -classpath "C:\Program Files\Java\jdk1.8.0_333\jre\lib\charsets.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\deploy.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\access-bridge-64.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\cldrdata.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\dnsns.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\jaccess.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\jfxrt.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\localedata.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\nashorn.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\sunec.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\sunjce_provider.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\sunmscapi.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\sunpkcs11.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\ext\zipfs.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\javaws.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\jce.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\jfr.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\jfxswt.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\jsse.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\management-agent.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\plugin.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\resources.jar;C:\Program Files\Java\jdk1.8.0_333\jre\lib\rt.jar;C:\Users\dbwjd\Desktop\편하게 테스트용\jsp를타임리프로\thymeleaf\out\production\classes;C:\Users\dbwjd\Desktop\편하게 테스트용\jsp를타임리프로\thymeleaf\out\production\resources;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter-thymeleaf\2.6.10\a7b7d4d15a174fe3891ce5b13df128e1de6ba9d6\spring-boot-starter-thymeleaf-2.6.10.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter-web\2.6.10\ca6ff4f62825bc8f31811b18fb33c5452da43b81\spring-boot-starter-web-2.6.10.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter-security\2.6.10\d766c74b5cc4f3bc75b63e435acd8c2761a564ed\spring-boot-starter-security-2.6.10.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\mysql\mysql-connector-java\8.0.29\16bfffda393ac4fe56f0985f1f035b37d3fc48f\mysql-connector-java-8.0.29.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter-log4j2\2.6.10\b0aa7e4b11bb73b38a9e3a453098a1e48ebbde82\spring-boot-starter-log4j2-2.6.10.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter\2.6.10\17180490bcfd4a490ac1a48b27eff4fb8655ec1c\spring-boot-starter-2.6.10.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.thymeleaf\thymeleaf-spring5\3.0.15.RELEASE\7170e1bcd1588d38c139f7048ebcc262676441c3\thymeleaf-spring5-3.0.15.RELEASE.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.thymeleaf.extras\thymeleaf-extras-java8time\3.0.4.RELEASE\36e7175ddce36c486fff4578b5af7bb32f54f5df\thymeleaf-extras-java8time-3.0.4.RELEASE.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter-json\2.6.10\10f7730f605d45366420ad7bf575105a1761550d\spring-boot-starter-json-2.6.10.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter-tomcat\2.6.10\80df6d17fb599040b84fcab33702ec31eba1a165\spring-boot-starter-tomcat-2.6.10.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework\spring-webmvc\5.3.22\519d86b7ac9b8b6bb54739eb4eb73dc13a263b28\spring-webmvc-5.3.22.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework\spring-web\5.3.22\fdab9b8d8df2e6a8fb90f2481c361bcf2c129567\spring-web-5.3.22.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.security\spring-security-web\5.6.6\d2a50959c71b87a18b0256c7381db9bdd9c7468c\spring-security-web-5.6.6.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.security\spring-security-config\5.6.6\3049cbe8b6a2fc724d2a49f2010437b525f0ca08\spring-security-config-5.6.6.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework\spring-aop\5.3.22\2f9f00efbff8432f145ccffeb93e6a1819bac362\spring-aop-5.3.22.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.apache.logging.log4j\log4j-slf4j-impl\2.17.2\183f7c95fc981f3e97d008b363341343508848e\log4j-slf4j-impl-2.17.2.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.apache.logging.log4j\log4j-core\2.17.2\fa43ba4467f5300b16d1e0742934149bfc5ac564\log4j-core-2.17.2.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.apache.logging.log4j\log4j-jul\2.17.2\6a479ffc13d5f0ca3df8117ed57419fc5d06de7f\log4j-jul-2.17.2.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.slf4j\jul-to-slf4j\1.7.36\ed46d81cef9c412a88caef405b58f93a678ff2ca\jul-to-slf4j-1.7.36.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-autoconfigure\2.6.10\feeb8e959a35b41650e7fb4040b4f86e451f95c1\spring-boot-autoconfigure-2.6.10.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot\2.6.10\de9f4e24f18907e1d566ff0d96148c3ae1142e68\spring-boot-2.6.10.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter-logging\2.6.10\145051d408cb255a81f599f52cc4da29b39d36f9\spring-boot-starter-logging-2.6.10.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\jakarta.annotation\jakarta.annotation-api\1.3.5\59eb84ee0d616332ff44aba065f3888cf002cd2d\jakarta.annotation-api-1.3.5.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework\spring-core\5.3.22\661fc01832716c7eedebf995c6841b2f7117c63d\spring-core-5.3.22.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.yaml\snakeyaml\1.29\6d0cdafb2010f1297e574656551d7145240f6e25\snakeyaml-1.29.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.thymeleaf\thymeleaf\3.0.15.RELEASE\13e3296a03d8a597b734d832ed8656139bf9cdd8\thymeleaf-3.0.15.RELEASE.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.slf4j\slf4j-api\1.7.36\6c62681a2f655b49963a5983b8b0950a6120ae14\slf4j-api-1.7.36.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.datatype\jackson-datatype-jsr310\2.13.3\ad2f4c61aeb9e2a8bb5e4a3ed782cfddec52d972\jackson-datatype-jsr310-2.13.3.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.module\jackson-module-parameter-names\2.13.3\f71c4ecc1a403787c963f68bc619b78ce1d2687b\jackson-module-parameter-names-2.13.3.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.datatype\jackson-datatype-jdk8\2.13.3\d4884595d5aab5babdb00ddbd693b8fd36b5ec3c\jackson-datatype-jdk8-2.13.3.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.core\jackson-databind\2.13.3\56deb9ea2c93a7a556b3afbedd616d342963464e\jackson-databind-2.13.3.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.apache.tomcat.embed\tomcat-embed-websocket\9.0.65\bd70dfeb39cc83c6934be24fa377b21e541dbe76\tomcat-embed-websocket-9.0.65.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.apache.tomcat.embed\tomcat-embed-core\9.0.65\a24c5f379b2ec343a167a83332b75c37f26b2ae7\tomcat-embed-core-9.0.65.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.apache.tomcat.embed\tomcat-embed-el\9.0.65\d278157387e59a5f9b48091dcada22b7c74aed00\tomcat-embed-el-9.0.65.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework\spring-context\5.3.22\fdd59bb4795c7a399e95ec4a5c8b91103e3189fd\spring-context-5.3.22.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework\spring-beans\5.3.22\866c2022b5fef05b1702f4a07cfa5598660ce08a\spring-beans-5.3.22.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework\spring-expression\5.3.22\c056f9e9994b18c95deead695f9471952d1f21d1\spring-expression-5.3.22.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.security\spring-security-core\5.6.6\700dd9a8b103c6a243a0df38eba3e49ec27dd927\spring-security-core-5.6.6.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.apache.logging.log4j\log4j-api\2.17.2\f42d6afa111b4dec5d2aea0fe2197240749a4ea6\log4j-api-2.17.2.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework\spring-jcl\5.3.22\811ace5e5eb379654ed96fd7844809db51af74a5\spring-jcl-5.3.22.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.attoparser\attoparser\2.0.5.RELEASE\a93ad36df9560de3a5312c1d14f69d938099fa64\attoparser-2.0.5.RELEASE.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.unbescape\unbescape\1.1.6.RELEASE\7b90360afb2b860e09e8347112800d12c12b2a13\unbescape-1.1.6.RELEASE.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.core\jackson-annotations\2.13.3\7198b3aac15285a49e218e08441c5f70af00fc51\jackson-annotations-2.13.3.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.core\jackson-core\2.13.3\a27014716e4421684416e5fa83d896ddb87002da\jackson-core-2.13.3.jar;C:\Users\dbwjd\.gradle\caches\modules-2\files-2.1\org.springframework.security\spring-security-crypto\5.6.6\1fd0dbfcdb031a097710c4450e5c545f8fb154bf\spring-security-crypto-5.6.6.jar" ex.thymeleaf.ThymeleafApplication

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::               (v2.6.10)

2022-08-18 23:51:50.243  INFO 13868 --- [           main] e.t.ThymeleafApplication                 : Starting ThymeleafApplication using Java 1.8.0_333 on DESKTOP-H6C6G5D with PID 13868 (C:\Users\dbwjd\Desktop\편하게 테스트용\jsp를타임리프로\thymeleaf\out\production\classes started by dbwjd in C:\Users\dbwjd\Desktop\편하게 테스트용\jsp를타임리프로\thymeleaf)
2022-08-18 23:51:50.259  INFO 13868 --- [           main] e.t.ThymeleafApplication                 : No active profile set, falling back to 1 default profile: "default"
2022-08-18 23:51:52.755  INFO 13868 --- [           main] o.s.b.w.e.t.TomcatWebServer              : Tomcat initialized with port(s): 8080 (http)
2022-08-18 23:51:52.776  INFO 13868 --- [           main] o.a.c.c.StandardService                  : Starting service [Tomcat]
2022-08-18 23:51:52.777  INFO 13868 --- [           main] o.a.c.c.StandardEngine                   : Starting Servlet engine: [Apache Tomcat/9.0.65]
2022-08-18 23:51:53.025  INFO 13868 --- [           main] o.a.c.c.C.[.[.[/]                        : Initializing Spring embedded WebApplicationContext
2022-08-18 23:51:53.025  INFO 13868 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 2672 ms
2022-08-18 23:51:53.313  WARN 13868 --- [           main] .s.s.UserDetailsServiceAutoConfiguration : 

Using generated security password: 883c43da-de4b-4d13-8951-8c3c2b83961e

This generated password is for development use only. Your security configuration must be updated before running your application in production.

2022-08-18 23:51:53.421  INFO 13868 --- [           main] o.s.s.w.DefaultSecurityFilterChain       : Will secure any request with [org.springframework.security.web.context.request.async.WebAsyncManagerIntegrationFilter@149c3204, org.springframework.security.web.context.SecurityContextPersistenceFilter@12abdfb, org.springframework.security.web.header.HeaderWriterFilter@572e6fd9, org.springframework.security.web.csrf.CsrfFilter@459cfcca, org.springframework.security.web.authentication.logout.LogoutFilter@1c6c6f24, org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter@ad9e63e, org.springframework.security.web.savedrequest.RequestCacheAwareFilter@6bbe50c9, org.springframework.security.web.servletapi.SecurityContextHolderAwareRequestFilter@8a98f38, org.springframework.security.web.authentication.AnonymousAuthenticationFilter@64f16277, org.springframework.security.web.session.SessionManagementFilter@58b71ceb, org.springframework.security.web.access.ExceptionTranslationFilter@2b5183ec, org.springframework.security.web.access.intercept.FilterSecurityInterceptor@1e141e42]
2022-08-18 23:51:53.645  INFO 13868 --- [           main] o.s.b.a.w.s.WelcomePageHandlerMapping    : Adding welcome page: class path resource [static/index.html]
2022-08-18 23:51:53.832  INFO 13868 --- [           main] o.s.b.w.e.t.TomcatWebServer              : Tomcat started on port(s): 8080 (http) with context path ''
2022-08-18 23:51:53.844  INFO 13868 --- [           main] e.t.ThymeleafApplication                 : Started ThymeleafApplication in 4.527 seconds (JVM running for 5.851)
2022-08-18 23:52:15.777  INFO 13868 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/]                        : Initializing Spring DispatcherServlet 'dispatcherServlet'
2022-08-18 23:52:15.777  INFO 13868 --- [nio-8080-exec-1] o.s.w.s.DispatcherServlet                : Initializing Servlet 'dispatcherServlet'
2022-08-18 23:52:15.779  INFO 13868 --- [nio-8080-exec-1] o.s.w.s.DispatcherServlet                : Completed initialization in 2 ms

 

답변 1

0

안녕하세요. hwanghsp님, 공식 서포터즈 David입니다.

요청 매핑이 제대로 안 된 것 같습니다.

/auth/signin 요청을 처리할 수 있는 컨트롤러 매핑이 있는지 확인해주세요.

감사합니다.

작성자 없음

작성자 정보가 삭제된 글입니다.

질문하기