[Team-18][FE] Sonya

[onlinekkabchi]

1. 한 일

• 로그인 페이지 구현
• 이슈 리스트 페이지에서 데이터 받아와서 테이블 랜더링하기.

(현재까지 만들어진) 로그인창

글자가 비처럼 내려오고 있습니다. Matrix Rain Effect로 검색해 레퍼런스를 찾았습니다.

원래 의도했던 것은 아래 스크린샷과 같은 매트릭스같은 형태였으나 내려오는 글자줄을 따로 관리해야하는 부분에서 어려움을 겪고 있습니다. 프로젝트가 끝나고 다시 손대볼 예정입니다!

리액트에서 데이터를 받아오는 속도와 랜더링의 문제 해결

데이터를 받아오는 동안 간단한 로딩창이 뜨도록 하였습니다. 데이터가 도착하지 않은 상태에서 랜더링하면 청순한 백지만 화면에 나타날 뿐...^^.... 랜더링을 지연시키는 코드와 로딩창의 모습은 아래 스크린샷을 참고하세요.

const [isLoading, setIsLoading] = React.useState(false);

// 사이의 코드 생략...

if (!isLoading) {
        return (
            <div>
                Please wait some time~ 리액트가 데이터 받아오는 속도랑
                랜더링하는 속도랑 달라서 시간차 공격 들어갑니다~
            </div>
        );
    }

    if (isLoading) {
        return (
            <>
                <TableContainer
                    component={Paper}
                    sx={{
                        padding: 2,
                        maxWidth: 600 

// 이하 코드 생략...

로딩창

데이터 도착 후 데이터를 뿌린 이슈리스트를 출력한 결과. MUI에서 제공하는 Table 템플릿을 수정해서 사용하였습니다. 디자인에 크게 손을 대지 않고 사용하면 이렇게 템플릿을 가져다가 쓰는 것이 효율적이지만 디자인을 수정하고싶으면 차라리 바닥부터 시작하는게 낫다는 것을 배웠구요^^! 다른 사람의 코드(MUI제공 템플릿)를 수정해서 쓰는건 정말 호락호락 하지않네여!

2. 앞으로 할 일..

• 이슈 리스트 페이지의 모달창 만들기.
• 개인프로젝트를 위해 OAuth 더 공부하기 (가능하면 카카오로그인에 손대고싶은데 잘 모르겟읍니다... 능력밖...?)
• 프로젝트 끝나고 마지막 회고쓰기.

어텀 좋은 리뷰 많이 남겨주셨는데 다 반영을 못하는 이런 부족한 나~ 시간들여서 공부하도록 하겠읍니다...

[onlinekkabchi]

GitHub Desktop에서 충돌해결하려는데 충돌해결부분이 안나오네요.. 여기서도 해결이 잘 안되고ㅠㅠ.... 코드리뷰는 못받더라도 일단 무엇을 했는지는 보고하려고 올립니다..

[deprecated-hongbiii]

쏘냐 안녕하세요!
리뷰는 내일 중으로 남길게요 🙏
죄송합니다 감사합니다 :)

[onlinekkabchi]

쏘냐 안녕하세요! 리뷰는 내일 중으로 남길게요 🙏 죄송합니다 감사합니다 :)

제발 천천히 남겨주실래요? 어차피 다 반영 못하거든요?

[deprecated-hongbiii]

쏘냐 안녕하세요!
이 PR에 대한 리뷰를 제가 #224 여기에 남겼네요. :)
코드에서 특별히 피드백드릴만한 부분이 없어서 코멘트 하나 남겨놨으니 참고 부탁드려요! 😀
3주차 작업물도 PR 올려주시면 리뷰 남기도록 하겠습니다.

6개월동안 정말 고생 많으셨어요 🥳
앞으로도 화이팅화이팅!

[deprecated-hongbiii]

이 PR에 충돌이 있어서 머지가 안 되니 충돌 해결부터 한 번 해보셔용!