오늘은 상세페이지 기능을 마무리짓고싶다.
상세페이지에서 구현할 것
전에 만든 방명록보다 퀄리티를 올리는것이 목표이다보니
다른 여러 기능들도 넣어주면 좋을것 같다 라고 생각을하여
이번에는 댓글기능을 일단 추가해보려한다.
그 전에 일단 화면을 한번 살펴보면
이정도만 구현을해두었다.
기능의 부분은 아직 넣어주진않았으나 오늘 다 마무리짓는게 목표다.
- 제일 먼저 구현해볼건 댓글기능인데
댓글기능을 구현해보려하니 지금의 상황은 이렇다.
- 상세페이지에 들어간다(그 아이템의 아이디값으로찾는다)
- 그 페이지만의 댓글을 가져야하고 그 댓글아이템들로 반복문돌려야한다.
근데 데이터베이스에 댓글을 저장해야하는데 어떻게 이 페이지에 작성한 댓글만 딱 고를 수 있을까? 하고 생각해봤는데
파이어베이스 데이터베이스에 comment 라는 컬렉션을 만들고
그 안에 문서명을 현재 상세페이지의 아이디값과 똑같이 지어준다면 나중에 찾아올 때 편하지않을까?
지금 생각난 방법은 이방법뿐이니 한번 시도해보기로했다.
테스트 방법으로 comment라는 컬렉션에 같은 아이디값으로 문서만들어서 댓글을 넣어서 가져와보면 알 수 있지않을까?
현재 첫번째 게시글의 아이디값을 찾아오고
이렇게 만들어줬는데 이 방법이 아닌듯하다.. 원하는 모양새가 아니었다.
한번 또 데이터베이스를 한참 보다가 문서 안에서도 또 컬렉션 시작 버튼이있길래 한번 눌러봤더니
문서안에 또 컬렉션을 만들 수 있었다.
이걸로 뭐 어떻게 할 수 있지 않을까??
코드부터 바로 짜보기로했다. 글 작성 버튼의 기능을 만들어봤는데
보다시피 데이터베이스의 post에서 url과 같은 id값인 문서를찾고 그 안에서 또 comment라는 컬렉션을 만들어주고 그 안에 데이터를 추가해줘봤다.
그랬더니 이런모습을 띄게됐는데 이걸 사용할 수 있을까?
이것도 궁금하면 바로 실행해보면 되는거다. 안되면 에러고치면되는거고.
useEffect안에서 컬렉션 찾고 문서 찾고 그안에서 또 컬렉션찾아서
그 컬렉션 안에 든 내용물을 꺼내봤더니
데이터출력이 잘 됐다...!!
나는 이제 이걸가지고 댓글창을 구현해내면 되는것이다.
생각보다 금방해결이된듯한데 계속 해보면서 에러가 안나길바래야지.
위에서 데이터를 받아온걸 테스트해본결과로
이정도면 만족스럽다.
댓글을 작성할 때 보낼 데이터는 조금 더 늘었다.
날짜에 관한 데이터도 있어야 최신순으로 정렬이 가능할 듯 하여
넣어줬다.
결과는 댓글작성이 잘 되고있다. 디자인이 좀 구린건 좀 고쳐줘야겠고 조금 더 기능을 넣어줘야하는데 댓글 삭제와 수정도 필요할거같다.
- 현재의 결론은 댓글을 구현하고싶다면 데이터베이스의 그 아이템 문서 안에 컬렉션을 하나 더 만들면 된다.
더 좋은 방법이 있을 수 있겠지만 일단은 이걸로 만족한다.
댓글 삭제와 수정은 글쓴 본인만 할 수 있어야한다.
버튼을 본인에게만하고 클릭 이벤트도 uid가같은 유저만 되게끔 만들어줘야할것이다.
일단 댓글의 수정버튼과 삭제버튼을
생성해주었고 기능은 넣지않았다.
기능을 넣기 전 uid가 같을 때 오른쪽 점3개인 옵션? 버튼이 나타나게끔 해주어야할것같다.
- 그 전에 테스트하다가 에러를 발견했다.
아~ 잘 풀린다 생각했는데 에러가 또 발생했다.
무슨 에러였냐면 댓글에 하나의 아이디로만 작성을 해두어서 uid가같을 때 점이 보이게끔 만드는걸 하기에 적합하지않아
새로 아이디를 만들고 회원가입을 하려는 중 에러를 찾게됐다.
에러가 발생한 이유는 회원가입에서 회원가입을 시키는 버튼을 눌렀을 때 함수 분리해준 스토리지에 업로드하는 함수가 실행이 되고 그 후에 url을 사용하는 식인데
여기서 유저가 이미지를 업로드 할 때 회원가입의 조건문과
이미지없이 회원가입하려는 조건문으로 나누어줬는데
업로드함수가 그냥 버튼함수에 존재하기때문에
이미지없이 회원가입 하려할 때도 이미지업로드 함수를 실행해서 에러가 나는거였다.
이 에러를 고치려고 한 여섯시간은 쓴거같다. ㅋㅋ
여튼 에러를 고쳐줬는데 너무 간단하게 고쳐져서 어이가없었다.
뭐.. 내가 아직 Promise에 익숙하지않아서 그런거겠지만
구글링 좀 해보고 나서 고쳤다.
(처음엔 문제를 정확히 인식을못해서 오래걸렸던거였다.)
에러 고친걸 설명해보자면 일단 코드를 살펴보며 설명해보겠다.
이 조건문은 위에 닉네임칸이 1칸이하일 때 에러를 띄워주고
1칸 이상이면 회원가입 진행하는데 여기서 문제가 발생했었다.
auth.create어쩌구 하는 파이어베이스 회원가입 함수가있는데 함수안에서 await을 사용하려니 에러가났다.
왜?
함수에도 async 달아줬는데 왜 에러가? 이생각만 계속했다가
조건문 안에서는 안되는건가? 이생각을하고
조건문 안에 promise... 등등 뭐 .. 이상한것만 계속 검색해줬는데
createAccount 함수 안에 회원가입 함수 안에서 await를 해주는거라
async를 받질못하는거같았다. (받는다고 표현을해야하나?)
여튼 회원가입 함수 안에서 작성중이라 인식이 안된다는 결론을얻었다.
그래서 함수안에 async 라고 검색을 해봤는데
https://ko.javascript.info/task/async-from-regular
이런 좋은 예시를 얻게되어 해결하게됐다.
내가 만들어 둔 이미지업로드도 Promise에 resolve값으로 url을 뱉는건데 url만 필요한것이니
위 처럼 스토리지 업로드 성공하면 url을 받기로했더니 해결됐다.
이것에 대해는 완벽히 이해가 되진않지만 나중에 사용하려면 또 사용해볼 수 있을거같다. (이론에는 너무 약하다)
나는 Promise에 대해 너무 아는게없다.
좀 더 공부를 해야한다는걸 뼈저리게느꼈다.
회원가입 테스트해보니 정상적으로 작동하니 다시 상세페이지를 마무리지어주면 될것같다.
(그 전에 파이어베이스에서 유저정보좀 다 지워야겠다.
이거 고치면서 회원가입만 40번한거같다.)
- 에러도 고쳤으니 다시 상세페이지로
이제 아이디 두개로 댓글을 작성해두었는데
현재 들어와있는 아이디는 123이다. 그러면 주인장의 댓글에
오른쪽 점은 보이지않아야한다. uid를 사용하면 되지않을까싶다.
잘 나온다. 데이터베이스의 uid와 로그인한 uid가 같은지 확인해서 출력해봤더니
로그인 된 아이디의 댓글만 나타나는걸 볼 수 있다.
이 포스팅은 여기서 마무리
중간중간 너무 많이 쉬기도했고 글의 흐름이 이상해지는듯하여 다음포스팅에서 새롭게 다시 작성해야겠음.
