[그룹 스터디 프로젝트] 오늘 했고 할 일 (0503 ~ 0510)

슬슬 마무리하는 주간.

 

0503 (월)

1. 체중 추가 부분 논의

* useEffect 사용

 

0504 (화)

1. Redux Persistor 사용하기로 일단 결정!

* 새로 고침 할 때마다, 현재 유저 - 고양이 상태를 보관하는 것이 필요했다.

* localStorage에 따로 따로 저장해도 되겠지만, 큰 차이 없다고 판단 일단  Redux-Persistor 이용하여 저장하기로 함.

* 로그아웃할 때 purge()함수 실행하여 local Storage에 주요 정보 저장 없도록 함

 

2. 다크모드 위치 변경

* 다크모드 toggle하는 컴포넌트가 최상단 App에 위치하여 위치 바꿀 때 문제 있었음

* 현재 theme mode를 저장하는 상태를 리덕스에 새로 만들어서

* toggle할 때마다 local Storage에 저장된 상태 (이제 Redux-Persistor 사용으로 필요 없지만 추후에 전자 더 이상 사용 안할 때를 대비) & 리덕스에 저장된 상태를 모두 바꾼다

 

3. 무한스크롤 적용

* lastPostId와 size를 이용, 게시글 불러오기 창에서 무한 스크롤이 적용되도록 바꿨다.

 

4. API 연동 변경

* API 변경에 따라 앱이 연동될 수 있도록 변경하였다.

 

5. 보다 깔끔히 CSS 정리

* CSS가 이상한 부분들 고쳤음.

 

6. 그래프 리스트 로직 논의

 

7. 에러 메세지 띄우기

 

 

0505 (수)

1. 고양이 추가 / 수정 이미지

* 원래 dataURL을 백엔드에 넘겨주려 했으나 생각보다 정말, 정말 길어

* File형식으로 넘겨주기로 함!!

 

* dataURL  -> File로 변환하는 코드를 추가하여 FormData에 append하고 넘겨주는 방향으로 고침

const file = await fetch(url)
    .then(r => r.blob())
    .then(blobFile => 
    	new File([blobFile],
        "fileNameGoesHere",
        { type:"image/png"})
        )

출처 -

stackoverflow.com/questions/11876175/how-to-get-a-file-or-blob-from-an-object-url

 

* API 완성되면 츄라이 해보자.

 

2. 게시판 사진 갯수

* 게시판 사진 갯수를 임의로 3개로 제한했다! input에 따로 props를 주는 형식이 없어서, e.target.files.length가 3보다 크면 에러 메세지를 내고 요청을 보내지 않도록 설계

 

* 역시나 API 완성되면 츄라이 해볼 것!

 

3. 에러 / 컨펌 메시지

* 로그인 되지 않아 home 화면으로 갈 때는 

alert('로그인 먼저 해주시지요');

를, 고양이 정보 혹은 댓글 혹은 게시글을 삭제하려 할 때는 

if  (window.confirm("정말로 삭제하시겠어요??")) {
	// 삭제 액션 내용
    }

요렇게 코드를 써봤당!

 

 

4. 코드 클린 업

* 에러는 아니지만

* 실행 시 warning이 나는 부분 - 노란 바탕 상자 안 - 코멘트에 따라서 조금 코드 정리를 했다.

* eslint 너무 똑똑해!!  :^D말하는 대로 하면 된다 ㅎㅎ