프로그레스바 로직 질문있어요....

Question

ㅠ.ㅠ 저만 이해못하는지 질문이없네요.. 엔드포인트로 나누어서 인덱스+1 곱하시는 로직이 어떤 원리인지 궁금함미다...

판다코딩 · Answer

.status div 태그의 색은 흰색으로 지정하고, .statusBar div 태그의 색은 다른색으로 지정한 다음, .statusBar div 태그의 width값을 바꾸어가며 진행창을 구현하고자 합니다. (100 / 모든 질문의 개수) 를 한다면, 질문 한개당 몇 %의 width값이 할당되어야 하는지 알 수 있습니다. 사용자가 첫 번째 질문에 대한 응답을 할 차례라면, width 값은 ( 100 / 모든 질문의 개수 ) * 1 이 되어야 할 것입니다. 두 번째 질문에 대한 응답을 할 차례라면, width 값은 ( 100 / 모든 질문의 개수 ) * 2 가 되어야 할 것입니다. 저희의 qIdx 값은 0부터 시작하기에 +1을 해주어 계산한 것입니다. 혹시 이해가 안되신다면, 모든 질문의 개수가 10개라고 가정하여 직접 계산해보시면 될 것 같습니다. 혹시 도움이 되셨을까요?

jhyjhy968 · Answer

qIdx = 0 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (0 + 1) (100 / 12) * 1 약 8.33% qIdx = 1 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (1 + 1) (100 / 12) * 2 약 16.67% qIdx = 2 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (2 + 1) (100 / 12) * 3 약 25% qIdx = 3 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (3 + 1) (100 / 12) * 4 약 33.33% qIdx = 4 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (4 + 1) (100 / 12) * 5 약 41.67% qIdx = 5 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (5 + 1) (100 / 12) * 6 약 50% qIdx = 6 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (6 + 1) (100 / 12) * 7 약 58.33% qIdx = 7 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (7 + 1) (100 / 12) * 8 약 66.67% qIdx = 8 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (8 + 1) (100 / 12) * 9 약 75% qIdx = 9 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (9 + 1) (100 / 12) * 10 약 83.33% qIdx = 10 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (10 + 1) (100 / 12) * 11 약 91.67% qIdx = 11 : (100 / endPoint) * (qIdx + 1) (100 / 12) * (11 + 1) (100 / 12) * 12 정확히 100%