1. 포기하지않으면 된다🏃‍‼

이번주는 첫 프론트와 백엔드가 협업하여 즐겨 듣는 노래를 서로에게 공유하는 웹서비스 미니프로젝트 진행하였습니다.

• 1일차 : 처음으로 프론트와 백엔드가 마주앉아 주제를 정하고 와이어프레임을 짜고 API를 작성 후 각자 맡아서 진행할 부분을 정하였습니다.
  저는 게시글 작성페이지와 상세페이지를 맡아 진행하기로하였고, 각자 맡은 작업을 시작전에 스켈레톤 코드를 git gub로 공유하여 시작하였습니다.

• 2일차 : 우선 게시글 작성 페이지와, 상세페이지를 완성하였고 axios로 서버와 연결하고 리덕스로 전역 상태관리를 하여야했는데 리덕스의 이해도가 부족하다보니 뷰만 완성하고 진행이 안되었습니다. 백엔드 분들이 어느정도 서버를 마무리하고 아는 부분에 대해서 최대한 도와주시려 했으나 기본적으로 내가 이해를 못하고있으니 도움을 받기도 힘들었습니다 (여기서부터 지옥시작이었다..)

• 3~4일차 : 4일차 오후까지 계속 공부하여 리덕스의 흐름을 어느정도 이해 하였으나, 막상 사용하려하니 어떻게 사용해야될지 감이 오지않았습니다. 계속 막막해 하던 때에 항해 매니저님께서 이전 기수 튜터님의 리덕스 사용법에 대해 조언을 들을 수 있는 자리를 마련해 주셨습니다.
  약 1시간30분정도의 시간동안 리덕스 활용하는 법에 대해 들었고, 드디어 !! 어떻게 활용할지 이해하게 되었습니다.

  Create - 작성페이지에서 입력받은 데이터를 미들웨어(thunk)를 사용하여 받은 후,
  axios를 통해 서버로 넘겨 준 후 다시 넘겨받은 데이터(res)를 action과 action 생성함수를 통해 리듀서로 넘겨주고, 리듀서에서 produce를 사용해 불변성 유지를 한 후 initialState에 저장 시켰습니다.
  Read - 메인 페이지에서 useEffect를 사용하여 메인페이지에 들어오자 마자 미들웨어getPostDB를 실행하여 데이터를 받아왔습니다. 이때 의존성 배열에 대해서 몰라서 무한루프에 걸렸었는데 아래 참고자료를 보고 해결하였습니다.
  https://yohanpro.com/posts/react/use-effect (useEffect 참고자료)
  그리고 useSelector를 이용하여 initialState의 데이터를 받아와, 메인페이지에 뿌려지는 카드에 map함수를 이용하여 key값과 데이터를 전달하였습니다.(key값은 서버에서 전달받은 받은 id값을 주었습니다.)
  상세페이지는 useSelector로 전체데이터를 받아온 후 useParams를 이용하여 해당 되는 페이지데이터를 가져와 나타내 주었습니다.
  Update - 수정페이지도 상세페이지와 마찬가지로 useSelector를 이용하여 전체 데이터를 가져온 후 useParams로 해당 포스트의 id값과 가져온 전체데이터의 id값이 일치하는 데이터를 find함수를 이용하여 뽑아 내었습니다. 그리고 useState의 초기설정 값에 뽑아온 데이터를 넣어주어 해결하였습니다.
  Delete - 삭제는 해당 페이지의 id를 서버에 넘겨주어 삭제 후 메인페이지로 돌아가게 하여 해결하였습니다.

• 5~6일차 : 마무리 단계에 들어서 전체적인 css를 다시 손보고 기능의 오류가 없는지 확인 후 build하여 배포하였습니다.

2. 프로젝트를 하면서 느낀점🚩

1. 협업에 있어서 원활한 소통으로 팀원들의 고민을 함께 해결해 나가는 모습이 중요하다는 것을 느꼈습니다. 제가 4일차까지 리덕스에서 허덕이고 있을 때, 저희팀 백엔드 영우님께서 늦은 새벽까지 1:1로 붙어서 상세하게 아는 부분에서 가르쳐주시고 도움을 주신 덕분에 해내지 못할 것 같던 문제를 끝까지 해결하고 프로젝트를 마칠 수 있었습니다.( 다른 분들도 전부 다 도와주셨습니다:) )
   앞으로는 제가 다른분들에게 든든한 서포터가 되기위해 리액트를 다루는 기술을 더 열심히 공부해야겠다는 생각이 드는 시간이었습니다.

2. Git 사용법 숙지를 정말 열심히 해야겠다고 느꼈습니다. 각자의 작업을 git으로 합쳐야 되는데 기본적인 add commit push pull 밖에 모르니 전혀 도움이 안되었습니다. 다음주 클론코딩 프로젝트 때는 꼭 git을 사용하여 버전관리를 해야겠습니다.

3. 이번주 프로젝트

https://github.com/Music-Recommendation-List/MRL-FE (git hub 주소)

MRL(Music Recommended List) 프론트엔드

📰 상세 페이지

• 로고
  
• 로그인 페이지
  
• 회원가입 페이지
  
• 메인페이지
  

💻 웹 사이트

http://3.34.44.44/

🎬 실행화면

유튜브 링크 : https://www.youtube.com/watch?v=P5zLhz87kGE&ab_channel=%EC%9E%A5%EC%9E%AC%EC%9B%90

⚙️ 기술 스택 및 툴

🎧 MRL(Music Recommended List)소개

즐겨 듣는 노래를 서로에게 공유하는 웹 서비스
노래의 카테고리를 통해 자신에게 가장 필요한 노래를 추천 받아 볼 수 있는 기능 사용
다른 사람의 애창곡을 확인하고 댓글 기능 사용

🙋 팀원

Front-end(React): 류승환, 김기철, 박새봄
Back-end(Node.js): 장재원, 김영우, 임성찬
🌎 API
https://www.notion.so/5e1322440c5049f1806615dd1ee1cf4c?v=8bce2554108043539cc4bd58852e0f37

⏳ 팀 프로젝트 기간

2021.10.11 ~ 2021.10.16(6일)
✨ 주요 기능
1. 로그인

• 계정의 비밀번호 bcrypt로 사용하여 암호화 저장을 합니다.
• JWT 토큰을 사용합니다.
• joi 라이브러리를 이용해서 사용자의 정규식 표현을 지향했습니다.

2. 음악 리스트 조회

• 사용자가 카테고리를 선택하여 추천 음악을 공유합니다.
• 유튜브 썸네일을 자동으로 받아와 보여줍니다.
• 자신이 현재 원하는 카테고리를 선택하여 그에 해당하는 음악 리스트를 들을 수 있습니다.
• 음악 상세 페이지
• 댓글을 작성 할 수 있습니다.
• 다른 사람이 추천한 음악을 바로 재생하여 볼 수 있습니다.(유튜브 연동)