New 병아리 개발자

# CSS 색상표 참고 사이트

• https://at-corner.tistory.com/17

# input file타입 확장자 제한하기

## 엑셀 파일 ( .xlsx)

• <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

## 텍스트 파일 ( .txt)

• <input type="file" accept="text/plain" />

## 이미지 파일 ( .png/ .jpg/ etc)

• <input type="file" accept="image/*" />

## HTML 파일 ( .htm/ .html)

• <input type="file" accept="text/html" />

## 비디오 파일 ( .avi/ .mpg/ .mpeg/ .mp4)

• <input type="file" accept="video/*" />

## 오디오 파일 ( .mp3/ .wav/ etc)

• <input type="file" accept="audio/*" />

## PDF 파일

• <input type="file" accept=".pdf" />

# textarea

• input 타입 중 text는 한 줄의 텍스트를 입력받을 때 사용한다.
• input 타입 중 textarea는 여러 줄의 문장을 입력받을 때 사용한다.
• textarea의 경우 기본적으로 박스 사이즈를 사용자가 임의로 변경 가능하다.

<textarea name="" id="" cols="30" rows="10"></textarea>

## textarea 속성

• rows : 넓이 설정 시 사용
• cols : 높이 설정 시 사용
• resize : textarea의 크기 조절 여부 결정 시  사용
• resize : none 사용자가 임의로 변경 불가능
• resize : both 사용자 변경이 모두 가능
• resize : horizontal 좌우만 변경 가능
• resize : vertical 상하만 변경 가능

# lodash 라이브러리

• lodash는 javascript 유틸리티 라이브러리이다.
• Debounce는 lodash에 있는 기능 중 하나이다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

## Debounce

• 특정 함수가 반복 실행 될 경우 사용, 지연시간을 설정하여 반복된 호출을 1번 호출하도록 제어해준다.
• 주로 회원가입 폼에서 많이사용, 회원가입 시 아이디 등 중복체크 기능을 사용할 경우 값이 매번 입력될 때마다 중복체크가 되어 서버 낭비가 발생하는 것을 방지해주기 위해 사용한다.

_.debounce(콜백함수, 시간)

## 예제

• 아이디 중복 체크 기능  Debounce 이용한 딜레이 설정
• 설정 후 확인 시 F12 > Network > XHR 에서 입력하면서 확인 가능

<div class="form-row">
  <div class="label">아이디</div>
  <div class="input">
    <input onkeyup="JoinForm__checkLoginIdDup(this);" type="text" name="loginId" maxlength="20" placeholder="회원 id 입력">
    <div class="message-msg"></div>
  </div>
</div>

<script>

	<!-- 회원가입 아이디 중복 체크 -->
	function JoinForm__checkLoginIdDup(input) {
		var form = input.form;

		form.loginId.value = form.loginId.value.trim();

		if (form.loginId.value.length == 0) {
			return;
		}

		$.get('getLoginIdDup', {
			loginId : form.loginId.value
		}, function(data) {
			var $message = $(form.loginId).next();

			// resultCode : 중복 체크 값 S- 중복 아님 / F- 중복
			if (data.resultCode.substr(0, 2) == 'S-') {
				$message.empty().append(
						'<div style="color:green;">' + data.msg + '</div>');
				JoinForm__validLoginId = data.loginId;
			} else {
				$message.empty().append(
						'<div style="color:red;">' + data.msg + '</div>');
				JoinForm__validLoginId = '';
			}
		}, 'json');
	}
    
    <!-- lodash 라이브러리 (debounce) 를 이용한 딜레이(1초) 설정  -->
	JoinForm__checkLoginIdDup = _.debounce(JoinForm__checkLoginIdDup, 1000);

</script>