스파르타코딩클럽 내일배움캠프 82일차

오늘 일과 간단 요약

1. 오전 스크럼
2. 검색 페이지 pagenation 구현
3. 버그 테스트
4. vercel로 배포
5. 발표 자료 준비

 

 

 

 

 

 

 

 

검색 페이지 pagenation 구현

오전 스크럼 후에 검색 페이지의 pagenation을 구현하는 걸 맡아서 했다. 사실 희현님이 이미 구현해 놓으신 코드를 search 페이지에 적용하기만 해서 코드만 공부해서 빠른 시간ㄴ 내에 구현할 수 있었다.

 

const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(12);

  const { isLoading, isError, error } = useGetCourseQuery();

  const lastPostIndex = currentPage * postsPerPage;
  const firstPostIndex = lastPostIndex - postsPerPage;
  const currentPosts = filteredList
    ? filteredList.slice(firstPostIndex, lastPostIndex)
    : null;

  const totalContents: any = filteredList?.length;

  const pages = [];
  for (let i = 1; i <= Math.ceil(totalContents / postsPerPage); i++) {
    pages.push(i);
  }

  if (isError) {
    console.log(error);
  }

 

pagenation 코드의 일부이다. postsPerPage가 한 페이지에 몇 개의 데이터를 나타낼 것인지 정해주는 거고 검색 페이지에서는 한 페이지에 12개의 글을 보여주기로 했다. 지난 프로젝트에서도 pagenation을 적용했었는데 내가 맡은 기능이 아니라서 몰랐는데 이렇게 보니 확실히 무한스크롤 구현보다는 쉬운 것 같다. 무한 스크롤은 어려웠는데....나중에 중간 발표 이후에 최적화할 2주 동안 무한 스크롤을 시도해봐야겠다. 그래도 다시 시도 해봐야지...

 

 아무튼 오전에는 pagenation을 해서 PR 날렸다. 이러면서 내가 맡지 않은 코드들을 다시 공부해볼 계기가 되었는데, 빨리 전체적인 코드 이해를 하고 싶다. 지금은 기능 구현에만 매달려서 그럴 시간이 없었는데 이제는 짬을 내서라도 봐야겠다.

 

 그렇게 함으로써 오늘 오전까지 기능 전체 진짜 완료!

 

 

 

 

 

 

vercel로 배포

 AWS 크레딧을 조원 모두가 거절당해서 배포를 어디로 할까 하다가 우선은 vercel로 배포하기로 했다. 어차피 백엔트 부분은 firebase를 쓰기 때문에 따로 배포하지 않아도 되니까 익숙한 vercel로 배포했다.

 

 그런데 배포할 때 간과한 한가지... firebase config 키를 gitignore 시켜서 깃허브에 올리지 않았는데 배포할 때 그걸 신경쓰지 않고 있다가 오류가 난 것이다. 그래서 .env 파일을 만들고 다시 배포시켰다.

 

https://daydream-sy.tistory.com/124

[React] Vercel(react) / Glitch(json-server) 배포하기

 

지난 react 프로젝트 배포할 때 났던 에러가 비슷하게 났던 것...ㅋㅋㅋㅋ 그래도 이번에는 다시 블로그 글로 돌아가서 그 방법대로 해보고 오류를 잘 해결할 수 있었다.

 

1. .env 파일 만들어서 그 안에 firebase config 키 넣기

REACT_APP_apiKey=
REACT_APP_authDomain=
REACT_APP_projectId=
REACT_APP_storageBucket=
REACT_APP_messagingSenderId=
REACT_APP_appId=
REACT_APP_measurementId=

 

2. env-cmd 설치 

 

이 이후의 자세한 방법은 위의 블로그 글에도 적혀있으니 생략.

처음에는 config 키 전체를 하나의 키로 묶었는데 그렇게 하니까 오류가 나서 좀 더 찾아보니까 firebase 키를 하나하나 설정해주어야 했었다.

 

 그래서 .env 파일 역시 gitignore에 넣어준 다음에 다시 dev에 push하고 배포하니까 해결 완료.

오늘따라 기록해놓은 나 자신이 뿌듯했었다....ㅋㅋㅋㅋ 이래서 사람들이 오류 기록을 해야 한다고 하나 보다.

 

 

 

 

 

 

 

발표 자료 준비

 이후에는 버그 테스트도 해보고 배포한 사이트에서 모든 기능이 제대로 작동하는 지 확인했다. 그런데 소셜 로그인이 안되어서 식겁해서 오류를 찾아봤다.

 

Qo {code: "auth/unauthorized-domain", message: "This domain (friendstore.netlify.app) is not autho…se console -> Auth section -> Sign in method tab

 

이런 오류가 콘솔에 찍히면서 구글, facebook 로그인이 안되던데 이건 그냥 firebase Authentication에서 승인된 도메인에 배포한 링크를 추가하면 되는 것이었다. 갑자기 오류 난 줄 알고 식겁했었는데....ㅋㅋㅋ 그냥 도메인 추가하고 나니 제대로 잘 작동되었다.

 

 그 이후부터는 서비스 아키텍처도 그려봤는데, 사실 이게 맞나? 싶다. 튜터님한테 가서 질문도 하고 설명을 듣고 왔는데도 잘 감이 안 잡히고, 구글링해봐도 전부 다 다양한 그림을 그리고 있어서 우리도 그냥 우리의 생각대로 구현했다. 내일 발표 후에 블로그에도 정리해야지.

 

 그리고 유저 플로우 작성한 이후에 바뀐 점이 너무 많아서 유저 플로우도 다시 작성했다. 뭔가 수정된 최종버전이 더 복잡해보이지만...ㅋㅋ 그래도 한 눈에 보기는 편하다.

 

아래가 우리 프로젝트의 유저 플로우

 

좀 많이 바뀌었는데 그래도 지금 기능 구현 완료하고 직접 글을 써보니까 굉장히 신기했다. 3주만에 제대로 프로젝트 한 기분이랄까....사실 최적화도 해야 하고 UI도 디자이너님이 구현하신대로 바꿔야 하지만, 그래도 중간 발표 전에 여유롭게 끝내서 다행이다.

 

 

 

 

 

 

 

 

 

짧은 일기

 내일이 중간 발표날인데, 이번에는 최종 프로젝트라 그런지 발표 자료를 만드는 것도 생각보다 오래 걸렸다. 그리고 배포하는데 오류 생겨서 그거 해결하느라 시간이 좀 걸리기도 했고. 아직 끝은 아니지만 내일 발표까지 하면 큰 산을 넘는 기분일 것 같다. 그 이후부터 2주간 더 바쁠 것 같지만 그래도 이번 주말에는 이틀 내내 쉴수 있을 것 같다 ㅋㅋㅋ

 

 발표하고 이후에 할 일들도 정리하고, 다른 코드를 이해하는 것도 해야지...끝났다고 끝난 게 아니지만, 그래도 발표 자료 준비하면서 오랜만에 컨디션이 괜찮은 하루를 보낸 것 같다. 근데 갑자기 좀 발표가 떨리는 것 같기도 하고...?ㅋㅋㅋㅋ 내일 우리조 발표도 성공적으로 끝났으면 좋겠다!