이번 6주차에는 지난 1주차에 했던 미니프로젝트와 다를바 없지만 처음으로 프론트와 백단으로 역할이 나뉘어서 협업하는 첫 번째 프로젝트였다. 협업이라고는 한 번도 해본적이 없었기 때문에 아무것도 모른체 프로젝트를 시작했고 왜 현업에서 소통을 가장 중요하게 생각하는지 뼈저리게 느끼는 한 주였다.
📒 미니 프로젝트 02
첫 번째 주와 마찬가지로 자유 주제 선정과 기본적인 기능(CRUD)이 들어간 프로젝트이다.
다만 프론트엔드(React)와 백엔드(Spring)이 협업을 한다는게 가장 큰 차이다.
우리팀은 항해 부트캠프를 진행하면서 공부하는데 생기는 고민들을 올리는 간단한 게시판을 주제로 잡고 프로젝트를 진행했다.
로그인/회원가입 기능과 게시글 CRUD 기능과 댓글 CRUD 기능을 기본 베이스로 잡았다.
와이어프레임
.png)
.png)
.png)
.png)
결과물
- 프로젝트 시연 영상 : https://www.youtube.com/watch?v=exzJ00W5WjQ&t=24s
- 깃허브 주소(FE) : https://github.com/durukim/FE_Hanghae99_Mini
- 깃허브 주소(BE) : https://github.com/sun-land/springTogether
아쉬웠던점
-
앞서 말했듯이 모두가 협업이 처음이다보니 서로의 스택에 대해 너무 몰랐다.
서로가 무얼할 수 있는지도 모르고 어떤게 가능한지 어떻게 기능 구현을 하는지 아무것도 모르다보니 의사소통 자체가 너무 힘들었다. 누가 부족하고 모자라서 발생한 문제가 아니라 당장 어떻게 할 수 있는 문제는 아니였고 지금와서 생각해보면 프로젝트를 진행하다가 오류가 발생하면 길게 고민하지 말고 바로 서버쪽과 얘기를 해서 해결하는게 제일 좋은 방법이였다고 생각한다. 프론트쪽에서 해결할 수 없는 문제를 가지고 너무 오래 고민하고 시간을 많이 써서 결국에는 목표했던 기본 기능도 몇가지는 구현하지 못해서 매우 아쉬웠다. -
이번주차에 가장 힘들었던점은 프로젝트를 진행하다가 오류가 발생했을 때 이게 프론트쪽 문제인지 서버쪽 문제인지 알 수가 없다는 점이였다. 왜 현업 개발자들이 결국에는 풀스택 개발자가 되는지 이해가 되는 한 주였다. 결국에는 프론트엔드 개발자든 백엔드 개발자든 양쪽 다 알아야 의사소통이 원할하고 프로젝트 진행이 수월하다는걸 깨달았다.
-
지난 주특기 연마기간 3주간 파이어베이스라는 서버를 기반으로 과제들을 수행했는데 본격적으로 협업을 시작하고 나서는 Axios 를 사용해서 협업을 진행했고 커리큘럼에 대한 아쉬움이 생겼다.
한 주 정도는 Axios에 대한 교육이 있었다면 훨씬 더 수월하게 프로젝트를 진행할 수 있었을텐데 협업에 대한 정보가 너무 부족해서 아쉬웠다.
프로젝트를 진행하면서 배운점
📌Axios
Axios란?
- Axios는 백엔드와 프론트엔드간의 통신을 쉽게하기 위해 Ajax와 더불어 사용하는 HTTP 비동기 통신 라이브러리이다.
- 이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할땐 axios를 쓰는편이다.
Axios 특징
- 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js 의 http api 사용
- Promise(ES6) API 사용
- 요청과 응답 데이터의 변형
- HTTP 요청 취소
- HTTP 요청과 응답을 JSON 형태로 자동 변경
🔗 참고 자료 : https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9
📌CORS
CORS 란?
- CORS는 교차 출처 리소스 공유(Cross-Origin Resource Sharing)의 약자로 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.
- CORS 체제는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원한다.
- 최신 브라우저는 XMLHttpRequest 또는 Fetch와 같은 API에서 CORS를 사용하여 교차 출처 HTTP 요청의 위험을 완화한다.
CORS는 백엔드에서 주로 다루는 개념이지만 이번 프로젝트를 진행하면서 가장 많이 본 에러메세지이기 때문에 간단하게 적어보았다.
다음 주차에 공부할 것
7주차에는 클론코딩을 진행한다. 우리 조는 AirBnB 사이트를 클론하기로 결정했는데, 이번 주차는 기본적인 CRUD 뿐만 아니라 한가지 정도 추가 기능을 구현해보는것이 목표이다.
지도 API를 이용한 기능이나 AirBnB의 예약 기능을 구현해보는게 우리 조의 최종 목표이다.
또한 기능뿐만 아니라 UI에 최대한 신경쓰는것도 6주간 진행되는 최종 프로젝트에 앞서 프론트엔드 개발자로서의 실력을 최대한 올리는데 도움이 되리라 생각된다.
