메인 프로젝트(2)

드디어 본격적으로 코드를 치는 작업을 시작했다. 기획하고 디자인 하는 것 보다는 코드 작성하는게 마음이 훨씬 편한것 같다.

일단은 각자 페이지를 잡아서 레이아웃 작업부터 하기로 했다. 기능은 백엔드도 테스트가 가능한 상태까지 만들어져야 본격적으로 시작할 수 있을 것 같다. 

 내가 맡은 파트는 일단 home화면, 로그인,회원가입 화면이다. 어떤 페이지가 오래 걸릴지 잘 모르겠어서 1차로 나누어서 작업하고 다 된 사람부터 하나씩 집어가는 형태로 진행하기로 했다. 개인적으로 로그인, 회원가입을 해보고 싶었는데 잘됐다는 생각이 들었다. 

Home 화면

 몇번 해봐서 그런지 몰라도 이제 레이아웃 잡는거는 별로 어렵지 않은 것 같다. box-shadow 같은거도 추가해봤다. 홈 화면에는 추천 많이 받은 게시글을 캐러셀 형태로 화살표로 넘기면서 볼 수 있도록 만들어 볼 예정이다. 캐러셀은 구현을 한 번도 해보지 않아서 기대가된다. 왼쪽에 Nav bar는 mantine을 사용해서 팀원분이 만들어주셨다. 밑에 footer는 뭘 넣을까 하다가 팀 로고, 팀원, 팀 이름을 넣기로했다. (팀이름이 메인플스토리라서 메이플 캐릭터를 임시로 넣었다.😆)

 

** react-hook-form

input 같은 경우 react-hook-form을 사용했다. 로그인페이지, 게시글 작성 페이지, 회원가입 페이지 등 많은 부분에서 input과 form 태그를 사용하는데 react-hook-form을 사용하면 따로 input value를 상태로 하나하나씩 추적하지 않고 register라는 함수를 사용하여 하나의 form 안의 모든 input value를 추적할 수 있고, 각각의 유효성 검사도 간단하게 함수를 작성하여 속성으로 넣어주면 된다. 저번 프리프로젝트때 팀원분이 써보자고 하셔서 써봤는데 엄청 좋은 것 같아서 이번에는 내가 팀원들에게 써보자고 제안을 했다.

 

로그인 화면

로그인 화면

로그인 화면은 일반적인 형태로 만들고 색깔을 입혔다. 로그인 페이지는 별거 없는거 같은데 생각보다 코드가 길어지는 것 같다. 로그인 버튼을 누르면 유효성 검사를 하도록 코드를 작성했고(이메일 형태, 비밀번호 8~20자) 이후 post 요청으로 서버쪽으로 요청을 하도록 코드를 작성할 예정이다. 

 아이디, 비밀번호 찾기는 따로 페이지를 만들기 애매해서 modal창으로 두개를 묶고, 탭으로 이동할 수 있도록 만들었다. 아이디찾기 버튼을 누르면 아이디 찾기로 들어가고, 비밀번호 찾기를 누르면 비밀번호 찾기로 들어간다. 아이디, 비밀번호 찾기도 서버 테스트가 가능해지면 기능을 넣을 예정이다.

 Oauth는 구글과 깃헙이야기가 나와서 일단 버튼을 만들어 놓았는데, 우선순위가 낮아서 시간이 남으면 기능을 넣고, 아니면 빼버릴 것 같다. 기능 추가보다는 제거가 편해서 일단은 만들어뒀다.

 

회원가입 페이지

회원가입 페이지를 만들 때 react-hook-form의 덕을 많이 봤다. input을 component로 만들어서 props로 input에 대한 정보를 받아서 input태그에 register 함수를 등록할 때 적절한 props를 등록해주면 간단하게 컴포넌트를 구현할 수 있고 버튼을 누르면 각각의 input value를 모아서 객체로 만들어주기 때문에 따로 request를 보내기 위한 객체를 만들지 않아도 된다.

 유효성 검사 함수는 validate에 등록하는데 원래는 그냥 함수만 등록하면 되는데, 비밀번호 확인은 현재 입력한 비밀번호와 비교해야 하기 때문에 조금 까다로웠다. 추적중인 value를 참조하는 함수인 getValues도 react-hook-form에서 지원해줘서 그걸 기반으로 함수를 작성하여 등록했다.

 회원가입 페이지에는 기능이 회원가입 버튼을 누르면 post요청만 하면 되기 때문에 편하게 기능을 작성할 것 같다. 

Oauth는 로그인과 마찬가지로 우선순위가 낮아서 시간이 남으면 하게 될 것 같다.

 

마이페이지 - 북마크

담당 페이지를 레이아웃 구성까지 다 하고 마이페이지의 북마크 페이지를 하기로 했다. 위쪽의 프로필과 탭은 팀원분이 만들어두셔서 그대로 쓰고 밑에 있는 북마크 페이지만 만들었다.

 북마크 페이지는 따로 디자인을 하지는 않고 카드형식으로 만들자 라고만 정해서 일단은 무난한 카드 형태로 만들었다. 뭔가 포인트를 줄 수 있을까 고민하다가 배경을 넣어봤는데 괜찮은거 같기도하고, 글 읽기 힘들까? 싶기도 하다.

북마크 페이지는 데이터를 어떻게 받아오냐가 중요할 것 같다. 내가 필요한 데이터를 미리미리 작성해두고 담당 백엔드 팀원과 의논해봐야겠다. 

 

멘토링

 2주차 멘토링에서 멘토님에게 들었던 중요한 것이 Due Day를 잘 정하고 백엔드 분들과 잘 소통 하라는 것이다. 서버 구성이 잘되어 가는지, request,response body에 문제가 없는지 등을 계속 확인하면서 진행하고, 서버가 완성된 이후에도 프론트의 경우 여러가지 잔버그나 edge case 같은 것들이 많이 생길 수 있어서 시간이 꽤 걸린다고 하셨다. 우리가 25일 까지 제출이라 약 2주정도 남았는데  화면구현, 기능구현, 서버구현을 다 하고 시연하면서 여러 잔버그나 디자인 문제를 고치고, 발표자료 준비하고 영상찍고하려면 다음주까지는 기능구현을 완료해야 할 것 같다..

 여러가지 질문도 준비해갔는데, 우리 생각보다 더 넓은 관점에서 답변을 해주셔서 약간 보는 시각? 같은게 조금 넓어지는 기분이다. 예를 들면 페이지네이션 같은걸 질문했었는데, 페이지네이션도 종류가 여러가지이고 어떤 라이브러리가 좋고, 구현할 때 url 영속성을 지켜주는게 좋다 등등 우리가 생각지도 못한 부분을 답변해 주셔서 매우 유익했다.

 일반적인 코딩 공부로는 알 수 없는 것들도 많이 가르쳐 주셔서 너무 좋았다. 

감사합니다 멘토님!

 

 

일정이 아직 남았다고 생각했는데 다음주까지 완성하려고 하니 갑자기 매우 빡빡해진 느낌이다.. 최대한 빠르게 만들어서 우리가 기획한 부분은 모두 만들 수 있으면 좋겠다!