[TIL]231206_이전▪︎다음페이지버튼, Progress bar

👩🏻‍💻 Today Learn

• 알고리즘 1문제
• 스탠다드반 수업(토큰 인증)
• 아웃소싱 프로젝트 작업 진행

🔐 알고리즘 문제풀이

문제 ) 가운데 글자 가져오기

단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.

풀이

function solution(s) {
    let answer = '';
    let length = s.length;
    
    if (length%2===0){
        return s[Math.floor(s.length/2-1)]+s[Math.floor(s.length/2)]
    } else {
         return s[Math.floor(s.length/2)]
    }
    return answer;
}

Math.floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환해준다.

이번 문제를 풀면서 참고하다보니 알게된 사실은 문자열은 유사 객체 배열이기 때문에 배열과 유사하게 각 문자에 접근할 수 있다는 것이다. 유사 배열 객체는 인덱스로 property값에 접근할 수 있고 length property를 갖는 객체라고 한다.

어떻게 접근할지 어렵다고 생각된 문제였지만 계속 적어보고 값을 출력해보면서 접근해 나가는 식으로 풀어보는 방법을 조금 알게되었다.

💡 알게된 내용

한 페이지에 여러개의 컴포넌트가 있을때 이전페이지, 다음페이지 버튼 구현하기

// 현재 페이지 state 
 const [currentPage, setCurrentPage] = useState(1);
 const totalPage = 4;

// 다음페이지
 const nextPageHandler = () => {
        if (currentPage < totalPage) {
            setCurrentPage(currentPage + 1);
        }
    };

// 이전페이지
 const prevPageHandler = () => {
        if (currentPage > 1) {
            setCurrentPage(currentPage - 1);
        }
    };

 const renderSurveyPage = () => {
        switch (currentPage) {
            case 1:
                return <SurveyCountry />;
            case 2:
                return <SurveyWith />;
            case 3:
                return <SurveyPeriod />;
            case 4:
                return <SurveyKeyword />;
            default:
                return null;
        }
    };

// 불러온 컴포넌트 넣어주기
<div>
{renderSurveyPage()}
</div>

그리고 버튼에 onClick으로 함수를 넣어주면 완성된다!

페이지 넘어갈때 Progress bar 표시하기

const progressPercentage = (currentPage / totalPage) * 100;

<ProgressBarWrap>
   <ProgressBarMove style={{width:`${progressPercentage}%`}} />
</ProgressBarWrap>

스타일은 원하는대로 주면된다.
버튼을 누르면 ProgressBarMove로 설정해놓은 부분이 현재 총 4페이지 이기 때문에 25%씩 이동한다.

✍🏻 회고

설문조사 데이터는 어떻게 관리해야할지 감을 잡아가는 중이고 우선 UI를 구현하면서 새로운 기능들을 알게되었다.
팀 프로젝트 기획 내용을 토대로 피드백을 간단히 받았는데 그 중 사용자에게 설문조사기능을 제공할 때는 진행률을 보여주어야 중간에 나가버리는 이탈률을 줄일 수 있다는 것에 대해 알게 되었다!
피드백을 토대로 progress bar를 간단하게 만들어 보았는데 왠지 이 방법이 맞는것 같지 않다는 생각도 들었다...