Winnerest 마이 페이지 구현

 

 

👆 마이 페이지 구현 움짤

 

 

 

 

 

 

Pinterest clone Project

Winnerest 

 

 

 

 

 

총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서

2주간 오로지 학습용으로 클론을 열심히 구현했는데

그 중 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡은 기록을 적어보려한다

 

그 중 마이 페이지 편

 

 

 

 

---

 

 

 

구현한 기능

 

 

 

• 내 정보 데이터 받기, 관련 보드, 보드 안의 핀(사진)
• 보드 만들기 기능

 

---

 

 

 

 

 

마이페이지 구현은 생각보다 간단하다

 

서버에서 주는 유저 정보를 받아 그대로 보여지기만 하면 됐었는데

사실 기획 초기엔 다른 유저의 페이지로 보이게끔 계획했지만

프로젝트 시간상 어쩔 수 없이 내 마이페이지만 구현하게 되었다 🥲

 

페이지에 들어가면 바로 유저 정보와 보드 정보가 뜨게끔 정보를 같이 받아오는 함수를 썼고

보드를 클릭해야 해당 핀이 나오므로 보드를 눌렀을 때

해당 board.id 값을 이용해 핀의 정보를 받아오는 함수를 썼다

 

 

 

 

 

해당 핀의 보드를 숨겨야 했으므로 useState을 써서 기본값을 false 로 주었다

첫번째 useEffect 함수로는 user 정보를 바로 받기 위해 썼는데

이때 userId, profileUrl, nickname, board(title), follower수를 받았다

 

그리고 이때 받은 borard 안의 해당 id값을 이용해 해당 핀을 불러왔다

 

 

 

이때 문제가 생겼는데

useEffect를 썼더니 무한 루프에 걸려버린 것 😂

 

분명 인자성 배열을 넣어주었는데도 이유를 몰랐다

이것 저것 건드려보다 결국  setVisible(보드가 눌렀을 때 핀이 나오게 하는 것)을 없애니 무한 루프는 풀렸는데

그렇게 하면 UI적으로 매우 불편해지므로 기능을 없앨 수는 없었다

고민 끝에 마지막이란 생각으로 기능을 Board 컨포넌트로 함수를 다 옮겼는데 실행하니 다행히 루프 오류가 뜨지 않았다!

 

하지만 set 함수 때문에 한번 빈값이 들어와 핀을 불러오는 map 함수를 자체를 못 읽는 또다른 오류가 생겼었다 😂

처음엔 객체가 중첩에 되어있다보니 그걸 까는데 문제가 생긴 줄 알았는데 Set 함수 때문이라곤 생각지 못했다

 

 

다행히 이때 팀원의 도움을 받아 옵셔널 체이닝을 써 해결할 수 있었다

 

 

👆 바로 이렇게!

 

 

 

그리고 이번에 처음 접한 옵셔널 체이닝을 mdn에 검색해 읽어보았는데

 

 

팀원의 말대로 참조가 유효한지 (빈 객체인지) 검증하지 않고 체인 내의 깊숙이 위치한 속성 값을 읽을 수 있다 한다.

 

 

보드 만들기 기능은 팀원이 만든 모달창을 받아 fetch 함수로 post로 넘겨주어 간단히 구현했다

 

 

 

 

 

---

 

 

느낀점

 

 

 

첫번째 데이터에서 받은 Id 값으로 다른 데이터를 불러오는 경험이 처음이라 많이 긴장했는데

그래도 생각보단 어렵지 않아 자신감이 많이 생긴 것 같다

 

 

통신은 늘 어렵지만 성공했을 때 쾌감이 제일 크다 느낀다 ☺️

 

 

 

 

 

👇 Winnerest 회고록

 

 

https://0119eunji.tistory.com/51

Winnerest Project 회고록