CodeHoon

안녕하세요 상훈입니다.

Spring, MyBatis 에서 여러 가지의 쿼리를 만들어놓고 부품처럼 이거 쓰고 저거 쓰고 할 때 사용하는 방법입니다.

1. 메인 기능 설정

<select id="selectListPage" 
    parameterType="a.b.c.ABCDTO"			
    resultType="a.b.c.ABCDTO"
    >			
        <include refid="COMMON.pagingPreSQL" />
        <include refid="listPage" />
        <include refid="COMMON.pagingPostSQL" />
</select>

여기서 주의할 점!

include refid = "" 작성시,

1. 같은 파일 내의 쿼리를 작성하면 listPage 와 같이 작성.
2. 다른 파일 내의 쿼리를 가져다가 사용하려면, 해당 mapper 의 namespace 를 체이닝으로 작성해주세요. COMMON.pagingPreSQL 와 같이 작성

2. 각 기능 설정

/*기본 목록 조회 */	
<sql id="listAdmUserBas"	>			
    SELECT USER_ID	/* 사용자아이디 */
         , DESIG_IP	/* 지정IP주소 */
         , USER_PWD	/* 사용자비밀번호 */
      FROM 테이블명	
     WHERE 1=1	
    <if test='userId != ""'> <!-- 사용자 아이디가 있을 경우 -->
        AND USER_ID LIKE CONCAT('%',#{userId},'%')
    </if>
    <if test='desigIp != ""'> <!-- 지정 아이피가 있을 경우 -->
        AND DESIG_IP LIKE CONCAT('%',#{desigIp},'%')
    </if>
    <if test='brofcCd != ""'> <!-- 코드가 있을 경우 -->
        AND BROFC_CD LIKE CONCAT('%',#{brofcCd},'%')
    </if>
</sql>

각 기능을 담당하는 쿼리는 메인 쿼리로직과는 다른점이 있는데요,

1. 각 기능에 대한 쿼리는 모두 <sql> 태그로 설정
2. parameterType, resultType 을 작성하지 않습니다.

이상입니다.

도움이 되셨다면, 여유롭게 커피 한 잔 사주시면 감사합니다~

Buy me a Coffee ☕

querystring을 받아왔는데 JavaScript get 방식으로 값을 받아오는 방법

// Query String 데이터 출력
function searchParam(key) { // key를 매개변수로 받고, value를 리턴
		return new URLSearchParams(location.search).get(key)
}

함수로 생성해놓고 사용하는 것이 편합니다.

 // url =  www.example.com?page=12
 const page = searchParam('page')
 console.log(page)       // 12 출력

key: value 형태이다보니, key 값을 매개변수로 넘겨주어야 value가 출력됩니다.

자바스크립트로 css 를 제어할 수 있습니다.

보고있는 화면의 크기에 따라 클래스를 추가하고, 제거할 수 있듯이 말이죠. 

대신 하나하나 클래스를 지정하거나 스타일을 지정해주어야합니다.

css 로는 @media ( width: 1000px ) { }  이런 식으로 작성합니다.

JavaScript 로는 matchMedia(`(max-width: 1000px)`) 메서드를 사용합니다.

■ 기본

<script>
	// 화면인식 992px 사이즈 조절
	const mediaViewContent = window.matchMedia(`(max-width: 992px)`)	// 1
	console.log(mediaViewContent)
    
    const viewChangeHandler = (mediaViewContent) => {  					// 3
    	//이곳에 원하는 이벤트 설정
    }
    
    mediaViewContent.addEventListener("change", viewChangeHandler)		// 2
</script>

이렇게 matchMedia( ) 메서드를 통해 화면이 변하는 것을 인지할 수 있는데, 해당 내용을 콘솔에 입력해보았습니다.

콘솔창에 출력된 내용을 확인, max-width:992px 기준으로 작성이 되어있는 것을 확인할 수 있습니다.

■ 응용

MediaQuery를 다루려면 MediaQuery 내 match라는 녀석을 활용하면 편하다.

992px 이상이 되면 false, 미만이 되면 true가 되는데, 이를 이용하도록 한다. 
[기준 이상: false, 기준 미만: true ]

<script>
	if(mediaViewContent.matches === true){
    	// 992px보다 작아질 때 
	} else {
    	// 992px 보다 커질 때 (원상복구)
	}
</script>

이런식으로 사용 하면 되는데,

각각의 내용 안에 id.style.any = '' 를 지정해주면 된다.

■ 응용 - 예시)

<script>
const mediaViewContent = window.matchMedia(`(max-width: 992px)`)

const viewChangeHandler = (mediaViewContent) => {
    const moveToQnA = document.querySelector('#moveToQnA')
    const flexControlPannel = document.querySelector('#flexControlPannel')
    const moveToStatisticsList = document.querySelector('#moveToStatisticsList')

    if(mediaViewContent.matches === true){
        console.log('shrink')
        moveToQnA.classList.remove("col-5")
        moveToQnA.classList.remove("ml-5")
        moveToQnA.classList.add("mb-5")
        moveToQnA.style.width="100%"
        flexControlPannel.classList.remove("d-flex")
        flexControlPannel.classList.remove("justify-content-between")
        flexControlPannel.style.height="100%"
        moveToStatisticsList.classList.remove("col-5")
        moveToStatisticsList.style.width="100%"

    } else {
        console.log('release')
        moveToQnA.classList.add("col-5")
        moveToQnA.classList.add("ml-5")
        moveToQnA.classList.remove("mb-5")
        moveToQnA.style.width="48%"
        flexControlPannel.classList.add("d-flex")
        flexControlPannel.classList.add("justify-content-between")
        flexControlPannel.style.height="400px"
        moveToStatisticsList.classList.add("col-5")

    }
    
}
mediaViewContent.addEventListener("change", viewChangeHandler)
</script>

이상입니다.