메인프로젝트(4)

 

메인 프로젝트가 벌써 끝날때가 되었다.. 시작한지 얼마 안된거 같은데 시간이 금방금방 가는 것 같다.

이번주는 기능을 마무리하고 배포, 버그수정, 문서작업 위주로 진행했다. 생각보다는 무난하게 작업이 끝나서 제출일날 오후에 여유롭게 끝냈다. 

 

 

기능 마무리 

Oauth 로그인

내 파트의 다른 기능은 거의 마무리가 되었고, Oauth 로그인이 남아있었다. Oauth 로그인은 제대로 해본적이 없어서 주말동안 열심히 공부해서 구현하려고 로직을 공부했다.

 

 내가 공부한 로직은 프론트쪽에서 구글로부터 authorization code를 받아서 백엔드로 넘겨주고, 백엔드에서 그 코드를 가지고 구글에 토큰을 요청해서 받아서 다시 프론트로 넘겨주는 방식이었다.

 그런데 백엔드분이 구현한 로직은 정확하게는 어떻게 동작하는지 잘 모르겠는데 구글 로그인 api로 이동시키면 리다이렉트로 우리 웹페이지 홈으로 돌아오면서 query parameter에 accessToken과 memberId가 넘어오는 방식이었다.

 

 뭔가 프론트 쪽에서 구현하기 편하게 만들어주신거 같은데, 어떤 로직인지는 좀 더 공부해봐야 할 것 같다. 어쨋든 넘어온 accessToken 과 memberId를 저장하는 코드를 작성해서 구글 Oauth 로그인 구현도 성공적으로 마무리한 것 같다.

 

관리자 채택글, 북마크 글 구현

주말동안 관리자 채택글 api와 북마크 글 api가 완성되어서 데이터 형식에 맞게 파싱이되도록 기능을 구현했다. 관리자 채택글은 게시글 하나하나의 데이터가 전부 넘어와서 바로 구현이 가능했고, 북마크 글은 게시글 id만 넘어와서 해당 id로 다시 get 요청을 보내서 게시글 하나하나를 개별로 받아와서 파싱해야했다.

 

 처음에는 Promise.all로 게시글을 전부 받아와서 작업을 했는데, 테스트 하다보니 중간에 북마크된 게시글 하나가 삭제가 되면 다른 글도 전부 받아와지지 않는 버그가 발생했다. 찾아보니 Promise.all 같은 경우 하나라도 reject가 되면 모든 요청이 reject가 된다고 한다. 그래서 Promise.all 대신 Promise.allSettled를 사용하여 요청을 하고, reject 된 글은 제거하는 방식으로 작업을 하니 제대로 구현이 되었다.

 

배포 작업

중간에 CloudFlare로 배포를 한 번 해봤었는데, CloudFlare로 배포를 하면 기본적으로 https가 적용되어 http 와 통신할 때 어떤 설정을 해줘야 한다고 한다. 서버가 http로 되어있어서 아예 통신이 안되는데 시간이 촉박해서 이건 나중에 해결하기로 하고 AWS S3로 바꾸어서 배포작업을 진행했다.

 배포 자체는 프리프로젝트때 해봐서 쉽게 할 수 있었다. 배포를 하고 각자 우리 웹페이지의 더미 데이터도 만들 겸 기능 시연을 해봤는데, 생각보다 버그나 오류같은게 많이 발견되어서 수정 작업을 계속 해서 다시 빌드해서 배포하고 하는 작업을 반복했다.

 

그러다가 이전에 배운 Github Action을 이용한 자동 배포(CD)를 배운것이 생각이 나서 적용해보기로 했다.

yaml 파일을 작성하여 우리에게 맞게 설정을 해주고(이 작업이 시간이 꽤 걸렸다..) Github Action 설정을 하고, aws 인증키를 등록해서 자동 배포가 되게 할 수 있었다. 코드작업만 해서 pull request 만 하면 배포가 자동으로 되니 굉장히 편안하게 수정 작업을 진행 할 수 있었다.

 

 

과제물 작업

목요일 자정까지 과제물 제출이었는데, 제출할 과제물이 꽤 많아서 이틀을 할애해서 과제물 작업을 했다.

기술 발표 영상의 경우 우리 프론트팀은 Redux-toolkit, Quill Editor, React-hook-form 에 관해서 발표를 하기로 했고, 나는 React-hook-form에 대해서 발표를 했다. 개인당 2분의 시간이 주어졌는데, 생각보다 2분이 짧아서 많은 내용을 담지는 못하고 우리가 React-hook-form을 왜 사용하고 어떻게 사용했는지 간단하게만 소개하는 정도로 이야기했다.

 

서비스 메뉴얼은 우리 웹사이트에 어떤 기능이 있는지 위주로 설명을 했는데, 우리가 열심히 작업한 것에 비해 기능은 뭔가 생각보다 많지는 않은거 같아서 조금 아쉬웠다(?).

 

설계문서는 첫주에 작업했던 것을 기반으로 제출했다. 그리고 시간이 조금 남아서 프로젝트 리포지토리에 ReadMe를 작성해서 프로젝트에 대한 간단한 설명을 추가했다.

 

디자인..

디자인도 뭔가 바꾸고 싶은데 디자인에 대한 아이디어가 잘 안떠오른다.. 

반응형 css도 적용시켜 보려고 했는데, 몇개 작업을 해보니 중간중간 레이아웃이 다 깨졌다. 그래서 멘토님께 물어보니 처음 설계할 때 부터 반응형에 대한 레이아웃이 잡혀있어야 하고, 그렇게 않으면 반응형 적용시키는 것이 꽤 어렵다고 말씀해주셨다. 애매하게 반응형을 넣는 것 보다는 접근성에 좀 더 투자를 해보는 것이 어떻냐고 하셔서 반응형은 나중에 리펙터링 할 때 해보기로 했다.

 

 

다음주에 데모데이 인데, 다른 팀들은 어떻게 작업햇는지 궁금하다. 데모데이가 끝나면 우리끼리 코드리뷰 하면서 리펙터링 같은것도 해보기로했다!