7주차에는 프론트엔드와 백엔드의 협업 프로젝트 및 클론코딩 주차였다.

1. 클론 코딩 주체

클론코딩 주제는 지금까지 해왔던 기능 구현과 비슷하지만 스코프가 넓지 않은 방향으로 주제를 선정하였고,

다양한 주제들 중 팀원들과 함께 벨로그를 선정했다.

2. 벨로그 구현할 기능

1) 로그인, 회원가입

• 로그인
• 로그아웃
• 회원가입

2) 게시판

• 전체 게시글 조회 (무한스크롤)
• 특정 게시글 조회
• 게시글 등록 (마크다운)
• 게시글 수정
• 게시글 삭제

3) 댓글

• 댓글 등록
• 댓글 수정
• 댓글 삭제
• 댓글 삭제

4) 좋아요

• 좋아요 개수 조회
• 좋아요 누르기
• 좋아요한 포스트 조회

5) 검색

• 검색 기능

6) 내 벨로그

• 태그에 따라 내가 쓴 글 조회
• 태그 가져오기
• 사용자 정보 가져오기

3) 내가 맡은 기능

• 로그인, 회원가입, 로그아웃
• 좋아요
  • 좋아요 개수 조회
  • 좋아요 등록
• 검색 기능
• 내 벨로그
  • 태그에 따라 내가 쓴 글 조회
  • 태그 가져오기
  • 사용자 정보 가져오기

3. 배운점, 어려웠던 점 & 문제 해결

1) 로그인 연장 처리

• 처음엔 App.js에서 useEffect를 사용해서 화면이 리렌더링될 때마다 access token을 다시 받아오도록 구현을 했었는데, 이렇게 구현하게 되면 access token이 필요한 api를 호출할 경우 이전 access token과 이후 access token이 꼬여서 유효하지 않다는 msg를 받게 되는 문제가 발생하였다. 그래서 기술매니저님의 피드백을 받고, axios interceptors response로 백에서 토큰 만료와 관련된 403에러 메세지를 받을 경우 이를 미리 캐치해서 403에러가 발생하면 access token을 다시 발급받고 다음 api가 호출되도록 변경함으로써 로그인 연장을 구현할 수 있었다.
  

2) 검색 기능 구현

• 검색 기능은 사용자가 검색어를 입력했을 때 검색 버튼이 따로 존재하는 것이 아닌 검색어의 값이 변경될 때마다 데이터가 조회될 수 있도록 구현해야 했다.
• 이 방법에 대해서 고민하다가 useState로 input 태그에서 onChange되는 값을 계속 캐치해서 api를 호출하고, 변경되는 값에 따라서 데이터가 조회될 수 있도록 구현했다. 하지만 이 부분에 대해서 기술매니저님이 효율적이지 않다는 말씀을 해주셨고, 변경할 때마다 캐치하는 것이 아닌 시간을 정해서 이후 시간에 몇 초 이후에 검색어를 찾아서 구현하도록 하거나 debounce, throttle에 대해서 공부해보면 좋을 것 같다는 피드백을 받았다.

3) 좋아요 기능

• 특정사용자가 특정 게시글에 좋아요를 누르면 좋아요를 누른 게시글에만 하트 색상이 변경되어야 했다. 초반에는 이 부분이 잘 구현이 안돼서 다른 게시글에도 색상이 변경되는 문제가 있었는데, 이를 해결하기 위해서 api를 따로 만들어달라고 백엔드 팀원분들께 요청을 드리기가 시간적 여유가 없기도 했어서, localStorage를 사용해서 key 값을 likes-postId이렇게 설정해서 사용자가 특정 게시글에 하트를 누르면 localStorage에 true/false로 저장을 해서 true인 경우에만 하트 색상이 변경되도록 구현함으로써 문제를 해결할 수는 있었지만 임시적으로 해결한 부분이라 다음 프로젝트에서는 따로 api를 만들거나 다른 방향으로 찾아봐야 할 것 같다.

4) 태그 기능

• 내 벨로그 전체 태그를 가져오는 api를 백엔드에서 분류해서 프론트엔드로 데이터를 보내주셨다.
• 내 벨로그에서 전체 태그에 카테고리에 해당하는 데이터만 가져오는 부분과 특정 태그 카테고리를 눌렀을경우 특정 태그에 대한 데이터만 가져오는 것을 처리하는데 어려움을 겪었었는데, useState로 이 부분을 처리시켜주는 값을 만들어서 해결했다. 이 부분은 따로 정리가 필요하다.

4. 피드백

• api를 따로 관리하는 폴더가 있을 경우, export const로 다로 분리해서 구현하는 것이 좋다.
• state를 관리하지 않는 함수는 custom hook파일로 분류하는 것이 아닌 utils파일에 분리하는 것이 맞다.

7주차 클론코딩을 마치며

이번 주차는 클론코딩 주차였다. 저번주와 마찬가지로 프론트 & 백엔드 팀원분들과 함께 협업하는 주차였고,

이번 주차에 팀장이 되어서 책임감과 부담감이 많이 있었다.

하지만 이런 걱정이 무색할 정도로 좋은 팀원 분들을 만나서 내가 팀장을 하면서 부족했던 점들을 같이 채워주시고, 모두 적극적으로 임해주시고, 서로 지속적으로 소통하고 공유하면서 이번 프로젝트를 잘 마무리 할 수 있었다.

나보다도 팀원분들이 고생을 많이 하신 것 같아서 죄송하기도하고 감사하기도 한 주차였다.

이번 주차에 검색 기능, 좋아요, 태그 기능 등 새로운 기능들을 많이 도전했었는데, 1주일이라는 시간 안에 많은 것들을 구현해내야 하는 점이 쉽지는 않았다. 시간적 압박이 있었고, 기존에 정했던 기능들 중에서도 효율적으로 시간을 맞추는 점에 대해서 생각해보게 되었다. 원래는 소셜로그인도 함께 구현할 예정이었는데, 생각보다 시간 할애가 많이 돼서 이후 구현해야 될 기능들이 밀려있었고, 팀원들과의 소통 하에 우선순위를 다시 정해서 빨리 구현할 수 있는 부분들에 더 집중을 한 다음, 시간이 오래 걸리는 기능은 차후에 여유가 생길 경우 구현하는 것으로 우선순위를 다시 설정하면서 효율적으로 업무를 진행하고자 했다.

이 부분이 가장 어려웠지만 프로젝트를 하면서 필요한 판단이라고 생각했고 시간을 효율적으로 사용하는 것을 많이 배워갈 수 있었던 주차였다.