레오니드 팬 페이지 만들기(2)
홈과 팀 페이지를 따로 만들려고 했는데 아무리 생각해도 아이디어가 없어서 그냥 홈을 없앴다
팀 페이지=홈이자 메인... 인 걸로
공식 소개 멘트 + 메인 스토리 유튜브 영상 + 하코(유닛 이벤트 스토리) 배너 + 유닛 이벤트곡
그냥 아카이브 느낌
스토리는 따로 공식 영상이 없는 걸로 알아서 그냥 배너만 박았고 노래는 각 카드를 눌러서 원곡 유튜브 링크로 이동할 수 있다
별거 없는 만큼 금방 만들었는데 이 페이지의 개큰문제는...... 마지막에 호스팅할 때 발생하게 되는데
후술..
멤버 페이지
코멘트 부분 추가
내용은 개인 자기소개+메인 스토리에서 긁어온 문장 대여섯개 정도가 들어있고, 리렌더링할 때마다 랜덤으로 3개가 출력된다.
시험삼아 만들었을 때는 폴더 안에 데이터를 만들어서 넣었고, 거기서 임포트해서 불러오는 식으로 제작했다. 그런데 저 옆에 보이듯 좋아요 기능을 넣고 싶었다.
사용자가 하트를 누르면
이렇게 프로필 란에서 가장 최근에 하트를 누른 코멘트를 보여줄 수 있게..
그럼 이 데이터는 각각 유저 정보를 가지고 있어야 한다.
그러려면 우째야 하나.... 고민을 했는데
파이어베이스의 데이터베이스 안에 코멘트 데이터를 저장해두고, 각 코멘트에 id를 부여해서 사용자가 하트를 찍은 코멘트를 식별할 수 있게 만들었다.
수작업으로 넣었다
처음에는 캐릭터별로 컬렉션을 분리하려 했으나... 그럼 프로필 페이지에서 좋아요한 코멘트를 불러오기 위해 컬렉션 네개를 전부 따로 탐색해야 할 것 같았다. 그래서 하나에 다 때려박았다
1번 캐릭터의 코멘트는 1-n, 2번 캐릭터의 코멘트는 2-n ... 과 같은 식으로 각 코멘트에 id를 부여했다.
매번 랜덤한 인덱스 3개를 뽑아주기 위한 getRandom함수
clearArr은 배열의 기존 내용을 지우는 함수인데, 이걸 만든 이유는 그냥 useEffect를 사용했을 때 자꾸 실행이 중복되어서 일어나거나 원하는대로 리렌더링이 안 되는 문제가 생겨서... 처음에는 아예 데이터를 폴더 안에도 따로 남겨놓고, 그 데이터로 첫 번째 렌더링 시 대사 출력을 한 뒤, 리프레시를 통한 다음 리렌더링 때 기존 대사를 싹 밀고 데이터베이스에 저장해둔 데이터를 불러와 저장하는 식으로 진행해서였다.
결론적으로는 문제를 해결했고 저렇게 이상하게 하지 않게 되어서... 딱히 안 써도 되는 함수가 되긴 했다
그런데 마지막에 빌드할 때 의외의 쓸모를 발견함 이것도 후술
대사는 컴포넌트가 리렌더링될 때마다 다른 랜덤값을 가져와야 하므로 리프레시 여부를 캐치하는 변수 refresh를 만들고, useEffect를 사용해 refresh가 변경될 때마다 새 코멘트를 fetch해줬다.
refresh는 화면에 보이는 리프레시 버튼을 누를 때마다 값이 올라간다.
화면이 끽해야 네개니까 결국 멤버 페이지에서 라우팅은 따로 하지 않았다... 일일이 수정하는 건 좀 귀찮았지만 숫자만 바꾸면 되니까...
아까 말한 clearArr 함수가 저기 setComments에 들어가있는 걸 볼 수 있는데, 원래는 없던 부분이었다. 그런데 빌드를 하니까 선언해놓고 사용하지 않은 함수가 있으면 안 된다고 하길래... 이래저래 건드려보다 모르겠어서 그냥 셋코멘트를 써버리자. 싶어서 저런 식으로 넣어줬다.
랜덤으로 가져온 인덱스와 데이터베이스에서 가져온 코멘트를 사용해 랜덤 포스트를 출력해준다.
그리고 애를 먹은 좋아요 기능...
사실 지금 완성해둔 것도 이런 방향을 원한 건 아니었다. 좋아요를 누른 포스트를 중복으로 저장하고 출력할 수 있게 했어야 했는데 어떤 식으로 처리를 해야 할지 감이 안 와서 결국 마지막으로 좋아요를 누른 것만 저장하게 되었다. (ㅜㅜ)
어 지금보니 any로 임시방편 해놓고 수정을 안 했네...
아무튼... 하트를 눌렀을 때 스타일이 변하는 건 클래스 토글을 사용해 적용했고
내가 해야 하는 건 하트 누른 포스트의 cid를 알아내는 것
아까 만든 것처럼 각 Post는 각 코멘트에 해당하는 cid를 id로 갖고 있다. Post 컴포넌트는 선택한 하트 버튼의 부모 요소의 부모 요소이므로 parentElement를 두 번 써서 타겟팅해줬다.
그리고 데이터베이스에 liked-comments라는 컬렉션을 만들어두고, 하트를 누를 때 여기에 문서가 추가되게 한다. 각 문서의 이름은 해당 유저의 uid이고, 내용은 누른 코멘트의 cid와 자신의 userId가 들어간다.
중복 저장을 하지 못한 이유는 문서이름을 uid로 해버렸기에 새 코멘트에 하트를 찍으면 새 문서가 생기는 게 아닌, 원래 문서의 cid가 바뀌어버린다.
이 부분은 조금 더 고민해보도록 하자...
잘 저장되는 것을 확인했으면 이제 해야 하는 건 프로필 페이지에서 불러오기.
간단한 타이틀과 메시지 포맷을 출력한다. 스타일은 여태껏 쓴 것들과 비슷하게 만져주고, 젤 중요한 메시지 내용이 올바르게 잘 불러와지는지 확인하자
불러오는 방식은 멤버 페이지에서 했던 것과 동일하다. 복붙함
불러오는 컬렉션만 liked-comments로 바꿔주고, 해당 유저 id와 같은 이름을 가지는 문서에서 cid를 가져와서 세팅.
좋아요 찍은 코멘트의 cid를 알게 됐으면, 이제 그 cid에 해당하는 코멘트 내용을 불러와야 하니 새 쿼리를 만들었다. 세팅된 cid와 같은 cid를 가진 코멘트를 가져와 세팅. 잘 불러와지는 것을 볼 수 있었다
그리고 하나 더... 해당 코멘트를 한 사람이 누구인지도 알아내야 했다. 코멘트 옆에 캐릭터 사진을 같이 띄울 거니까
이건 내가 각 cid를, 멤버 1이 한 것은 1-n, 2가 한 것은 2-n... 과 같은 식으로 부여해줬기에 그냥 가져온 cid의 첫 숫자가 무엇인지만 알면 쉽게 구분해낼 수 있었다.
다시 멤버 페이지에 들어가 다른 대사에 하트를 찍고 프로필로 돌아오면 잘 적용되는 것, 로그아웃 후 다른 계정으로 들어가면 하트찍은 대사가 해당 계정에서 찍은 것으로 바뀌는 것 등 잘 작동하는 것을 확인할 수 있었다.
아무 대사에도 하트를 찍지 않으면 none이 출력된다.
이렇게 하면 페이지는 대략 완성이다. 넣고 싶은 게 처음부터 딱히 생각이 안 났던 것도 있고 더 하는 건 욕심 같기도 하고... 뭐가 더 떠오르면 추가해도 되니까 일단 마무리를 지었다.
다했으면 할것은 업로드 앤나 배포
파이어베이스 호스팅을 이용해야지
firebase init 하고 어쩌고 저쩌고 뭐시기 저시깽이 오케이 호스팅 완료 땡큐 실행!
?
아구라치지마진짜
엑박의 신 엑박의 악마 엑박의
구글링을 매우 했다
일단 내가 에셋들을 매우 지저분하게 작성했음은.... 코딩당시에도 알고는 있었다 파일을 퍼블릭에 넣었다가 src에 넣었다가 에휴 (ㅜ) 이래서 경험을 해봐야 아는 거지
아무튼 구글링으로 알아낸 건 리액트에서 public 폴더 외의 파일 경로를 사용하려면 import를 해줘야 한다는 것이었다.
음 그럼 임포트 다 해주면 되지
...
근데 메인화면에 저 수많은 엑박들을 일일이 한줄씩 임포트를 해주라고
그래 한다고 쳐
노가다는 안 어려워
...그럼 이 부분은 어떻게 고치지
깨작깨작 건드렸으나 해결하지 못하고 나가떨어졌다
파이어베이스 호스팅의 문제인가(그럴 리가 없는데) 희망회로를 돌리며 버셀 호스팅도 해봤으나 똑같았다
건드릴수록 코드가 나를 건드리면. 죽어버릴거야 외치는 것이 들렸다
이래서 코드에 주석 다는 습관이 필요하구나 느꼈다
그래서 다시 또 구글링...
알게 된 사실
public 폴더에 넣으면 임포트를 사용하지 않아도 된다고 한다(!) 그리고 public 폴더에 넣은 에셋들은 앞에 ../../public 이딴거 다 생략하고 그냥 퍼블릭 안에서의 경로를 적어야 하는 거랜다...
그래서 사진들을 전부 퍼블릭 폴더에 옮겨주고 경로를 일일이 수정해줬더니! 사진이 돌아왔다. 다행 🥲
그러나 파이어베이스 호스팅을 위해 빌드를 실행했을 때.... 자꾸 뭐시깽이 파일의 용량이 어쩌구 하면서 오류가 나는 것..... 아 진짜 왜지 이건 (ㅜ)
그래서 그냥 때려치고 버셀로 배포했다. love you vercel 근데 이것도 여담이 있는게 버셀 배포하니까 새로고침 할때마다 404가 떴다. 아니 왜 내가 파이어베이스 재료 써놓고 다른데서 호스팅해서 화났니? 난리를 쳤는데 이것 역시 구글링이 해결해줬다.
루트경로에 vercel.json 파일 만들고
이거 넣으니까 해결됐다.
아무튼 이렇게 간단한 팬 sns 페이지를 만들어봤다
급발진 제작답게 실질적인 시간은 하루에서 이틀쯤 걸린 듯하다. 쓸데없는 오류를 잡는 데 항상 시간이 많이 걸려서 좀 슬프다
그래도 재밌는 경험이었다! 다음번엔 좀더 고능한 무언가를 만들어보는 걸루
완성본
회원가입 해보실래요?
프로필 사진도 설정해보고 팬코멘트도 남겨보아요
여러분의 데이터는 아무곳에도 쓰이지 않습니다
https://leoneedsns.vercel.app/