WIL (10.25~10.31) 항해 7주차 실전 프로젝트

jake·2021년 10월 31일

WIL

목록 보기

7/13

1. 실전프로젝트

드디어 실전 프로젝트 시작 ! ✨

디자이너 2명과 백엔드 3명 프론트 3명이서 실전 프로젝트를 진행 하게되었습니다.
프로젝트 시작 첫날 하루 종일 토론하여 나온 저희가 진행할 프로젝트는
유기견 입양 서비스 제공 및 올바른 반려견 입양문화를 위한 사이트를 만드는 것입니다(자세한 사항은 2주뒤에 쓰겠습니다~)

이전에 진행했던 프로젝트는 디자이너 분들이 없어서 프론트, 백엔드 둘이서 와이어프레임을 대략적으로 만들고 API설계를 후 바로 시작했던 방식이었는데, 디자이너 분들과 협업하게 되면서 FIGMA를 이용하여 IA(Information Architeture)를 만들고 진행 하게 되었습니다. 또한 프론트 백엔드 개발자들은 매일 스크럼 미팅을 갖는 시간을 정하여 한일/할일/이슈를 공유하고 시작하기로 하였습니다.

항상 간략하게 와이어프레임을 짜고 진행하던 이전 프로젝트와 달리 IA를 사용하면서 데이터가 어느 곳에 필요하고 어떤식으로 넘어가는지에 대해 생각하다보니, 서비스의 보다 상세한 내용과 전체적인 흐름을 파악하는데 도움이 되는 것이 느꼈졌습니다. 또한 매일 스크럼 미팅을 하면서 서로의 Task의 진행상황과 급한 이슈가 무엇인지 알게되고 원활한 소통이 되어 애자일에 대해 좀더 공부를 해봐야겠다고 생각했습니다.

열정적인 디자이너분들과 팀원들 덕분에 전체적인 와이어프레임 API설계도, MVP(Minimal Viable Product) 스코프가 5일차 정도에 모두 정해졌습니다.

이후 각 프론트 백앤드끼리 서로 나뉘어 맡을 업무를 정하고 프로젝트를 진행하였습니다.
저는 로그인, 회원가입, 페이지, 헤더,푸터, 입양신청 페이지를 맡아 진행하고 있으며 이번 WIL은 페이지를 만들면서 알게 된 지식과 내용을 정리하려합니다.

로그인, 회원가입 페이지

1. 뷰를 완성하고 서버와 통신 과정에서 400, 404 에러를 많이 만났습니다.

400 bad request와 404 not Found... 이전까지 성공 200, 실패 400, 500으로만 알던 것들을 자세하게 알 필요성을 느껴 알아 보았습니다.

400에러 bad request : 서버가 설정해 놓은 JSON형태가 아니거나 전달할 데이터 키값을 잘못 입력하여 데이터를 넘겨줄 때 발생하는 걸 알았고, API설계서를 다시보면서 해결하였습니다.
404에러 같은 경우는 클라이언트에서 서버에 전달하는 데이터의 헤더에 실려있는 토큰 식별이 안되거나, 서버에서 데이터로 넘겨주는 값 res.data가 없을 경우 많이 발생하였습니다.
해결은 주로 서버쪽과 데이터를 어떤 키값으로 넘겨주는지 확인하거나 업데이트 된 사항을 빌드 했는지 확인해가며 해결 하였습니다.
나머지 100, 200, 300, 400, 500 추가사항에 대해서는 http에러코드참고사이트 참고하여 공부하였습니다.

2. RESTful API를 찾아보고 적용하여 봤습니다.

프로젝트 5일차에 멘토님들을 만나 멘토링 받는 시간에서 API설계를 재사용성을 고려해 좀 더 제네릭하게하는게 좋다는 피드백을 받았습니다. Restful API를 찾아보라는 조언을 받았고 아래와 같이 찾아보고 적용하였습니다.
API(Application Programming Interface):운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스
쉽게 API는 클라이언트와 서버같은 서로 다른프로그램에서 요청과 응답을 통해 데이터를 주고받는 창구이다.
클라이언트 쪽에서 요청을 보낼 때 보내는 데이터를 HTTP 패킷이라한다. 패킷에는 헤더와 바디가 있다. 아래HTTP 패킷 참고
API에서 클라이언트와 서버가 요청과 응답을 주고받을 때는 거의 JSON형식으로 주고받는다.
데이터를 주고 받기 위해 CRUD별로 API에 주소(url)가 생기는데, 이 주소들이 너무 많아 관리가 어려워 나타난 것이 RESTful API(Representational State Transfer API) 이다.웹에 존재하는 모든 자원(이미지, 동영상, DB)에 고유한 URL(주소)을 부여하여 활용하는 것을 의미한다.
아래이미지 처럼 URL 맨앞에 소스를 앞에 써주고 메서드로 어떤 요청인지 써주었습니다.