[포트폴리오-1] 자기소개 게시판
자기소개 게시판은 백엔드 서버를 따로 사용하지 않고, 구글에서 제공하는 파이어 베이스를 사용했습니다.
- 네비게이션에 자기소개게시판 메뉴를 추가했습니다.
- 메뉴를 클릭하면 자기소개게시판으로 이동합니다.
- 페이지네이션이 구현되어 있습니다.
페이지네이션은 만들어둔 컴포넌트가 있지만 파이어베이스를 사용하는 탓에 재사용이 힘들어 antdesign의 컴포넌트를 사용했습니다.
기존에 사용하던 백엔드 api는 게시글을 받아올 때 10개씩 받아오기 때문에 페이지를 변경할 때 마다 새로운 데이터를 받아와야 했습니다.
파이어베이스의 경우 getDocs를 사용하면 모든 문서를 가져오기 때문에 5개의 게시글씩 쪼개서 보여주기 위해 currentPage state값을 사용했습니다.
받아온 문서 배열을 5개씩 끊어서 컴포넌트를 생성합니다.
- 모든 정보를 입력하지 않으면 등록하기 버튼이 활성화되지 않습니다.
hobby state의 경우 데이터 관리가 편하도록 string 타입의 배열로 초기화했습니다.
입력받은 문자열을 split 메소드를 활용해 ','를 구분자로 하여 배열로 만듭니다.
만든 배열을 hobby state에 set합니다.
파이어베이스의 데이터들은 id를 사전순으로 정렬합니다.
제가 원하는 것은 시간순으로 정렬된 데이터이기 때문에 후에 정렬할 때 필요한 시간정보를 createdAt 필드에 추가해줬습니다.
파이어베이스에서 받아온 데이터들은 정렬된 뒤 props로 보내지게 됩니다.
sortList의 코드입니다.
- 수정할 내용이 하나라도 비어있으면 오류 메시지를 띄웁니다.
- 이름은 변경할 수 없도록 disabled 처리되어 있습니다.
수정 컴포넌트는 등록 컴포넌트를 재사용했습니다.
재사용을 위해 isEdit와 data를 props로 전달받습니다.
isEdit가 true라면 IntroductionNew 컴포넌트가 수정 페이지에 맞게 렌더됩니다.
data는 defaultValue를 위해 받아옵니다.
- 특별한 기능은 없습니다.
파이어베이스에서는 다시 데이터를 fetch 해오는 함수가 없기 때문에 state를 활용하여 비슷한 동작을 하게끔 구현했습니다.
게시글이 삭제되면 setDataChange 함수가 실행되어 이전 state의 반대값이 들어가게 됩니다.
dataChange의 state 값이 변경되면 useEffect가 실행되도록 의존성배열에 dataChange를 추가했습니다.
useEffect는 실행되면 파이어베이스에서 문서들을 가져옵니다.
문서들을 가져오면 data state값이 변경되기 때문에 컴포넌트들이 리렌더링되면서 새로고침된 화면을 보게됩니다.
항상 연습하던 graphql을 사용하지 않고 파이어베이스를 사용하려니 익숙하지 않아 어려운 부분이 많았습니다.
특히 타입 관련 오류가 많이 발생했는데 npm에 있는 파이어베이스 타입 라이브러리를 받아서 해결하려해도 실패했습니다.
파이어베이스 타입의 문제라기 보다 타입스크립트 숙련도 문제인 것 같아 더 공부가 필요할 것 같습니다.
(02/16 내용 추가)
파이어베이스에서 문서들의 타입은 DocumentData로 정해져있습니다.
getDocs로 받아온 데이터에서 docs부분만 빼서 사용하고 있는데, 이것은 문서들을 의미합니다.
문서들은 DocumentData타입들의 배열이기 때문에 data state의 타입을 DocumentData[]로 명시해두어 오류를 해결했습니다.
'프로젝트 > 딸기마켓' 카테고리의 다른 글
| [포트폴리오-1] 자유게시판 검색 기능 추가 (0) | 2024.02.20 |
|---|---|
| [포트폴리오-1] 자유게시판 이미지 업로드 기능 추가 (0) | 2024.02.16 |
| [포트폴리오-1] 랜덤고양이 페이지 추가 (0) | 2024.02.06 |
| [포트폴리오-1] 댓글 부분 state 리팩토링, 무한스크롤 추가 (0) | 2024.02.03 |
| [포트폴리오-1] 지금까지 정리 (0) | 2024.02.02 |
