first project 11 -2022.03.10 (Thurs)

• teammeber

  • 2 back -end
  • 2 front -end

  ---

• leader = 나 입니다 (back-end)😂 개망함

  ---

• 주제 - 음악 공유 커뮤니티 -스포티파이 (클론같지만 아닌듯한)유사 코딩.

  ---

• 현재 status

  • 배포 오류를 고침
  • 클라이언트 refactoring
  • 서버 refactoring
    

  ---

• 아쉬운점

  • 기록을 제때 안해서 기억이 가물가물하다.
    
    
  • 배포오류를 고치지 못한 나는, 마지막에는 팀원들과의 의견공유가 되지 않아 난 아무런 도움이 되지 못했다.
    
    
  • 우분투가 맥에 비해 잔오류가 많아서라는 건 좀 핑계인 것 같고, 기초가 많이 부족함을 느꼈다.

안녕하세요 Musicker 팀에서 팀장 겸 발표를 맡게된 김경연 입니다. 


발표 순서는 아래와 같이 진행하도록 하겠습니다. 

1. 서비스 소개 입니다.0

 저희 Musicker에서 진행한 프로젝트는
     고객이 좋아하는 음악을 소개하고, 공유하는 사이트 배포입니다.

코로나로 심란한 요즘 여러분의 마음을 달래줄 꽃이 되고싶었습니다. 
그래서 저희 웹애플리케이션 이름은 
     세상이  허락한 유일한 마약, 
     뮤직플라워 입니다.  
      
   
2. 프로젝트에 사용된 스택을 소개하겠습니다. 

프론트에서는 
javascript를 이용해 react 기반 정적 사이트를 만들었습니다. html 을 사용하여 브라우저에서 웹페이지의 내용을 표시하게 했으며
리액트와 styled-component ,리액트 라우터를 통해  페이지 전환을 원활하게 하였습니다. 
또한   React hooks 함수인 useState와 useEffect를 사용해 유저와 포스터의 정보를 저장 합니다. 
이를 axios 를  활용한  비동기 통신을 통해 위 데이터 활용이 편리하게 구현하였습니다. //
전반적으로 컴포넌트 단위의 코드 재사용성을 높였습니다  


다음 백엔드 에서는 
 MySQL 기반의 관계형 데이터베이스를 구축해 ,  테이블간  다대다 관계를 만들었습니다.  
 Sequelize를 통해 모델을 생성하고 Model, View, Controller를 연결하는 MVC 패턴을 이용했습니다.
 Node.js 엔진의 Express로  서버를 구현하여 데이터간  요청과 응답을 주고받습니다.

마직 배포에서는 
 aws를 이용해 웹 애플리케이션을 배포합니다.
 ec2 , code build와 s3를 사용해 서버와 클라이언트간에 배포자동화 파이프 라인을 구축했습니다. 
 
 
3. 팀원 소개
Musicker에는 
  backend 에  db 서포트 및  user controller 작성 을 담당한 김경연 님,  
  frontend 역할에 랜딩 및 로그인 페이지, 서버 클라이언트 연결 및  aws 서버 배포를  담당한  손태권님 ,
  backend 역할에  post controller 및 db 작성, aws 클라이언트 서버 배포를 담당한 양지윤님 , 
  frontend 역할에  메인페이지 , 마이페이지 수정 및 검색 기능, css, 그리고  클라이언트 정보 유지기능을 맡은   추홍욱  님으로  
  전원 36기 대표 미인 미남으로 구성되어 있습니다 :d  
   
 
4. 서비스 기능 시연 
  ( gif 에 맞춰서)
 

랜딩페이지에서는  
저희 팀 로고,
로그인 ,  
게스트 로그인,
회원가입  버튼 및 기능을 추가하였습니다.  



회원가입 시에는
닉네임
이메일
비밀번호 를 전부 기입해야 회원가입을 가능하게 구축했습니다. 
회원가입을  필수로 진행해야 모든 서비스를  정상 사용할 수 있습니다.
 





또한 메인페이즤
글쓰기 버튼을 통해 포스트를 만들 수 있으며  공유할 수 있습니다. 또
메인페이지에서는
 회원가입시 위배너에 회원의 이름이 표시됩니다.


좌측 상단의 검색창을 이용해 찾고자 하는 음악이 포함된 
다른 회원 및 본인이 공유한  포스트를 한눈에 파악할 수 있습니다. 

마이페이지에서는 
 본인이 직접 게시물을 작성해
제목, 소개글,플레이 리스트를  수정 혹은 삭제할 수 있게 구현했습니다. 
  
  
5, 문제 분석 및 차후개선책


저희 musicker에서 코드 구현시 
쿠키를 제대로 생성하지 못해 토큰값을 쿠키 헤더로 보내지 못하는 이슈와
스포티 파이 api를 로그인한 회원이 아닌 다른 유저가 접근 못하는 이슈가 있었습니다.

이를해결하기 위해
github 의 이슈태스크 카드를  적절히분배해 
프론트와 백엔드가 협업하여
서버에서 쿠키를 보내지 못하므로, 토큰을 직접 데이터 응답에 보내기로 합의하습니다.

api 이슈는 api 대신 데이터를 직접 씨더에 넣는 작업을 진행하여 데이터 베이스를 완성했습니다. . 

개선할 점으로 
프론트에서는 
새로고침시 다시 로그인해야하는 문제를 해결하고,
redux를사용해 props를 줄이고 유저 친화적인 인터페이스를 구현하도록 노력하겠습니다.
백앤드에선
https 프로토콜을 사용하여 보안 문제를 강화하고, 
또여한 기능을 추가하여 좋아요, 댓글, 음악재생기능을 넣어 풍부한 서비스를 제공하도록 노력하겠습니다. 

• 개선 점

1. 완벽한 발표라도 하자..