파이널 프로젝트 Tip 메모해놓은 것들

 

 

 

프로젝트 진행하면서 헷갈렸던 것과

몰라서 검색해본 것들 기록

 

 

 

---

 

# 레이아웃은 display:grid; 활용

• 그리드 템플릿 칼럼 - 가로 수  [ 1fr , repeat(), % , px ] 다 가능
• 그리드 템플릿 로우 - 세로 수
• grid column / grid row : span으로 병합 가능
• align items - 위아래 기준 가운데 정렬
• justify items - 좌우 기준 가운데 정렬
• space items - 한 번에 적용 
• 글자 정렬 잘 안될 때 감싸고 있는 거에 display:grid / align-item : center 해주었음

 

 

---

 

# 구조 잡기 

• 루트 컨텍스트에 - 디비 id/pwd 설정함 / 매퍼.xml파일, 설정.xml파일 연결시켜 줌
• service와 dao는 인터페이스로 만들고 - 구현체(클래스)로 구현

 

 

---

 

# 경로 변수 

• /${} 로 보내고
• /{} 로 받아서 @PathVariable 해서 지정해주어야 함

 

 

 

---

 

# input name 지정 잘하기..

• input name ="title;" --- X ---세미클론 쓰지 않기
• input name ="title" --- OK

 

 

---

 

# JSTL 문자열 비교

• 띄어쓰기 주의..

 

 

 

 

---

 

• 1. 목록에 클릭이벤트를 걸어놓으니 하나만 적용되는 것 같습니다.
• >> querySelectorAll 로 가져오기.
• >>가져와서 for문으로 모든 요소 대상으로 돌려주기

 

• 2. div안에 텍스트를 가져오는 방법을 찾아보고 좀 해봤는데 안됩니다.
• >> innerText 

 

• 3. 클릭하면 체크박스에 체크가 되도록 하고 싶은데 여러 가지 글 보고 해 봤는데도 잘 안됩니다 ㅜㅜ
• >>checked = true;
  
  
  

 

 

 

---

 

# 쪽지 선택하면 하단에 세부 내용 표시되도록 작업

 

 

 

---

 

 

# JavaScript에서 JSTL 문법 사용하기

• 반대는 안됨. JS가 제일 늦게 실행됨.

 

 

---

 

 

# jstl 사용하여 - 해쉬맵에 있는 값 사용하는 법

• 해쉬 맵 담아 놓은 list에서 해쉬 맵 하나하나 가져오면 값 사용하는 법
• get.("KEY")
• 대문자로 똑같이 입력해야 받아와 짐. 주의

 

 

 

 

---

 

 

# <div> 화면에서 없애기 

 

 

 

---

 

 

# 자바스크립트 문자열 비교 - 

• == / === / 
• [ ! ]  느낌표로 문자열 비었는지 체크 가능

 

나의 로직 체크

• if - jpg 파일이면 src 바꿔주기
• else if - 파일 없으면 - 둘 다 비워주기
• else - jpg 파일 외 다른 파일이면 - 이름 보여주기 

 

 

 

 

---

 

 

 

# input 타입 파일 - 입력받을 파일 형식 지정

• accept = ".jpg, .png "

 

 

 

---

 

 

# Select - Option 에 이벤트 걸 때는 select 에다가 onchange 걸기

• select 태그에다가 - onchange 
• value 에 onchange X
• click X

 

 

 

 

 

---

 

 

 

# JS 함수 선언 방법

 

 

 

 

---

 

 

# JS 문자열 자르기

• substr()
• substring(0
• slice

 

 

 

 

---

 

 

# 체크박스 개수 출력

 

var checked_cnt = $('input[name="ck[]"]:checked').length;
console.log(checked_cnt);

 

 

---

 

 

# select - option  값 비교해서 selected 옵션 부여하기 

• selected -- 기본적으로 선택되는 옵션 지정하기

 

 

 

 

 

---

 

 

# 파싱 할 때는 변수로 넣어주어야 파싱 된다.

• 값 입력되는 상황에 이벤트 걸어주려면
• change 이벤트를 걸어주면 된다.
• 파싱 할 때는 변수로 넣어주어야 파싱 된다.

 

 

 

 

 

---

 

 

# 콤마 추가 / 콤마 삭제 함수 구현

 

<script>

  function getNumber(obj){
     var num01;
     var num02;
     num01 = obj.value;
     num02 = num01.replace(/\D/g,""); 
     num01 = setComma(num02);
     obj.value =  num01;

     $('#test').text(num01);
  }

  function setComma(n) {
     var reg = /(^[+-]?\d+)(\d{3})/;
     n += '';         
     while (reg.test(n)) {
        n = n.replace(reg, '$1' + ',' + '$2');
     }         
     return n;
  }

</script>

const numberStr = "123,456,789";

// 전체 콤마 제거
const number = numberStr.replace(/,/g, "");
document.write(number);

 

 

 

 

---

 

 

# input 태그 변경되기 전 원래 값 기억하기

• input 태그에 onfocus 속성 부여
• onfocus="this.oldvalue = this.value;"
• JS 쪽에서 .oldvalue로 호출하여 사용

 

 

 

 

---

 

 

# 동적 쿼리에서 or과 and 사용하기

• || 아님 && 아님

 

 

---

 

 

# js 현재 날짜 출력

 

let today = new Date();
let year = today.getFullYear();
let month = ('0' + (today.getMonth() + 1)).slice(-2);
let day = ('0' + today.getDate()).slice(-2);
const dateString = year + '-' + month  + '-' + day;

 

== 2022. 11. 09.

 

 

---

 

 

# 지정 글자 길이 수 넘어가면 ... 으로 표시되도록 하기 

 

 

 

 

 

let titleTrunc = document.querySelectorAll('.titleTrunc');
		
    for(let i=0; i<titleTrunc.length; i++){

        const titleOrigin = titleTrunc[i].innerText;
        titleTrunc[i].innerText = truncate(titleOrigin,30); 

    }
    
    	function truncate(str, maxlength) {
    	  return (str.length > maxlength) ?
    	    str.slice(0, maxlength - 1) + '…' : str;
    	}

 

 

---

 

 

# oracle db 반복문 사용해서 insert 하기

• BEGIN 
• FOR
• INSERT 문
• END LOOP;
• END;
• /

 

마지막 닫는 거 잘해주기...

 

 

 

BEGIN

    FOR i IN 1..50 LOOP

        INSERT INTO BOARD_INQUIRY(TITLE, QUESTION, REG_ID, REG_DT) 

        VALUES(CONCAT('1:1 문의 테스트 게시물',i),CONCAT('1:1 문의 질문사항',i),'TEST', CURRENT_TIMESTAMP);

    END LOOP;

END;

/

 

 

---

 

 

# 세션에 담겨있는 메시지 1번만 알람띄우고 안뜨게 해주기