[Adalo] 처음 접하면서 느낀 단점2 (예시는 회원가입)

1편에 이어 다시 시작합니다.

2021.06.09 - [Builders/Adalo] - [Adalo] 처음 접하면서 느낀 단점1 (예시는 회원가입)

[Adalo] 처음 접하면서 느낀 단점1 (예시는 회원가입)

 

1편에서 목표로 했던 내용이 안되어 Form을 직접 만들어서 해봤습니다.

솔직히 그제까지 잘 안되서 포기한 상태였는데 오늘 새로운 마음으로 다시 생각해보니 어찌어찌하다 되었습니다.

제가 왜 이런 삽질을 할 수 밖에 없는지 차근차근 설명하도록 하겠습니다.

 

우선 완성된 모습은 아래와 같습니다.

 

좌측 상단 회원가입 페이지부터 시작해서 아래로 필드 하나하나씩 Validation 체크를 한 다음 마지막 제일 하단 최종으로 Users 데이터 입력하고 우측 상단 Main 페이지로 이동합니다.

우선 새로 작성한 회원가입 페이지의 Form 데이터 구조는 아래와 같습니다.

 

회원가입 버튼을 클릭했을 때 무언가 일어나야 할 액션 중에 하나가 이메일 Validation입니다. Adalo 자체에서 지원하지 않기 때문에 좌측 Marketplace 버튼을 클릭해서 살펴보면 Email Validator라는 컴포넌트가 있는 것을 확인할 수 있습니다. 이 컴포넌트는 이메일 필드가 빈칸이거나 형식에 맞지 않을 경우 True/False 형태로 결과를 리턴합니다.

이 버튼을 이용하기 위해 INSTALL 버튼을 클릭하여 설치를 진행합니다.

 

이제 기존 회원가입 버튼을 지우고 좌측 Installed에서 위 컴포넌트를 선택하여 위치 시킨 후 버튼 이름은 회원가입으로 변경합니다.

그리고 버튼을 선택한 다음 좌측을 보면 Email Validator 항목에서 체크할 이메일 필드를 지정해줘야 합니다.

Magic Text를 클릭하여 이메일 필드를 선택해줍니다.

 

다음으로 첫번째 해야할 일은 버튼을 클릭했을 때 이메일 필드에 대한 Validation을 진행한 후 어떤 동작을 할지 지정해줘야 합니다.

여기서는 이메일 형식에 맞지 않는다면 Modal창으로 메시지 출력 후 회원가입 페이지로 다시 돌아가려 합니다.

이를 위해서 우선 Modal 창을 하나 생성합니다.

좌측 ADD SCREEN > Misc에서 Modal을 선택하여 화면을 배치합니다.

 

다음으로 Modal 컴포넌트를 선택하고 버튼을 선택하여 하단 ADD ANOTHER ACTION을 선택, 버튼을 클릭했을 때 회원가입 페이지로 돌아가도록 설정합니다. 왜냐하면 이 창에 왔을 때는 이메일 형식에 맞지 않기 때문입니다.

 

다음으로 이메일 Validation이 성공했을 때 넘어갈 화면을 만들어줍니다. 좌측 플러스 버튼을 클릭하여 ADD SCREEN을 선택하고 Blank Screen을 선택하여 회원가입 아래쪽에 위치 시킵니다.

 

이제 이메일 Validation에 실패했을 경우에 대해 작성합니다. 회원가입 화면의 버튼을 선택 한 후 Button >  ADD ANOTHER ACTION을 선택합니다. 다음 실패했을 경우 이동할 Modal 화면을 지정해주고 이동방법은 Modal로 지정합니다. 또 When does this happen에서 Sometimes를 선택하고 Email Validation result가 is false일때로 선택합니다.

정리하면 이메일 필드의 Validation이 False일 경우 Modal 창으로 이동한다는 내용입니다.

 

다음 두번째 조건은 성공했을 경우 이동하는 내용입니다. ADD ANOTHER ACTION을 선택하여 성공 시 이동할 화면으로 위에서 생성한 Blank Screen을 지정하고 Email validation result가 is true일 경우로 선택합니다.

 

이와 같은 방법으로 필드 하나하나 Validation에 대해 처리해줘야 합니다.

그리고 마지막에는 Actions > ADD ANOTHER ACTION > More.. > User Login > Sign Up을 선택하고 필드값을 지정합니다.

 

그 다음으로 Main 페이지로 가는 Action을 추가해주면 됩니다.

 

왜 이런식으로 밖에 할 수 없는지 이해를 할 수 없습니다.

보통 코딩으로 처리할 경우 아래와 같이 합니다.

if (이메일 is False)
{
     alert (Email Error)
     return
}
else if (비밀번호 is False)
{
    alert (Password Error)
    return
}
else
{
    Users 저장
}

이렇게 필드에 대해 체크 후 최종으로 DB에 입력하면 되지만 Adalo는 이게 불가능합니다.

먼저 모든 Link Action은 Create같은 데이터 처리 Action에 우선할 수 없습니다. 즉, 아래 그림에서 Link Action은 Sign up Action에 먼저 배치 할 수 없습니다.

이 이야기는 데이터 저장 후 Validation을 처리해야하는 반대의 상황이 발생하게 됩니다.

Link를 Sign Up 위로 올려도 반영되지 않음

 

두번째로 하나의 Action에는 하나의 조건문만 작성이 가능합니다. 즉 else if... 형태의 조건을 지원하지 않습니다.

아래 그림과 같이 Sometimes... 로 조건은 한번만 작성하도록 되어 있어 하나의 Action에서 모든 Validation을 처리할 수 없습니다.

 

아무튼 이와 같은 이유로 회원가입에 대한 화면이 복잡하게 구성되었습니다.

실제 이 로직을 실행해서 회원가입을 진행하면 모든 Validation이 잘 적용되어 생각한 로직에 맞게 작동하지만 문제점은 Validation을 처리하는 빈 화면이 총 5번 보여지게 되어 회원가입 버튼을 누르고 한동안 빈화면만 보이다가 Main 화면으로 넘어가게 됩니다.

 

결론은....

비밀번호 확인 필드 만들지 않고 Adalo에서 제공하는 회원가입 폼을 그대로 사용하면 아주 쉽고 간편하게 구현 가능하여 이렇게 하기로 했습니다.

3일동안 무슨짓을 한건지 모르겠습니다.