자바스크립트 공부하기 - trim

아무리 해도 이해가 안되던.. 이름부터 뭔가 어려운 trim.

자꾸 등장해서,, 그냥 넘길 수 없기에 열심히 .. 하면 된다 ~ !

---

🪚trim() 이란 ?

 

- 자바스크립트에서 trim()은 문자열의 앞뒤에 있는 공백(띄어쓰기, 탭, 줄 바꿈 등)을 제거하는 역할을 합니다. 쉽게 말해, 문자열의 "군더더기"를 없애주는 기능이라고 생각하면 됩니다.

 

- trim()은 문자열(string)의 앞뒤 공백(whitespace)을 제거하는 메서드입니다.

🚫 주의: trim()은 문자열에만 사용 가능하며, HTML 요소나 숫자에는 적용할 수 없습니다.

 

trim() 예시:

let text = "   안녕하세요!   ";
let trimmedText = text.trim();

console.log(text); // "   안녕하세요!   "
console.log(trimmedText); // "안녕하세요!"

---

🪚trim() 으로 할 수 있는 것들 ?

자바스크립트의 trim() 메서드는 문자열 앞뒤의 공백을 제거하는 기능을 제공하며, 다양한 상황에서 유용하게 사용됩니다.

 

 

1. 사용자 입력 값 정제:

사용자가 폼에 아이디나 비밀번호를 입력할 때 실수로 앞뒤에 공백을 넣는 경우가 있습니다.

trim()을 사용하면 이러한 불필요한 공백을 제거하여 정확한 값을 얻을 수 있습니다.

let userId = "  myId  ";
let password = " password ";

userId = userId.trim();
password = password.trim();

console.log(userId); // "myId"
console.log(password); // "password"

 

2. 문자열 비교 전 정규화:

사용자로부터 입력받은 문자열을 데이터베이스에 저장된 문자열과 비교할 때, 공백 때문에 비교 결과가 달라질 수 있습니다. trim()을 사용하여 양쪽 문자열의 공백을 제거하면 정확한 비교가 가능합니다

let userInput = " apple ";
let storedData = "apple";

if (userInput.trim() === storedData) {
  console.log("일치합니다.");
} else {
  console.log("일치하지 않습니다.");
}

 

3. 문자열 유효성 검사:

사용자가 필수 입력 항목에 공백만 입력하는 것을 방지하기 위해 trim()을 사용하여 입력 값이 비어있는지 확인할 수 있습니다.

let input = "   ";

if (input.trim() === "") {
  console.log("필수 입력 항목입니다.");
} else {
  console.log("입력 완료.");
}

---

너무 이해가 되지 않던... 

input 요소에, 공백값을 넣을 경우, 입력이 안되는 걸 설정하는 부분.

 

 

>>> 이 코드는 **"입력된 값이 비어 있지 않은지 확인하는 코드"**야.

어떻게 동작하는지 설명할게:

1. tweetInput.value: 이건 입력된 값을 말해. 예를 들어, 사용자가 텍스트박스에 뭔가 입력했다고 가정할게. 그 입력된 텍스트를 가져오는 거야.
2. trim(): 이 메서드는 입력된 텍스트의 앞뒤 공백을 없애는 역할을 해. 예를 들어, " Hello "라고 입력했다면, trim()을 실행한 후에는 "Hello"만 남게 돼.
3. !== '': 이건 **"빈 문자열이 아니다"**라는 뜻이야. 즉, 공백만 있는 문자열이 아닌지, 실제로 뭔가 적혀 있는지를 확인하는 거지.

전체 코드:

**tweetInput.value.trim() !== ''**는 **"사용자가 입력한 텍스트가 공백이 아니고, 실제로 뭔가 적혀 있는지 확인하는 조건"**이야.

예시:

• 만약 사용자가 " Hello "라고 입력했다면:
  • trim()을 실행하면 "Hello"가 되고, !== ''로 확인하면 **"빈 문자열이 아니므로 true"**가 돼.
• 만약 사용자가 " " (공백만)이라고 입력했다면:
  • trim()을 실행하면 빈 문자열 ""이 되고, !== ''로 확인하면 **"빈 문자열이므로 false"**가 돼.

결론:

이 코드는 "입력창에 뭔가 적혀 있는지" 확인하려고 쓸 수 있어. 예를 들어, 사용자가 비어 있는 입력창에서 글을 보내지 않도록 막는 데 유용할 수 있어.

 

 

 

🔹 if (tweetInput.value.trim() !== '')

• 이 조건은 사용자가 입력한 값이 비어있지 않을 때만 실행되도록 하는 거야.
• !==는 **"같지 않다"**는 뜻이야.
• '' (빈 문자열)과 같지 않으면 실행됨.

🔥 이 코드가 필요한 이유?

1. 공백만 입력하는 것을 방지
   • 사용자가 " "(공백만 입력)하면 트윗이 안 만들어지게 막아줌.
2. 빈 입력을 방지
   • 아무것도 입력하지 않고 버튼을 눌러도 트윗이 추가되지 않음.
3. 불필요한 HTML 요소 생성을 방지
   • ''(빈 문자열)일 때 트윗을 추가하면 화면에 빈 트윗이 쌓일 수 있어.

 

🚨 공백이 있는 경우, trim()을 안 쓰면 문제가 생길 수 있어!

let userInput = "    "; // 사용자가 공백만 입력함
if (userInput !== "") {
  console.log("입력값 있음!");
} else {
  console.log("입력값 없음!");
}
// 출력: 입력값 있음! (공백도 문자열로 인식되기 때문)

❌ 문제점: 공백만 입력했는데도 "입력값 있음!" 이라고 나옴!

 

✅ trim()을 사용하면?

let userInput = "    "; // 사용자가 공백만 입력함
if (userInput.trim() !== "") {
  console.log("입력값 있음!");
} else {
  console.log("입력값 없음!");
}
// 출력: 입력값 없음! (공백이 제거되어 빈 문자열이 됨)

💡 해결됨! 공백만 입력하면 빈 문자열로 바뀌어서 "입력값 없음!"이 출력돼!