📝 [250320/오답노트] 사용자 정보 저장 & 필터링 과제 피드백 정리

프론트엔드 공부를 하면서 제출한 과제에 대한 피드백을 받았다.
처음엔 무슨 말인지 잘 이해되지 않았지만, 하나씩 뜯어보면서 어떤 의도였는지, 어떤 부분을 놓쳤는지 정리해보았다.

🎯 이 과제의 의도는?

이번 과제의 핵심은 단순히 버튼을 눌러 정보를 저장하는 게 아니라,
브라우저에서 데이터를 받아 저장하고, 다시 꺼내어 보여주는 전 과정을 직접 구현해보는 것이었다.

📌 과제를 통해 배우는 핵심 개념

• 사용자 입력을 받아 객체로 만들기
• JSON.stringify, JSON.parse를 통해 문자열 ↔ 객체 변환
• localStorage에 데이터 저장하고 다시 불러오기
• 배열을 조건에 따라 필터링하고 화면에 출력
• 화면 출력 시 HTML 줄바꿈, 텍스트 처리 방식 이해하기

📦 부가 설명: JSON과 localStorage 쉽게 이해하기

✅ JSON이란?

• 자바스크립트에서 객체를 문자열로 바꾸는 형식.
• 서버나 localStorage에 저장할 때 사용.

const obj = { name: '철수' };
const str = JSON.stringify(obj);  // '{"name":"철수"}'
const backToObj = JSON.parse(str); // { name: '철수' }

✅ localStorage란?

• 브라우저 안에 데이터를 영구 저장할 수 있는 공간.
• 새로고침해도 날아가지 않음.
• 문자열만 저장 가능하기 때문에 JSON으로 변환해서 저장해야 함.

localStorage.setItem("userInfo", JSON.stringify({ name: "영희" }));
const data = localStorage.getItem("userInfo");
const user = JSON.parse(data); // 다시 객체로 변환

 

개념	설명
JSON.stringify()	객체 → 문자열 변환
JSON.parse()	문자열 → 객체 변환
localStorage	브라우저에 데이터 저장 (문자열 형태로 저장됨)

✅ 피드백 1: 줄바꿈 안 되는 이유

💬 피드백 내용

innerText에서 줄바꿈을 위해 \n 대신 그냥 줄바꿈을 작성하셨는데, HTML에서는 줄바꿈이 적용되지 않아요. 줄바꿈이 필요하면 <br> 태그를 쓰거나 템플릿 문자열을 HTML로 바꿔야 해요.

❗ 내가 쓴 코드

document.getElementById('userInfo').innerText = `이름: ${userInfo.name}, 
이메일: ${userInfo.email}`;

😅 문제는?

나는 줄바꿈을 하려고 줄을 나눠 썼지만, HTML에서는 이렇게 쓴다고 해서 줄이 바뀌지 않는다.
브라우저는 줄바꿈 문자 \n이나 줄 나눔만으로는 화면에 줄바꿈을 보여주지 않는다.

💡 해결 방법

<br> 태그를 써서 HTML로 바꾸면 제대로 줄바꿈됨!

document.getElementById('userInfo').innerHTML = `이름: ${userInfo.name}<br>이메일: ${userInfo.email}`;

또는 innerText를 그대로 쓸 경우엔 \n 문자로 처리:

document.getElementById('userInfo').innerText = `이름: ${userInfo.name}\n이메일: ${userInfo.email}`;

(단, innerText의 줄바꿈은 브라우저에 따라 보이지 않을 수 있음)

✅ 피드백 2: 이메일 필터링 조건

💬 피드백 내용

.includes('@gmail.com')도 잘 작동하지만, 더 정확하게 하려면 .endsWith('@gmail.com')을 사용하는 게 좋아요. 예외적으로 이메일에 abc@gmail.com.kr 같은 게 들어왔을 때는 잘못 필터링될 수 있어요.

❗ 내가 쓴 코드

.filter(user => user.email.includes('@gmail.com'));

😅 문제는?

includes()는 문자열 어디에든 포함되기만 하면 true를 반환해서
abc@gmail.com.kr 같은 이메일도 통과시켜버린다.

💡 해결 방법

.endsWith()를 사용해서 정확히 끝이 @gmail.com인 경우만 필터링하자!

.filter(user => user.email.endsWith('@gmail.com'));

🎱 참고: endsWith()란?
문자열이 특정 단어로 끝나는지 확인하는 메서드.
예: "test@gmail.com".endsWith("@gmail.com") 👉 true

includes()는 문자열 안에 포함되기만 하면 true 이지만, endsWith()는 정확히 끝나는 경우만 true를 반환.
이메일 필터링, 파일 확장자 검사 등에 유용하게 쓰인다.

🔎 문자열 메서드 한 줄 비교
startsWith() 👉 특정 문자열로 시작하는지 확인
includes() 👉 특정 문자열이 포함되어 있는지 확인
endsWith() 👉 특정 문자열로 끝나는지 확인

🔚 마무리 정리

이번 과제는 단순한 기능 구현을 넘어,

• 데이터를 어떻게 저장하고
• 어떻게 정확하게 필터링하며
• 어떻게 사용자에게 보여줄지에 대한 감각을 키우는 연습이었다.

🧠 실수는 공부의 재료! 앞으로도 실수하면서 배우자.