코드 스테이츠에서 주관하는 부트캠프의 마지막, 8월 24일에 시작한 메인 프로젝트에 대해서 써보려 합니다.
실제 페이지를 보시려면 -> 한국 과자 페이지
코드를 보시려면 -> 깃허브
팀 빌딩
메인 프로젝트의 팀 빌딩은 되게 신선했다. zep이라는 메타버스 환경에 들어가서 팀원을 리쿠르팅 하는 방법이었다. 나는 프론트엔드 스터디를 함께한 두 분과 이미 팀을 맺은 상황이어서 백엔드 팀원만 구하면 되었었는데 마침 3명이 모여있는 팀원이 있어서 그 분들과 팀원을 못 구하신 한 분까지 추가로 영입하여 7명이 팀이 되었다. 그 후로는 팀명 정하고 주제 정하고 했는데 나는 코로나로 녹아웃 되어있는 상태였어서 팀원분들께 양해를 구하고 회의를 듣기만 하였다. 주제는 펫 관련된 것과 해외에 한국 과자를 판매하는 것 두 개로 나누어졌는데 3대 4로 한국 과자를 판매하는 것이 주제로 정해졌다.
사용자 요구 정의서
우선 우리 팀이 시작 한 것은 사용자 요구정의서를 작성하는 것이었다. 우선 생각나는 기능들 부터 정리를 한 후에 중요도 상에 놓인 것들을 먼저 해서 기본 기능을 구현하고 중요도 중이나 하를 구현하거나 새로 구현 해보면 좋을 것 같은 것들을 생각해서 해보기로 하였다. 중요도 상의 대부분의 기능들을 지난 프리-프로젝트에서 성공을 하였거나 시도를 해보았던 것들이었지만 무조건 필요한 기능들이어서 빨리 끝내고 다른 기능들을 추가해서 만들어 보고 싶다는 생각을 하였다.
api 명세서
프론트엔드 팀원들이 피그마와 화면 정의서를 작업 할 때 백엔드 팀원들은 api 명세서 작성을 시작하였다. 물론 초기에 작성한 것이 끝까지 가는 것은 아니고 계속해서 수정을 한다.
api 명세서의 일부
피그마
팀원들이 만드려는 페이지의 구조를 만들기 위해서는 피그마를 이용하였다. 각자 생각하는 구조로 만들고 팀원들간의 피드백을 통해 수정해나갔다.
화면정의서
프론트엔드 팀원들이 각자가 구현할 부분을 화면 정의서로 작성하였다. 화면 이미지는 피그마에서 가져왔다.
회원가입 구현
회원 가입은 생각보다 간단하였다. 우선 회의를 통해 회원가입시에 어떤 정보를 입력을 해야할지 정했는데, 나중에 지우는 일이 있더라도 우선 많이 해놓자는 생각으로 이름, 별명, 성, 생일, 주소, 번호, 이메일, 비밀번호를 받았다. 무조건 받아야 하는 별명, 이메일, 비밀번호는 입력을 안하면 회원가입이 안되게 해두었다. 이 부분에 대해 멘토님께서 요즘은 정보를 많이 안 받는 추세여서 아예 무조건 받아야 하는 것만 남기고 다 없애도 좋을 것 같다고 해주셨는데, 그렇게 되면 백엔드 로직도 수정해야 하고 디자인도 너무 비어있게 될 것 같아서 그냥 남겨두었다.
로그인 구현
로그인은 보안에 직접적인 연관이 있는 문제로 굉장히 세밀하게 잘 짜야 한다. 그러나 다른 파트들을 테스트 하기 위해서는 로그인 상태가 필요했기 때문에 우선 보안상 문제가 있다고 알려진 localstorage에 엑세스 토큰과 리프레쉬 토큰을 받아서 사용하는 방법을 이용하였다.
우리 팀이 구현하고자 한 로그인 방식은 이런 방식이었다.
브라우저에서 아이디와 비밀번호를 넘기면 엑세스 토큰은 secure 옵션만 걸린 상태로 넘기고 리프레쉬토큰은 httponly와 secure옵션이 되어있는 상태에서 넘겼다. 브라우저는 엑세스 토큰을 decode해서 엑세스 토큰 이용 가능 시간을 확인하여 이용가능하면 엑세스 토큰을 이용하고, 이용이 불가하면 리프레쉬 토큰을 이용해 엑세스 토큰을 가져오는 방식을 이용하였다.
우선 나는 브라우저 담당이기 때문에 브라우저에서 secure 옵션을 사용하기 위해서 브라우저를 https로 변환을 해주어야 했다. 그러기 위해서는 도메인 주소가 필요했는데, 그를 위해 cafe24라는 도메인 주소를 판매하는 곳에서 도메인을 사고, s3로 만든 페이지를 aws의 cloudfront, route를 이용해서 https로 변경해주었다. 그 다음 마찬가지로 https로 변환된 서버와 연결을 해주었다.
여기서 큰 문제가 발생을 했는데, 개발자 모드에서 보면 쿠키가 보내진다고 하는데, 실제로는 쿠키가 저장이 안되는 것이었다. 그래서 우선 토큰을 브라우저의 local storage에 저장하는 방식을 사용해두고(다른 파트 테스트에 로그인 상태가 필요하였다.) 이 오류를 해결하기 위해 프론트엔드와 백엔드가 서로 코드를 확인하면서 무슨 문제가 있는지 찾아봤는데, 결론적으로 문제는 백엔드가 쿠키를 보내는 주소를 잘못 설정해서 생긴 오류였다. 결국 쿠키를 보내는 것은 해결을 하였지만 해당 로직을 시간 안에 마무리 하지는 못할 듯 하여 우선 제출을 하고 나중에 리팩토링 하는 방식으로 하기로 하였다.
oauth 회원가입&로그인
ouath는 회원가입에서 버튼을 누르거나 로그인에서 버튼을 누르면 oauth 페이지로 연결되어 회원가입이 이미 되어있으면 메인페이지로 가고, 회원가입이 안되어있으면 추가 정보를 입력하는 페이지로 가게 해두었다.
마이페이지 구현
마이페이지는 회원가입때 입력한 정보를 그냥 띄워주고, 해당 정보를 수정할 수 있게 해주는 페이지이다. 해당 페이지에서 내 주문목록, 내 글 정보로도 갈 수있고, 이미지 수정도 가능하게 해두었다.
내가 생각한 이미지 저장 방법은 브라우저가 이미지를 받아서 url로 변환시켜서 서버에 텍스트 형식으로 넘기면 서버에서 클라이언트가 필요할 때에 다시 받아서 사용하는 것이었는데, 서버쪽에서 이미지를 직접 저장하는 방식을 이용한다고 해서 이미지를 form형태로 보내어 서버에 저장한 뒤에, 필요할 때 사용하는 방식으로 만들었다.
데모데이
데모데이는 각자 팀들이 한것을 보여주는 시간이었다. 다른 팀들것들을 둘러보니 우리팀이 확실히 디자인 부분에서 좀 밀린다는 생각을 하였다. 너무 잘한 팀들이 많아서 좀 부러웠던 것 같다.
프로젝트를 마치며...
계획했던 만큼 완벽한 프로젝트는 되지는 못했지만 그래도 최선을 다했고 그 누구도 포기하지 않고 끝까지 완주하여서 기분이 좋았다.
