✅ 소개
: 회원 가입 페이지의 유효성 검사 기능을 구현하고자 했습니다. 실시간으로 입력 값을 검증하고, 시각적 피드백을 제공하는 것이 목표였습니다.
✅ 사용한 도구와 진행 방법
사용한 도구: ‘Bubble’
회원 가입 페이지 구축에 사용했습니다.
조건부 스타일링: input 입력 값의 유효성에 따라 border color 변경 및 표시 할 텍스트 문구를 추가했습니다.
워크플로우: 이메일/닉네임 중복 체크 등의 기능을 구현하고자 했습니다.
1️⃣ 데 이터 필드 추가
type - user에 '별명' 필드를 추가 했습니다.
2️⃣ 회원 가입 페이지 (버블 자체 템플릿 활용)
<추가한 요소>
‘닉네임’(별명) input
실시간으로 유효성을 체크
border color 설정 (공부할 겸 border color 기본값을 다르게 지정해봤습니다.)
text ‘~ 형식이 올바르지 않..’ 추가
닉네임/ 이메일 중복 체크
button(icon형태) AND text ‘버튼을 눌러 중복 체크~’ 추가
text- ‘사용할 수 없는 ~’ 추가
비밀번호 표시 기능
button(icon 형태) 추가
아직 기능 구현은 미완 입니다. (ㅠㅠ)
3️⃣text- ‘형식이 올바르지 않아~’ 설정
<visible>
값이 비어있지 않음 AND not valid 할 때
닉네임 유효값으로 ‘특수 기호 제외 & 2글자 이상’을 설정하고자 했지만 미처 구현하지 못 했습니다 ㅠㅠ
4️⃣text- ‘! 버튼을 눌러 중복 체크~’ 설정 (중복 체크 버튼: 비활성화/ 회색)
default: not visible 상태입니다
<visible> 중복 체크를 할 수 있는 경우 (버튼 활성화)
값이 비어있지 않고, input 입력 값의 형식이 올바른 경우
(텍스트 ‘ 형식이 올바르지 않습~’가 보이는 않는 경우로 설정)
5️⃣text- ‘사용할 수 없는 ~’ 설정 (중복 체크 버튼: 빨간색/ 비활성화)
default: not visible 상태입니다
<visible>
해당 input 값과 user 데이터의 해당 필드와 대조 결과, 값이 0보다 클 때 … 이 방식이 맞나요?
원래는 버튼을 눌러 중복 여부를 판단한 뒤, 결과에 따라 해당 문구를 표시하고 싶었습니다. (하지만 일단 이런 방식으로라도...)
6️⃣button- ‘중복 체크’ 버튼 설정
default: isn't clickable 상태입니다
<활성화>
검정색
값이 유효하고, 비어있지 않을 때
<비활성화>
빨간색 (서치 결과, 중복 이메일 발견)
input 값이 type-user 데이터의 해당 필드 값과 정확하게 일치할 때
(미리 설정해 둔 텍스트 ‘사용할 수 없는 이멜~’이 보일 때로 조건 설정)
회색
입력 값이 없거나, 유효하지 않을 때
7️⃣ UI 개선
‘text’가 숨겨졌을 때, ‘group’의 공간도 남아 있지 않도록 설정했습니다.
‘group’의 ‘layout’ 설정과 ‘text’의 ‘conditional’ 조건이 충돌하지 않도록 설정했습니다.
✅오류 발생 및 해결 방법
1️⃣ ‘This element is visible on page load’ 체크 & 요소의 Conditional 설정으로만 컨트롤
이유: ‘This element is visible on page load’ 설정 방법을 잊고 있었습니다.
문제점
설정해야 하는 조건들이 너무 많아서 복잡했습니다.
텍스트가 보이지 않을 때, 부자연스러운 레이아웃이 거슬렸습니다.
2️⃣ 요소를 각각 개별적인 ‘Group’으로 묶기 -> 해당 그룹의 (‘This element is visible on page load’ 체크 해제 + ‘Collapse when hidden’ 체크) -> 요소의 ‘Conditional’ 조건들 중, ‘this element is visible’ 체크 항목들만 남겨놓기
이유:
레이아웃 일관성 유지
텍스트가 보이지 않을 때 생기는 빈 공간 제거
컬럼 간 간격이 불규칙하게 벌어지는 것 방지
깔끔한 화면 구성
닉네임, 이메일, 비밀번호 입력란 사이의 간격을 일정하게 유지
경고 메시지가 없을 때도 요소들 간의 간격이 균일하게 유지
문제점:
그룹이 숨겨진 상태(‘Layout’ 설정)에서는 내부 요소의 ‘Conditional’이 ’true’여도 보이지 않았습니다.
문제 발생 이유:
‘Group’이 요소들보다 우선 순위에 있다는 점을 간과하였습니다.
(그룹의 ‘conditional’은 비워둔 상태)
💥 해결 방법
방법:
‘Group’의 ‘This element is visible on page load’ 체크 + ‘Collapse when hidden’ 체크
그래도 Preview의 레이아웃에 변화가 없다면, 각 그룹마다(또는 요소마다) ‘Min height’가 지정 되어 있는지 확인 후 ‘0’으로 변경
✅ 앞으로 추가해야 하는 기능 & 배우고 싶은 것
: 백엔드 워크플로우 설계 및 커스텀 하는 방법
1️⃣닉네임 유효성 판단 기능 (특수 문자 필터링 등)
2자 이상 and 특수 문자 제외
(사진처럼 설정 해봤었는데, 특수 기호 제한 조건만 적용이 안돼요 ㅠㅠ)
플러그인으로 해결...? 가능할까요
tool box 이용 (정규식 사용 방법)
2️⃣ 중복 체크 기능
이메일/ 닉네임 중복 체크
이메일/ 닉네임 입력 후 중복 체크 버튼 클릭 - 값을 받아서 user의 각 필드 항목과 대조 - 결과 값으로 yes/no 반환 - 반환 된 값에 따라 특정 문구가 뜨게 설정
💥궁금한 점:
중복된 값이라는 결과를 받은 user가 새로운 값을 입력하려 할 때, 한 글자만 지워도 저 문구가 사라지도록 하고 싶어요
(ㅠㅠ 유효한 이메일 형식이 아니면 문구가 보이지 않아야 하는데.. 머리가 아픕니다)
3️⃣ 비밀번호 표시 기능
* 네이버를 참고 하였습니다
버튼 활성화/ 비활성화.. 버블에서는 어떤 방식으로 접근해야 할까요 ?
4️⃣ 로딩 중 표시
플러그인 찾아보다가 'easy loader' 발견했는데, 다음에 사용 해보겠습니다 !
✅ 결과
여기까지 하고 다시 Preview를 확인해보니 아직도 문제가 많았습니다..ㅎㅎ
이 글을 보시는 개발자분들은 속이 터지시겠죠..?
저는 머리가 터질 것 같 았습니다ㅠㅠ
비개발 전공자로서, 하나부터 열까지 모든 것이 배움의 연속이었습니다.
그래도 지난 토요일 오프 모임 때 배운 내용들 덕분에 시작이라도 할 수 있었던 것 같습니다.
(긴 시간 동안 열정 넘치게 강의해주셨던 '허세임 & 닿' 스터디장님들 정말 감사했습니다 ㅎㅎ)
많이 많이 부족하지만 ..! 이번 14기 스터디 참여하는 동안 많이 성장할 수 있도록 노력하겠습니다 !!!!!!!
감사합니다