[Toy Project] 게시판, 부재일정 캘린더 UI 완성 및 Backend 피드백

• 며칠 사이에 포스팅이 뜸했다 명절,,,이슈도 있었지만 토이 프로젝트 프론트엔드를 완성하느라 바빴다 특히 2/6~2/10은 API 15개와 화면을 연동하였다

배경

• Backend 개발자면서 왜 Frontend를 이렇게 해봤냐? 라고 물었을 때 2가지로 답할 수 있다
  • 먼저 가장 큰 이유는 같이 협업할 비슷한 연차의 프론트엔드 개발자를 구하기 어려웠다 외주도 아니고 현재 운영중인 "스터디"에 도움이 되는 시스템 개발이 목적이라 더욱 어려웠다. 모인 팀원들이 전부 백엔드를 희망해서, 각자 파트를 나누고 그 파트의 백엔드, 프론트를 다 개발해보기로 하였다
  • 그렇다면 백엔드만 하고 Swagger 단계에서 마무리 할 수 있지 않은가? 물론 맞다 하지만 실력을 늘리기 위해서는 내가 설계하고 만든 API가 UI에서 사용하기 쉽게 생성되었는지 확인할 수 있어야 한다고 생각했다 그래서 API 개발 단계에서 끝나지 않고, 며칠 더 투자해서,,! 화면까지 완성해 보았다

목표: 화면 생성 시 Backend 수정이 최대한 적을 수 있도록 Backend 개발하기

완성 된 화면 및 backend 피드백

부재일정 공동 캘린더

화면

• React FullCalendar를 사용하여 구현하여 많은 CSS를 적용하지 않았는데도 꽤 예쁘다,,, ㅎ
• 부재일정 등록/수정/삭제 기능과 멤버 별 필터링해서 부재일정을 조회하는 기능을 구현하였다
• 수정, 삭제의 경우 로그인한 사용자의 부재일정만 수정/삭제가 가능하도록 하였다
  
  

backend 피드백

• 큰 Backend 수정사항은 없었다!
• 다만, 스터디원 별 필터링을 진행하기 위해 스터디 참여 스터디원 전체 목록을 불러와야 했는데, 이 때 스터디원의 목록 조회하는 API가 없어 이를 추가로 만들었었다
• 하지만 구현 후 Swagger 검토 중, 다른 팀원이 만든 아래 API를 사용하면 새로운 API를 만들지 않고서도 스터디원의 목록을 불러올 수 있었을 것 같다는 생각이 들었다 "스케줄 이름 별" 조회만 가능한 줄 알고 처음 검토할 때는 발견하지 못했었다
• 내가 내 기능을 위해 만든 API 뿐만 아니라, 다른 사람의 API까지 꼼꼼하게 검토하는 습관을 가져야겠다!

게시판

화면

• 공동 Table, pagination 컴포넌트를 생성한 뒤, 이를 적용하여 개발하였다
• 게시글 목록 조회 및 검색, 게시글 추가,수정,삭제, 댓글 추가 수정 삭제, 좋아요 생성/취소 기능을 구현하였다
• 마찬가지로 수정, 삭제의 경우 로그인한 사용자의 게시글만 수정/삭제가 가능하도록 하였다

Backend 피드백

• 댓글, 게시글 모두 여러 줄로 텍스트 입력 시 저장이 되지 않는 문제가 있었다. 이에 줄바꿈(\n)을 <br> 로 바꿔서 DB에 저장한 뒤, 조회 시에 다시 이를 줄바꿈으로 바꿔서 읽어오는 방식을 적용하였다 물론 프론트엔드 적용 사항이지만, DB에 저장되는 데이터에도 <br>이 적용되어 이를 기록한다
• 게시글 검색 시 한 글자 이상 검색하도록 제한 조건을 걸어두었다. 하지만 이렇게 되면 처음 게시판 화면을 조회할 때 아무 검색어가 없는 상태에서 처음 게시글 목록을 조회할 수가 없었다. 그래서 제약 조건을 해지할 수 밖에 없었다ㅠ 조금 더 제약 조건 설정 할 때 신경써야 겠다

• 프론트 재밌지는,,,않지만 그래도 Backend 수정 사항들을 기록하며 하다보니 많이 배울 수 있는 시간이었다고 생각한다!
• 토이 프로젝트 프론트 마감 기한은 2월 말이었으나, 프론트에 너무 많은 시간을 쓰고 싶지는 않아 빠르게 진행해보았다
• 이제는 로깅 서비스 조금 개선 해보고 싶다!!