HomeElement 메인 화면

url은 /home이고 \ 컴포넌트를 사용했다. 화면 구성은 맨 위에는 탭 메뉴를 사용하여 클릭하면 내 정보, 내 책장, 내 독후감으로 바뀔 수 있도록 했다.

<Route path="/home" element={<HomeElement/>} />

\ 코드에서 중요한 부분은 다음 부분이다.

 ''' 생략 '''
<div>{[<Mypage />, <BookMenu />, <ReportMenu />][tab]}</div>

react환경에서 동적인 UI만들기 (중요!!!!!!!)

Step1. html,css로 UI 디자인을 다 해놓고
Step2. UI 현재 상태를 state로 저장해두고
Step3. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성!

여기서는 tab을 state로 사용했고 조건문 대신 배열에 원하는 컴포넌트를 넣어 놓고 state에 따라 index가 바뀌도록 설계하였다! Step3는 편한대로!

HomeElement: MyPage 컴포넌트

MyPage 컴포넌트는 크게 네가지 영역으로 구성 되어있다. 좌측 상단에는 사용자의 프로필 정보, 중앙에는 사용자의 점수 정보 표현하는 그래프, 하단에는 사용자의 최근 활동 기록 정보, 우측에는 자신의 캐릭터를 꾸밀 수 있는 부분으로 구성되어 있다.

여기서 그래프 같은 경우는 react-apexcharts 라이브러리를 사용했다. 이때 그래프가 svg 형식이였기 때문에 동적으로 화면의 크기가 바뀔 때 이에 맞춰 동적으로 그래프의 크기를 바꾸는 데 어려움이 있었다. documentElement.clientWidth를 이용해 해결했지만 반쪽짜리 해결이었다. 화면의 크기가 바뀐 상태에서 새로고침을 하면 원하는 크기의 그래프를 얻을 수 있었지만, 여전히 동적으로 바뀌도록 하는 것은 어려웠다. 이 부분은 SVG의 크기를 동적으로 바꾸는 방법에 대해 조금 더 알아봐야 할 것 같다.

꾸미기 화면 구성

꾸미기 부분을 구현할 때 가장 어려웠던 부분은 사용자가 클릭한 배경과 악세사리가 동적으로 바뀌지 않았을 때가 문제였다. 그리고 바뀌었다고 해도 디비에 이 정보가 실시간으로 잘 저장이 안되었다. 아무래도 axios를 이용해서 api통신을 하다보니 비동기 이슈로 인해 발생한 것 같다. 결국에는 꾸역 꾸역 해결하긴 했으나 아직 불완전한 것 같다. 이 부부은 추후에 비동기 이슈를 해결하는 방향으로 코드를 수정 해야겠다.

HomeElement: BookMenu 컴포넌트

책 검색 화면

내 책장 부분은 DB에 있는 책 정보를 간단하게 볼 수 있다. 그리고 사용자가 읽고 있는 책 같은 경우는 책갈피를 이용해 따로 표시했다. 검색 기능과 필터 기능을 두어 내가 원하는 책을 찾을 수 있도록 하였다.

가운데 있는 책 정보는 react-infinite-scroller를 이용하여 무한 스크롤링 기능을 도입했다. 한번에 DB에 있는 모든 정보를 가지고 오는 것은 페이지 로딩을 하는데 많은 시간이 걸릴 것이라 생각했기 때문이다. 백엔드에서 책을 조회할 때 페이징 기법을 사용했기 때문에 가능했다. 코드를 보면 loadMore 부분이 스크롤이 끝에 닿으면 실행 되는 부분이다. 이때 next에 다음 페이지가 있는지 없는지를 저장해 놓고 loadMore가 실행 되면 next를 검사해서 data를 추가하는 방식으로 진행했다.

loadMore={() => {
                setTimeout(() => {
                    if (next != null) {

                    axios
                        .get(`${next.replace("http", "https")}`, {
                        headers: {
                            Authorization: TOKEN,
                        },
                        })
                        .then((res) => {
캡
                        let temp = [...books, ...res.data.results];
                        setNext(res.data.next);
                        setBooks(temp);
                        });
                    }
                }, 2000);
            }
        }

그래서 필터 기능 같은 경우는 DB에 있는 모든 데이터에 대해 필터링 되는 것이 아니라 현재까지 받아온 데이터에 한해서 필터링이 가능하다. 다음은 제목순으로 필터링 코드이다.

onClick={() => {
                    let newArray = [...books];

                    newArray.sort(function (a, b) {
                        var keyA = a.title;
                        var keyB = b.title;
                        if (keyA < keyB) return -1;
                        if (keyA > keyB) return 1;
                        return 0;
                    });
                    setBooks(newArray);
                    }
                }

내 책장 부분을 개발하면서 책갈피 부분의 코드가 많이 비효율적이다. DB에 있는 책 정보와 사용자의 책갈피가 되어 있는 책 정보를 일일이 비교해서 진행했는데 그렇게 되면 DB에 있는 책 정보가 N개 이고 사용자의 책갈피 정보가 M개 라면 O(N*M)의 시간복잡도가 걸리게 된다. 아주 비효율적이라고 생각한다. 개발 당시에는 일단 완성 먼저 시키고 나중에 리펙토링 해야지 했는데..

DB설계를 할 때 이를 염두해 두고 했어야 했는데 그렇지 못 했고 나중에 어거지로 끼어 넣을려고 하다 보니 이렇게 된 것 같다. 소프트웨어공학 수업이 별로 중요하지 않은 것 같았는데, 프로젝트를 직접 해보니 중요성을 몸소 깨달은 것 같다. 다시 한번 Client 요구 사항 분석이 중요하다는 것을 새삼 깨닫는다.

HomeElement: ReportmMenu 컴포넌트

내 독후감 부분은 사용자가 작성한 독후감을 볼 수 있는 부분이다. 잘 보면 책 제목과 독후감 제목이 모두 있는 독후감이 있고 책 제목만 있는 독후감이 있다. 독후감 작성까지 모두 완료된 독후감이 전자 그렇지 않은 독후감이 후자이다. 왜 이렇게 한지 잘 모르겠지만 애초애 완료가 안 된 것은 UI에서 빼는 것이 나앗을 것 같다.

아쉬운 점

지금 생각하면 각 url을 다른 url로 구성하는 것이 나았을 것 같다. 왜냐하면 내 책장 화면에 있다가 다른 페이지로 이동한 다음에 뒤로가기를 눌렀을 때 이전에 보고 있던 내 책장이 나와야 하는데 탭 메뉴 defaultActiveKey 설정인 내 정보가 나오기 때문이다.

다음은 초기 개발 때 모습이다. 지금 보면 살짝 아찔하다. 누구도 사용하지 않을 것 같은 비쥬얼이다.