88. SPA : Single Page Application (중급) : 싱글 페이지 앱의 정의, 구조, conditional 설정, action 설정

이 섹션에서는 단일 페이지 애플리케이션의 탐색을 다룹니다.

 

(1) SPA의 정의 및 특징

 

1. SPA 정의

• 단일 페이지 애플리케이션(SPA)는 하나의 페이지로 구성된 애플리케이션으로 페이지를 다시 로드할 필요 없이 단일 페이지 내의 콘텐츠를 동적으로 업데이트하고 표시합니다. 이는 한 콘텐츠가 다른 콘텐츠를 대체하도록 페이지에서 컨테이너를 숨기고 표시하는 방식으로 수행됩니다.

 

2. SPA특징

• 단일 페이지 애플리케이션은 페이지를 계속해서 다시 로드할 필요가 없기 때문에 탐색 및 사용이 매우 빠릅니다. 이는 또한 페이지에 로드한 모든 데이터(예: 검색 수행)가 다시 로드될 때까지 해당 페이지의 메모리에 유지되므로 동일한 콘텐츠를 반복적으로 로드할 필요가 없음을 의미합니다.
• 수백 또는 수천 개의 요소와 워크플로가 포함된 매우 복잡한 단일 페이지 앱을 구축하는 경우 특히 페이지 로드 시 페이지 속도가 느려질 수 있습니다. 따라서 페이지 로드 후 앱 탐색 속도가 더 빨라질 수 있지만 페이지에 더 많은 코드가 포함되어 있으므로 초기 로드 시간이 조금 더 길어질 수 있습니다.

 

3. SPA의 선택시 고려할 점

• 언제 무엇을 선택해야 하는지에 대한 정답은 없지만, 많은 개발자들은 앱에서 가장 많이 사용하는 기능을 하나의 SPA 페이지에 배치하는 단일 페이지 앱과 다른 페이지에서는 덜 사용되는 기능을 배치하는 다중 페이지 앱의 조합을 선택하고 있습니다. 이렇게 하면 앱의 일상적인 사용이 빨라지고 페이지 로드 시간이 길어지는 것을 피할 수 있습니다.
• 앱의 용도를 염두해야합니다. 프로젝트 관리 또는 HR 앱과 같은 도구 사용자는 초기 페이지 로드 시간이 조금 더 길다는 점을 신경 쓰지 않을 수 있지만, 전자상거래 앱이나 블로그라면 사용자는 덜 관대할 수 있습니다.

 

(2) SPA의 구조

단일 페이지 애플리케이션은 컨테이너(그룹)를 사용하여 콘텐츠를 업데이트하는 행동에 의존합니다. 컨테이너는 Action을 사용하여 숨기거나 표시할 수 있지만, 그룹 표시 여부를 결정하는 Condition(조건)을 갖도록 설정하는 것이 더 일반적입니다.

Form1 보여주기 조건

 

• 위의 예시에서는 URL 매개변수를 사용하여 Form 1이라는 그룹이 표시되는지 여부를 결정합니다. 즉 URL 매개변수가 “form1”이면 Form1을 보여주는 조건식(Conditional)입니다.(후반부 'URL Paramet 읽기'에서 더 자세히 설명)
• 대부분의 SPA의 논리적 구조는 그룹이 숨겨질 때마다 다른 그룹이 그 자리를 대신한다는 것입니다. Bubble은 위치를 즉시 전환하고 사용자는 페이지의 실제 구조를 인식하지 못합니다. 그들이 보는 것은 사용자의 행동에 따라 즉시 숨겨지고 표시되는 element(요소) 들 뿐입니다.

 

컨테이너가 자체 높이와 너비를 축소하여 서로 교체하는 방법을 이해하려면 반응형 엔진의 작동 방식을 알아보는 것이 좋습니다. 이 내용에 대해 알고 싶다면 아래의 글을 확인해 보는 것이 좋습니다.

11. Bubble Responsive design 1 (초급) : 버블 반응형 디자인, 쉬운 노코드 반응형 디자인하기

 

(3) SPA 페이지 설정 방법

단일 페이지 애플리케이션에서 그룹을 설정하는 가장 좋은 방법은 그룹을 서로 바로 위에 배치하는 것입니다. 이렇게 하면 한 그룹이 표시되지 않고 다른 그룹이 그 자리를 차지할 때 사용자에게 스위치가 즉시 표시되고 페이지는 표시되는 element(요소)에 상대적인 높이를 유지합니다.

 

spa 원리

 

이 예시에서는 두 그룹이 서로 겹쳐져 있습니다. 하나가 숨겨지면 높이가 무너지고 다른 그룹이 그 자리를 즉시 차지합니다. 즉 사용자에게는 전환이 즉시 이루어집니다.

 

이것이 작동하려면 element(요소)에 대한 몇 가지 주요 설정이 지정되어 있는지 확인해야 합니다.

 

spa 설정 방법

 

1. 먼저 요소(element)의 레이아웃(Layout) 탭으로 이동합니다.
2. 숨겨진 경우 축소 상자(Collapse when hidden box is checked)가 선택되어 있는지 확인하십시오. 이는 Bubble에게 그룹의 높이를 0픽셀로 줄여 아래 그룹이 그 자리를 대신할 수 있도록 지시합니다.
3. 요소(element)의 기본 높이값(Min height)이 0으로 설정되어 있는지 확인합니다. 만약에 기본 높이값이 0이 아니라면 요소가 사라져도 기본 높잇값만큼 공간이 유지될 수 있습니다.
4. 축소 작업 애니메이션(Animate the collapse operation )을 선택하지 않은 상태로 둡니다. 변경 내용이 애니메이션으로 표시되면 스위치가 즉각적으로 동작되지 않습니다.
5. 이 요소는 페이지 로드 시 표시됨(This element is visible on page load )이 선택 해제되어 있다는 점도 참고하세요. 즉, 그룹은 기본적으로 표시되지 않으며 표시되도록 조건을 설정합니다.

 

SPA에서 그룹의 변화(숨기고, 나태내기)를 업데이트하기 위해 상태변화를 시키는 조건식(Conditional)과 Action을 사용합니다. 많은 그룹으로 구성된 SPA페이지에서는 조건식(Conditional)을 사용하면 추적하기가 쉽습니다.
그러나 몇 개의 그룹만 숨기고 표시되는 SPA페이지에서는 Action을 사용하면 더 빠르게 설정할 수 있습니다.
먼저 아래에서 조건식(Conditional)에 대해 알아보겠습니다.

 

(4) 조건식(Conditional) 사용

상태 변화의 데이터를 받기 위해 Custom state(사용자 정의 상태) 또는 URL parameter(URL매개변수)라는 두 가지 방법을 사용합니다. 둘 다 나름의 장단점이 있는 완벽하게 좋은 설루션입니다.

 

1. Custom state와 URL parameter 비교

1) Custom state(사용자 정의 상태)

• 요소(element)에 임시로 저장하고 요소를 표시하고 숨기기 위해 조건에서 참조할 수 있는 변수입니다.
• 이는 사용자에게 표시되지 않습니다. 즉, 사용자는 URL의 변경 사항을 볼 수 있는 URL 매개변수와 달리 결과만 볼 수 있습니다. Custom state(사용자 정의 상태)는 페이지 로드 시 기본값을 갖거나 Action을 사용하여 설정해야 합니다.

 

2) URL parameter(매개변수)

• 페이지의 URL에 매개변수를 추가하며, 조건식에서 이 매개변수를 참조할 수 있습니다.
• 사용자는 URL이 변경되는 것을 확인하고 마치 새 페이지를 방문하는 것처럼 브라우저의 뒤로 버튼을 사용할 수 있습니다.
• 사용자는 URL 공유 또는 북마크 등의 URL을 사용하여 나중에 SPA의 동일한 섹션을 방문할 수도 있지만, Custom state(사용자 정의 상태)는 앱의 Action을 통해 설정해야 합니다.

 

3) 선택 사용 

• 어떤 방법을 선택해야 하는지에 대한 모범 사례는 없지만 각 방법을 알아가는 것이 좋습니다.
• 예를 들어 사용자가 브라우저의 뒤로 버튼(Android 앱에서 예상되는 동작)을 사용할 수 있도록 하려면 URL 매개변수를 사용하여 설정하는 것이 더 쉬울 것입니다.
• 사용자가 그런 방식으로 돌아갈 수 없도록 하거나 URL 매개변수를 조작할 수 없도록 하려면 Custom state(사용자 정의 상태)를 사용하는 것이 좋습니다.

2. Custom state(사용자 정의 상태) 설정

Custom state(사용자 정의 상태)를 처음 설정하는 경우 다음 관련 문서가 유용할 수 있습니다.

73. Custom States(중급) : 버블의 사용자 지정 상태 설정, 값 설정하기

 

• Custom state는 페이지 로드 시 기본값을 포함하거나 Action을 통해 설정되어야 합니다.
• 그것들은 당신이 선택한 각 요소에 연결됩니다. 아래 예시에서는 index페이지 자체에 custom state를 저장합니다.

 

1) Custom state 설정 및 기본값 설정

기본값을 설정하려면 아래 단계를 따르세요

 

custom state 설정

1. 먼저 페이지 element를 클릭하여 element Inspector(요소 검사기)를 엽니다.
2. 그런 다음 검사기 상단 표시줄에 오른쪽에 있는 작은 ⓘ 기호를 클릭하세요
3. Custom state가 설정되어 있지 않은 경우 새 맞춤 상태 추가(Add a new custom state)를 클릭하고 이름을 지정합니다. 이름박스 오른편의 데이터 type 드롭다운에서는 text로 설정합니다.
4. 기본값 필드(default value)에서 form1을 설정합니다.

 

2) Action으로 값 변경 

Custom state의 값을 변경해야 할 때마다 element 상태 설정 Action을 사용합니다.

워크플로우의 상태값 설정

1. 먼저 워크플로우 설정 화면으로 넘어가서, 요소의 상태 설정( Set state) Action을 워크플로에 추가합니다.
2. 그런 다음 Custom state가 저장되는 element(요소)를 선택합니다. 이 예시에서는 index페이지에 배치했으므로 index를 선택하겠습니다.
3. 미 Custom state를 생성한 경우 여기에서 선택할 수 있습니다. 그렇지 않은 경우 Create a new custom state를 선택하고 해당 유형을 텍스트로 설정 한 다음 이름을 nav로 지정할 수 있습니다.
4. Value 필드에서 Bubble은 해당 Custom state에 대해 설정한 유형이므로 텍스트를 요청합니다. 그런 다음 값을 입력할 수 있습니다.

이 예시에서는 Custom state의 상태에 이전 단계에서 설정한 form1의 기본값이 있다고 가정하고 이 Action이 두 그룹 간의 가시성을 전환하도록 이를 form2로 설정하겠습니다.

 

3. URL Parameter(매개변수) 설정

다음은 URL parameter를 사용하여 설정하면 어떻게 보이는지 살펴보겠습니다. URL parameter는 브라우저의 URL에 배치할 수 있는 데이터 조각으로, key(*키 )*와 value(값)으로 구성됩니다.

URL 매개변수를 처음 설정하는 경우 다음 관련 도움말을 참조하세요.

74. URL Parameters(중급) : 버블의 URL 매개변수 기능, 구조, 설정, url parameter 보안

 

1) URL Parameter 설정

페이지가 로드될 때 URL에 URL 매개변수를 표시하거나(예: 링크 따라가기) 페이지로 이동 Action을 사용하여 URL 매개변수를 설정할 수 있습니다. 다음의 예시에서는 후자를 보여줍니다.

페이지 이동 액션으로 url parameter 전달

 

1. 먼저 워크플로에서 ‘Go to page Action’을 추가하겠습니다. 이벤트 트리거는 버튼 클릭이나 텍스트 클릭 등 필요한 모든 것이 될 수 있습니다.
2. 이동대상을 이미 현재 있는 페이지인 index페이지와 동일하게 설정하고 있습니다. (현재 보고 있는 같은 페이지로 이동으로 설정)
3. URL parameter가 여러 개 있고 기존 parameter를 URL에 유지하려면 Send current page paramerets (현재 페이지 매개변수 보내기)를 선택하세요. 이 예시의 경우 하나만 있으므로 선택하지 않은 상태로 유지하겠습니다.
4. more parameters to the page(페이지에 추가 매개변수 보내기) 상자를 선택합니다. 이는 하나 이상의 URL 매개변수를 설정하는 방법입니다.
5. 키 와 값을 입력하라는 메시지가 표시됩니다. 키를 nav로 설정하고 값을 form1로 설정하겠습니다. 키와 값에 제공하는 문자열은 URL 매개변수의 작동 방식에 영향을 미치지 않지만 브라우저의 URL 표시줄에서 사용자에게 표시된다는 점을 명심하세요

*주의사항

모든 브라우저와의 호환성을 보장하려면 URL로 인코딩 된 키 및 값 필드 값을 특수 문자나 공백이 없는 소문자 문자열로 설정하는 것이 좋습니다.

 

2) URL Parameter 데이터 읽기

방금 설정한 URL 매개변수를 읽기 위해 첫 번째 그룹의 조건부(Conditional) 탭에서 동적 표현식을 설정하겠습니다. 이전의 스크린숏으로 돌아가서 어떻게 작동하는지 살펴보겠습니다.

url parameter 데이터 읽기

 

When: 조건 트리거

element에 스타일을 지정할 시기를 Bubble에 지시하는 조건입니다.

• URL에서 데이터 가져오기 데이터 소스를 사용하고 있으며 URL 매개변수의 이름(키)은 nav입니다.
• 원하는 이름을 사용할 수 있습니다. 사용자가 브라우저의 URL 표시줄에서 해당 이름을 볼 수 있다는 점을 명심하세요

 

Properties: 위의 조건이 true인 경우 실행 속성

true인 경우 변경할 속성을 드롭다운에서 'This element is visible' (이 요소가 표시됨)을 선택했습니다.

• 이 요소가 기본적으로 표시되지 않게 설정되어 있다는 것을 떠올려야 합니다. 이는 기본적으로 그룹이 표시되지 않도록 설정했기 때문에 위의 조건에 조건이 true일 경우 표시되도록 하는 조건이 성립된다고 생각하면 됩니다. 
• 전체 로직을 이해하기 위해 조건을 사람이 읽을 수 있는 문장으로 다음과 같이 정의해 보겠습니다.

When the URL parameter called nav contains the text form1, make this element visible.

이 로직이 다른 그룹에서 작동하도록 하려면 동일한 조건을 설정하고 nav=form2 및 nav=form3과 같은 URL 매개변수의 값을 변경하면 됩니다.

 

(5) Action 사용

Action을 사용하여 element를 표시하고 숨길 수도 있습니다. 사용자에게 나타나는 결과는 동일하므로 동일한 목표를 달성하기 위해 다른 방법을 사용하는 것뿐입니다.

• 몇 개의 소수 그룹으로 구성된 페이지에서는 Action을 사용하는 것이 더 빠르게 설정할 수 있습니다. 그러나 숨기고 표시되는 요소가 많은 페이지에서는 조건을 추적하기가 더 쉬울 수 있습니다.

 

1. Show / Hide (보여주기 / 숨기기) an element  Action 사용

• Bubble에 요소를 표시하거나 숨기도록 지시하기 위해 Show an element 및 Hide an element 중에서 선택할 수 있는 두 가지 작업이 있습니다. 이는 동일한 작업이 아닌 별도의 작업입니다.

element show / hide action

1. 먼저 선택한 워크플로에 Show an element 작업을 추가합니다.
2. 표시하려는 요소를 선택합니다. 이 경우 Form 1이라는 그룹을 표시하려고 합니다.

 

2. Toggle Element Action 사용

• 동일한 Action으로 요소의 가시성을 전환하려는 경우 Toggle an element(요소 전환) Action을 사용할 수 있습니다. 이는 하나의 Action만 필요하다는 점을 제외하면 요소 표시/숨기기 Action과 정확히 동일합니다.

toggle action

1. 먼저 선택한 워크플로에 Toggle an element Action을 추가합니다.
2. 그런 다음 전환할 element를 선택합니다. 이 경우 Form 1이라는 그룹을 Toggle 하려고 합니다.