[항해99] 미니 프로젝트: Social Study Network (SSN: 쓴)

로그인 후 메인페이지

 

프로젝트: Social Study Network (SSN: 쓴)    *프론트엔드와 첫 협업프로젝트

설명: 팀원들, 학교친구들과 공부시간을 공유하며 응원할 수 있는 소셜네트워크 사이트입니다.

제작: 2022.04.08~2022.04.14

 

시연영상: https://youtu.be/ZAMqhx5jCNU

깃허브: https://github.com/ymkwon3/ssn (프론트엔드) / https://github.com/moonhjang/miniproject_back (백엔드)

노션: https://www.notion.so/d556601ee2de4629a9a1947675f23dd6

 

 

 

---

와이어프레임

 

 

---

사용 기술

• Server: AWS EC2 (Ubuntu 18.04 LTS)
• Framework: Express (Node.js)
• Database: MongoDB (Mongoose)
• JWT (Json Web Token)
• Crypto-js
• CORS
• Front-end: React

 

---

핵심 기능

• 로그인/ 회원가입 페이지
  • 아이디 패쓰원드 입력 가능
  • 로그인 시, 토큰전달 (모든페이지에서 해당 토큰확인 기능)
  • 빈칸 및 아이디 형식(4자이상, 대소문자, 숫자, 특수문자(!@#"-_)) 확인 가능
  • 회원가입시 아이디/닉네임 중복검사
  • 비밀번호 재확인 일치 확인 가능
• 메인페이지
  • 해당 유저와 친구리스트 조회
  • 공부시간 시작/정지 버튼
  • 총 공부시간 조회가능
  • 친구 추가가능
  • 친구와 공부시간 순위 확인가능
  • 친구의 공부시간 및 접속 확인 가능
• 방명록 페이지
  • 등록된 친구 방명록에 코멘트 조회, 작성 가능
  • 방명록 주인과 방명록 작성자만 삭제 가능
  • 본인 방명록 페이지에서는 상태메세지 수정 가능

 

---

Trouble Shooting   

▶ Auth-Middleware에 대해 프론트 업무에 대한 이해부족했다.

→ 개인프로젝트 진행시, 로그인 실행시 로그인인증 확인API도 함께 확인되었다. 그때, 로컬스토리지에 유저 정보를 넣어두었다. 하지만 프론트에서 로그인인증 확인하는 방법이 따로 있기 때문에 굳이 필요없어 제외를 했다. 저장된 토큰으로 모든페이지의 로그인 인증확인하는 방법을 동일하여 문제없이 작동되었다. 

 

▶ 로컬에 있는 MongoDB를 사용하고자 했지만, 로컬DB의 내용을 확인하려고 하니 배포과정에서 오류가 발생하였다. 

→ 로컬DB를 사용하지 않고 MongoDB클라우드에 직접 연결하여 실행하였다. 

 

▶ _id를 commentid 로 사용하게 되면서, _id를 백엔드에서 object에서 string으로 객체 type을 변경해야하는 점에서 어려웠다.

→ Comment 스키마에서 _id를 commentid로 만들어 string으로 변경하여 전달하였다. 

 

 

---

개인회고

첫 프론트엔드와의 협력프로젝트였다. 프론트업무에 대한 지식이 부족했기에 표현방식과 이해하는 방식이 굉장히 달랐다. 프로젝트 중반부터는 서로의 업무를 이해하고 나니 생각보다 프로젝트가 문제없이 풀렸다. 

 

개인 프로젝트시에는 내 작업을 웹사이트에서 확인하는 것이 편했는데, 협력할 때는 확인할 수 없는 뷰가 없어서 불편했다. 썬더 클라이언트가 그 역할을 대신했지만, 회원가입이나 로그인 시 전달되는 정보를 직접작성해야하는 번거로웠지만 잘 적응 할 수 있었다. 특히, 모든페이지를 auth-middleware로 연결 후에는 토큰이 없기에 썬더 클라이언트를 사용할 수 없었다. (이후 알아보니, 헤더에 토큰을 넣어 확인해볼수 있다는 것을 알게되었다.) 

 

협력했던 프론트 분이 굉장히 잘하시던 분이라, 밴엔드로서 굉장히 도움도 많이 받았고 수월하게 프로젝트를 진행할 수 있었다. 프로젝트 진행시, 염려했던 CORS 이슈나 auth-middleware(인증미들웨어)에 대한 이슈는 거의 없었다. 배포 초반, 인증 미들웨어에 대한 약간의 이슈가 있었으나 콘솔찍으면서 전달하고 전달받는 데이터를 확인하니 큰 이슈없이 해결되었다.

 

굉장히 만족스러웠던 점은 모든 기능들이 문제없이 잘 작동했고, 모든 팀원들 또한 만족스럽게 끝낸 프로젝트라서 더 좋았다. 우리 팀원 모두 흥해라!