TIL : 71번째- 230317 [3-2-금]

배움 __IL/TIL 1기

TIL : 71번째- 230317 [3-2-금]

Mo_bi!e 2023. 3. 17. 19:18

※ Keep in mind

본 내용은 웹개발과정의 강의 중 내용을 복습을 위해서 메모한 것에 불과한 것입니다. 이러한 연유로 강의내용을 오인한 나머지 오기재 및 불기재가 있을 수 있으니 '참고'만 해주시길 바랍니다. 저의 경우에도 본 내용을 단순하 읽은 것이 결코 저의 것이라고 생각하지 않습니다. 본 내용은 복습를 위한 초기 내지 중간 과정에 불과한 것이고, 이후에 내용을 보충 후 인출 및 설명하기 과정이 있어야 비로소 복습의 단추가 어느정도 마무리 되어간다고 볼 수 있습니다.

따라서 당초에 본 내용은 비공개였습니다. 그럼에도 불구하고 본 내용을 공개한 점은 함께 공부하는 동료들과 나눔을 바탕으로 배움과 성장의 공진화라는 소기의 목적을 달성에 어느정도 도움이 될수 있기 때문이라고 생각합니다.

I. 타임리프

1. 들어가며

(1) Fragment

어제 합치는 과정에서

절대경로를 표현하고자 하면 틸드 ~{} 를 이용해!

git에서 cd \ 하면 루트로 가 / cd ~ 하면 홈디렉토리로 가

웹에서 홈디렉토리는 곧 루트디렉토리야!

inc안에 footer라는 html파일을 지목한거야 (.html 생략)

이 경우 replace 쓸수있는데 insert와 차이는 뭘까?

insert를 쓴다면 div안쪽으로 들어가 footer로 감싸는 'div가 존재'해

replace 로 하면 이 div태그를 얘로 '대체'해 버려 div 같은 껍대기가 불필요하다면 껍대기 입힐 필요가 없어! (구조중첩을 막기위해서)

첫번째 처럼 파일명을 지정해서 파일 만 딱 가져올수도 있다

추가적으로 :: 해서 셀렉터나 프래그먼트 가져올 수있어

#footer 에서 #은 id영역을 replace하겠다는 말이야!

id라던지 클래스라던지로 CSS셀렉터로 활용이 가능하지만

그 외 타임리프로 할수있는 명명 방법이 있는데 이 div이름은 part로도 가능하게도 할수있어!

이경우 <th>단독 태그는 아니고 div에 넣어서 해야해! 속성으로서!

아래 속성을 보면 타임리프를 자유자재로 이용이 가능해져!

fragment 하면 list에서 불러와도 index가 가능해

insert와 다르게 replace하면 태그잡히는게 달라

list.html

<html lang="en" 
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://ultrq.net.nz/thymeleaf/layout"
    layout:decorate="inc/layout"
    >

위처럼 가장아래 decoreate..... 을 해준다

그렇게하면 layout.html 에서 세개 단계(header, main, footer)를 거치면서 출력이 된다.

<body>
	
	<!-- haeder부분 -->
	<!-- 리플레이스 방법 / 인서트 방법  -->
	
	<!--속성 기반이라 무조건 태그를 써서 해야해!  
	그러다보니 구조가 중첩이 돼
	이런경우를 대비하기 위해서 replace를 쓸 수있어-->
	<!-- <div th:replace="">
	
	</div> -->
	<div th:replace="~{inc/header}"></div>
	
	<!-- ----------------------------------------- -->
	<!-- main부분 -->
	<div layout:fragment="main"></div>
	
	<!-- ----------------------------------------- -->
	<!-- footer부분 -->
	<div th:replace="~{inc/footer}"></div>
	<!-- ----------------------------------------- -->
	

</body>

6) layout:decorate 설명

layout:decorate(장식) VS layout:fragment(파편)

decorate한다는것은 바깥쪽을 꾸며주는거야(곧 layout), 그 안 메인태그는 알맹(본질)이야

내 바깥을 책임지는게 누구야!!?

layout.html에다가 알맹이 해주고, 바깥을 header, footer 넣어주는거야

(2) detail.html 실습

그렇다면 detail.html 의 레이아웃을 잡아보자

우선 controller 에 가서 return 부분을 수정한다

    @Controller 
    @RequestMapping("/menu")
    public class MenuController {


        @Autowired
        private MenuService service;


	@RequestMapping("detail")
	public String detail() {
		return "menu/detail";
	}
}

이후 detail.html 도 마찬가지로 layout decorate를 말해주고,

header와 footer를 제거한다 메인부분은 알맹(본질)이라고 선언해주는

<main class="main-padding-none" layout:fragment="main">

을 넣어준다

상술한바와 마찬가지로 이 알맹이를 layout.html 은 그틀에다가 그대로 넣을수 있다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
		xmlns:layout="http://ultrq.net.nz/thymeleaf/layout">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link href="../css/reset.css" type="text/css" rel="stylesheet" >
    <link href="../css/style.css" type="text/css" rel="stylesheet" >
    <link href="../css/layout.css" type="text/css" rel="stylesheet" >
    <link href="../css/header.css" type="text/css" rel="stylesheet" >
    <link href="../css/footer.css" type="text/css" rel="stylesheet" >
    <link href="../css/component/aside.css" type="text/css" rel="stylesheet" >
    <link href="../css/component/cart-section.css" type="text/css" rel="stylesheet" >
    <link href="../css/component/menu-category.css" type="text/css" rel="stylesheet" >
    <link href="../css/component/menu-section.css" type="text/css" rel="stylesheet" >
    <link href="../css/component/search-header.css" type="text/css" rel="stylesheet" >

    <link href="../css/component/menu-detail.css" type="text/css" rel="stylesheet" >
    <link href="../css/component/nutrition-info.css" type="text/css" rel="stylesheet" >

    <link href="../css/component.css" type="text/css" rel="stylesheet" >
    <link href="../css/buttons.css" type="text/css" rel="stylesheet" >
    <link href="../css/icon.css" type="text/css" rel="stylesheet" >
    <link href="../css/deco.css" type="text/css" rel="stylesheet" >

    <link href="../css/utils.css" type="text/css" rel="stylesheet" >
    <!--  -->    
</head>


<body>
	
	<!-- haeder부분 -->
	<!-- 리플레이스 방법 / 인서트 방법  -->
	
	<!--속성 기반이라 무조건 태그를 써서 해야해!  
	그러다보니 구조가 중첩이 돼
	이런경우를 대비하기 위해서 replace를 쓸 수있어-->
	<!-- <div th:replace="">
	
	</div> -->
	<div th:replace="~{inc/header}"></div>
	
	<!-- ----------------------------------------- -->
	<!-- main부분 -->
	<div layout:fragment="main"></div>
	
	<!-- ----------------------------------------- -->
	<!-- footer부분 -->
	<div th:replace="~{inc/footer}"></div>
	<!-- ----------------------------------------- -->
	

</body>
</html>

2. 컨트롤러와 함께 다루기

(1) 초기

이제 레이아웃 빼고 service 해보자

즉 화면

(2) 최초 서비스 세팅

Mysql에서 우선 view 테이블을 만들자

만들어진 view테이블을 위해서 entity에다가 파일을 추가한다

이후 service 인터페이스를 수정하고,

그에 따라서 구현체의 값들을 세팅해준다.

repositoy 인터페이스를 수정하고, 이에대한 구현체은 mapper를 수정해준다.

jUnit test를 한다

(3) 반복적인거 반복해보기

타임리프 장점이 원본손상없이인데 손대야해

list.html에 메뉴가 있는 목록들을 지우는거야

1. 보충

오늘의문제

1) sql 신텍스 에러

마이바티스의 mapper파일에서 문제가 있었다

 <select id="findviewAll" resultMap="menuViewResultMap"> 
  <!-- resultType이 무엇이냐 modle을 넣어주자 -->
	   	select *
	  	from menu_view
	  	<trim prefix="WHERE" prefixOverrides="AND |OR ">
	  	
	  		<if test="query != null">
	  		name like '%${query}%'
	  		</if>
	  		
			<if test="price != null">	  		
	  		and price > #{price}
	  		</if>
	  		
			<if test="categoryId != null">	
	  		and category_id=#{categoryId}
	  		</if>
	  		
 		</trim>
  		<if test="orderField != null">
		order by ${orderField} ${orderDir}
		</if>
		<if test="size != null">
		limit #{size} offset #{offset}
		</if>
  </select>

처음에는 category_id 가 아니라 categoryId 였고 그 결과 Mysql의 syntax error 가 발생하였다.

Mysql은 snakeCase (언더바와 소문자)인데, mapper에서는 camel case였다.

하지만 당초에 나는 이런 오류가 발생하지안았다

왜냐하면 Junit에서 해당 문제가 발생한 부분이 null이 었기 때문에 오류를 만날 여지가 없엇다

이후 null이 아니게 즉 category_id 부분에다가 값을 넣은 결과 이 오류가 발생했다

적극적으로 오류를 해곃해주면 나도 이러한 해결을 배우면서 다음에 실수를 하지않을 수 있다는 점에서 진일보한것에 의의가 있다고 볼 수있다.

2) 주입 오토와이어드 (menuservice 의 service)

나의 경우 컨트롤러를 다 했지만 @autowired 로 의존성 주입을 안해서 오류가 발생하였다.

사실 아직 @autowired를 해서 어디서 어떻게 의존성을 주입하는지에 대한 공부가 필요하다.

2. 회고

1) 무언가 수업을 보고 따라했지만 이렇게 하면 실제로 퍼블리싱한것을 올릴수있겠다고 생각이든다.

어서 해보고싶다. 그런데 부족한건 시간같다.

'배움 __IL > TIL 1기' 카테고리의 다른 글

TIL : 73번째- 230321 [3-3-화] (0)	2023.03.21
TIL : 72번째- 230320 [3-3-월] (0)	2023.03.21
TIL : 70번째- 230316 [3-2-목] (0)	2023.03.16
TIL : 69번째- 230315 [3-2-수] (0)	2023.03.15
TIL : 68번째- 230314 [3-2-화] (0)	2023.03.14

현재글TIL : 71번째- 230317 [3-2-금]

모-코드

Today :
Yesterday :

모-코드