2021.07.07 (Wed.) <input과 고차함수 어딘가>

1. input의 다양한 타입

• HTML의 input은 다양한 타입을 가지고 있다. 잘 사용하면 디자인적으로 혹은 기능적으로 매우 좋다.
  1. <input type="password"> : 비밀번호 창이다. 문자가 ●이나 *로 입력되기 때문에 무엇을 입력하는지 입력하는 사람 빼고는 모른다.
  2. <input type="submit"> : 입력된 창에 있는 데이터를 전송한다. 이때, 버튼은 자동으로 생긴다.
     •  
  3. <input type="radio"> " 라디오 버튼을 만든다.
     • 선택하세요.
     • 이것도 됩니다.
  4. <input type="checkbox"> : 체크박스를 만든다.
     
     • 체크할 수 있어요.
     • 여기도 역시 됩니다.
  5. <input type="date"> : 날짜를 선택해 표시할 수 있다.
  6. <input type="color"> : 색상 선택기가 표시된다.
     • 누르면 색상을 선택 할 수 있어요.
  7. <input type="range"> : 슬라이드 컨트롤이 표시된다.
     • 조절 할 수 있어요.
  8. <input type="month"> : 월과 연도를 선택할 수 있다.
     •   date와 다릅니다! 일은 선택할 수 없어요.
  9. <input type="week"> : 주와 연도를 선택할 수 있다.
     • 마찬가지로 date와 month와 달라요.
  10. <input type="time"> : 시간을 선택할 수 있다.
  11. <input type="email"> : 이메일을 적을 수 있다. 자동적으로 유효성 검사가 된다.
      • 보기에는 그냥 텍스트 박스이지만 이메일 형식을 맞춰야 해요.
  12. <input type="tel"> :  전화번호를 입력할 수 있다.
      • 이메일과 마찬가지입니다.
  13. <input type="url"> : url형식을 입력할 수 있다.
      • 또 이메일, 전화번호와 마찬가지예요.

2. Function Composition (함수의 조합)

• 함수를 합쳐서 다시 새로운 함수를 만든다.

function add5(num) {
	return num + 5;
}
function add3(num) {
	return num + 3;

add3(add5(0)); // 8

• 위처럼, 함수 두 개를 결합했다. 안쪽의 함수가 먼저 실행된다.
• 이처럼, 함수를 한 가지 기능만을 구연되게 해 놓으면 나중에 유지보수와 재활용에 매우 뛰어나다. 정확히 하나의 함수가 하나의 일을 하고 있고, 어떤 일을 하는지 찾기도 쉽기 때문이다.

3. 커링

• 함수를 사용할 때, 여러 개의 인자를 한번에 변수로 넣어서 호출하는것이 아니라,( Ex : function add (num1, num2, num3) ) 모든 인자를 분리하여 여러개의 함수로 만들어 사용하는 것이다. ( Ex : function add(num1)(num2)(num3) )

function sum(num1) {
	return function(num2) {
	return num1 + num2;
    }
}

sum(3)(5); // 8

let sum10 = sum(10);
sum10(20); // 30
sum10(40); // 50

• 위에서 보이듯이 num1의 값을 결정해 놓고, num2 만 바꿔줌으로써, 여러 가지 결과를 원하는 대로 얻을 수 있다.
• 클로저와 마찬가지로 재활용이 매우 용의 하다.