[그룹 스터디 프로젝트] 여섯 번째 미팅 - 구현 Still In Progress(0425)

회의록

[Front-end]
HS님
진행상황 공유

• 리액트 컴포넌트 스타일링 방식 변경: Module CSS → Styled Component
• Styled Component 가 Dark mode 구현에 필수적이기 때문이다.
• 통계 화면 구현
• 일반 회원가입과 로그인이 불안정했는데 HR님이 도와주셔서 잘 동작하게 변경하였다.

문제점

• 소셜 회원가입 / 로그인 시 500에러가 난다. ⇒ 백엔드 팀에서 확인 필요
• Chrome에서 서버 접근 시 CORS 에러가 여전이 발생한다.

차후 계획

• 체중 관리에 Redux 적용
• 소셜 로그인 시 어떤 정보를 백엔드에 넘겨줘야 할지 확인필요

HR님

진행상황 공유

• 변경된 API에 따라 고양이 관리 기능 변경

• cf) 이미 만들어져 있는 데이터는 불러올 수가 없다. 로그인 기능 구현 이전에 만든 데이터이기 때문

• 이에 따라 데이터 생성문을 변경할 필요가 있다.
• 혹은 아예 DB나 서버를 AWS에 배포해서 이를 사용하도록 만들면 프론트팀이 로컬에서 직접 서버를 돌리지 않아도 괜찮다.

• 게시판 기능
  - 게시글 추가 시 이미지를 crop해주는 라이브러리를 적용하였다.
  - 이미지를 여러 개 추가할 수 있다.
  - 서버에게 요청을 보낼 때는 게시글 내용과 복수의 이미지까지 하나의 FormData안에 넣어 보낼 것이다.

문제점

• 사이드바: 집사설정, 문의하기, 로그아웃 버튼을 각각 둘 지, 혹은 "설정" 버튼 하나로 뺄 지에 대해서는 아직 고민이 필요하다.
• 아이콘: 현재 font-awsome 을 쓰는데 이쁜 아이콘이 없어서 후에 다른 라이브러리를 찾아볼 예정이다.

차후계획

• 프론트는 다음주부터 AWS 적용할 것

[Back-end]
HY님

• 진행상황 공유
• 로그인 기능 구현 완료
  - 토큰에 email과 권한 정보뿐만 아니라 추가적인 정보(닉네임, 유저 시퀀스)도 추가하였다.
  - 이를 통해 게시글, 고양이 등 다양한 기능에서 유저 시퀀스를 사용할 수 있게 되었다. 따라서 기존에 유저 시퀀스를 직접 파라미터로 넘겨주는 부분을 토큰에서 추출해서 사용하도록 변경하였다.

• 댓글 기능 구현 완료
  - 댓글은 일단 GET /projects/{id}, GET /comments/{postId} 를 통해서 가져올 수 있도록 만들어 놓았다.

문제점

• 현재 백엔드를 한 명이 담당하고 있기 때문에 마감일 까지 모든 기능을 구현하기에는 무리가 있을 것 같다. 선택과 집중이 필요해 보인다.
• 현재 프론트팀이 로컬에서 서버를 실행해서 API를 사용하고 있는데, 환경이 모두 다르기 때문에 문제가 발생하고 있다. 이 경우 프론트팀은 프론트 팀대로 작업에 집중하지 못하고 서버 셋팅을 하는 데 시간을 쏟게 된다. 또한 백엔드팀은 모두 다른 환경에서 오류가 나는 것에 대응을 해야 하기 때문에 효율적이지 못하다.

차후계획

• AWS EC2, RDS 인스턴스를 생성해 RDS를 EC2에 연결하고 EC2 세팅까지는 완료한 상태이다. 이 상태에서 다음주에는 배포를 완료할 것이고, 배포 과정을 쉽게 하기 위해 배포 자동화까지 해볼 예정이다.
• 페이징 처리: 무한 스크롤 방식으로 20개씩 게시글 목록을 프론트에 제공하는 형태

[변동 사항]

25일까지 구현하지 않아도 되는 부가적인 기능

• 좋아요 기능: 숫자로 가치를 따지지 않는.. 캣츄팀.. (인스타그램 벤치마킹. 앞서나가는 캣츄팀)
• 알람 기능
• 반응형 웹: 우선 반응형이 아니라 웹에서도 모바일 크기를 유지하도록 만든다. https://www.pet-friends.co.kr/ 처럼

25일까지 완료해야 하는 주요 기능

• 페이징 처리

• 페이징 처리를 하지 않을 경우 서버는 게시글 목록을 요청했을 때 모든 게시글 목록을 응답해야 한다. 그러면 게시글이 많을 경우 서버에서 응답하기까지의 로딩 시간이 길어질 것이다. 사용자에게 좋은 경험을 제공하기 위해서는 한정된 개수의 게시글 목록을 리턴하고 더 필요할 때 사용자가 요청을 해서 응답하는 방식으로 변경해야 한다.
• 또한 페이징 처리는 웹/앱 애플리케이션에서 필수적인 기능이다. 팀원들이 페이징 처리를 구현하면서 많이 배울 수 있을 것이라 생각한다.

• 사진 업로드 기능

회의 내용 추가 설명

1. Styled Component로 통일

- Styled Component를 이용해, 다크 모드 클릭 여부에 따라 "theme"을 toggle해줄 수 있고,

- 적용될 theme을 App.jsx에서 ThemeProvider에 props로 넘겨주면 쉬우므로

- Styled Component로 통일함!

 

2. 이미지 첨부가 필요한 기능은 FormData로 전송!!

- JSON형식으로 request body에 정보를 저장해 POST해도 되는 부분은

- 백엔드 팀과의 협동으로 그렇게 처리하였다!

 

- 하지만 이미지 첨부가 필요하다면

- 해당 이미지를 File object로 전달해줘야 하므로

- FormData에 모든 필요한 fields를 add해줘

- FormData 전체를 백엔드 서버에 보내도록 한다.

- 역시나 협업 필수!

 

3. 아이콘 관련

- Font Awesome에서 찾을 수 없는 아이콘들은

- SVG로 대체하기로 함!

 

4. 백엔드 - JWT관련 기능 향상

- 원래 API request에 유저 정보를 같이 전달해줘야 했지만

- JWT에서 읽어들이는 기능을 추가해주셔서

- 유저 정보 따로 킵할 필요 없이 (ex. userID)리퀘스트 보내면 백에서 처리 가능

 

5. 게시글 하트 수 / 뷰 카운트 부분

- 원래 게시글에는 하트 - 따봉 - 기능을 쓰려 했지만

- 인스타도 그렇고 좋아요 수 기능을 줄이는 게 트렌드인 만큼

- 캣츄팀 또한 그 움직임에 함께하기로 했다! (ㅋㅋ)

 

- 대신 view count를 적용

- view count는 백엔드 팀에서 구현되게 설계해 주셨다

 

6. 페이징 처리

- 무한 스크롤 방식으로 처리하기로 합의했다.