2024.02.16 TIL #exportVSexportDefault #inputType="number" #substring()VSslice()

>  export 와 export default의 차이점

 

- 원래는 막연하게 외부에서 import 할 때 { } 중괄호의 유무라고 생각했다.

그럼 왜 export는 중괄호로 import 하고, export default는 중괄호가 없이 import 하는가?

 

- export default는 하나의 컴포넌트에서 한번만 시행될 수 있다. 즉, 그 컴포넌트 잡채를 export 하는 것이다.

=> 그렇기에 export default로 내보낸 값은 외부에서 import 할 때 중괄호 없이도 그 잡채를 import 해올 수 있는 것이다.

=> 또 그렇기에 외부에서 import 할 때 이름을 내맘대로 지어서 import 해와도 상관없다. 왜?
     내가 뭐라고 칭하면서 import 해와도 어차피 그 컴포넌트에서 export 하는 건 그 컴포넌트 하나니깐. 

 

> input 태그의 type="number"의 의미

- 별 생각 없이 input 태그를 쓸 때 type="password / email / text / number" 을 써왔다.

- 그 의미를 모르고 쓰다보니 만약 input 태그의 type="number" 면 input 창에 적은 걸 알아서 number형으로 바꿔주나?
  라는 의문이 들었다.

  그치만 바꿔주지 않았다ㅋㅋ

 

- input 태그 안의 type="number" 의 의미는 형변환을 해주는 게 아니라, 숫자 이외의 값이 입력되지 못하도록 하는! 것이었다 ㅎㅎ

 

> subString() 과 slice()의 차이

- 공통점: 문자열을 잘라서 추출하는 기능(slice는 배열도 가능)

- 차이점

  매개변수의 값이 음수일 경우 동작되는 방식이 다름

 

substring()

- substring() 함수는 첫 번째 매개변수가 두 번째 매개변수보다 클 경우, 값을 교환하여 동작

- substring() 함수는 첫 번째 매개변수가 음수일 경우, 0으로 처리

 

slice()

- slice() 함수는 첫 번째 매개변수가 두 번째 매개변수보다 클 경우, 빈 값을 반환

- slice() 함수는 첫 번째 매개변수가 음수일 경우, 문자열의 길이 + 첫 번째 매개변수의 결괏값을 인덱스로 설정

 

 

var str = "ABCDEF";

console.log(str.substring(-1, 3)); // ABC

// 첫 번째 매개변수가 음수일 경우 0으로 처리

console.log(str.substring(4, 2)); // CD

// console.log(str.substring(2, 4))로 자동 교환됨

// --------------------------------------------------------------------------------

console.log(str.slice(4, 2)); // 빈 값

console.log(str.slice(-1)); // F

// 첫 번째 매개변수의 값: 문자열의 길이(6) + (-1) = 5

// 두 번째 매개변수: 생략되었기에 5번째 인덱스에서 마지막 위치까지 문자열을 반환

console.log(str.slice(-4, -1)); // CDE

// 첫 번째 매개변수의 값: 문자열의 길이(6) + (-4) = 2

// 두 번째 매개변수의 값: 문자열의 길이(6) + (-1) = 5

// 2번째 인덱스에서 5번째 인덱스 "전" 까지 문자열을 반환