[Project 04] 멍!트워크

프로젝트 소개

Git주소
- https://github.com/HanHoing/puppy_nw.git (spring은 private RDS정보 등 다 들어있어서,, 추후 수정 해 업로드 예정)

GitHub - HanHoing/puppy_nw

 

주제

반려동물 사회화를 위한 실시간 산책 위치 제공 웹사이트

인원 구성

	성별	담당
조장 (전공자) (나)	여	Frontend&Backend
조원1 (비전공자)	남	Backend
조원2 (비전공자)	남	Backend
조원3 (비전공자)	여	Frontend
조원4 (비전공자)	여	Frontend

 

진행 기간

2022/01/03 ~ 2022/01/07(5day)

기술 스택

• HTML, CSS
• React
• SpringBoot
• AWS RDS (MariaDB)
• Node.js

 

주요 기능 및 강조하고 싶은 부분

webSite
1. Home page
- 메인이미지, 배너, 강아지 아이콘, footer아이콘 직접 디자인 (front2명 담당)
- 슬라이스 배너 (bootstrap)
- 날씨 API사용 (openweather)
2. Map page
- KakaoMap 사용
- 지도상에 타 사용자의 위치 나타내기 / 타 컴퓨터에서도 사용 가능 (websocket.io)
- 위치 마커에 인포윈도우 사용하여, 반려동물 정보 나타내기
3. MyPage
- rds->spring->react->session 순서로 가져온 유저 정보, 반려동물 정보 UI에 표시
4. Login
- 이메일, 비밀번호로 로그인 -> 로그인 성공시 user환영합니다! alert로 나타나며 web에 표시됨
5. Sign up
- 이메일, 이름, 비밀번호 입력하여 회원가입 -> 회원가입 완료 시 로그인페이지로 이동함

전체적인 진행 순서

조원들과 다같이: 프로젝트 기획 -> UI네비게이션 및 초안 확정 -> Database Table구축
-> 여기부터 front -> react component별로 나누기(nav,header,content,footer등등) 및 파일 분류 -> LogIn/SignUp/Map/Mypage등 ui 넘어가게 -> component로할지 function으로 할지 고민 -> 광고배너, 메인페이지등에 들어갈 이미지 작업 -> 기능코딩
-> 여기부터 back -> spring파일 생성(react와 연동 ajax) -> DB연동(AWS RDS사용) -> node.js파일 생성(react와 연동) -> webSocket(node.js,react)사용, 날씨api(react), onetomany(spring)등 사용 -> DB 데이터 전달 react로 가져와서 web에 띄우기

후기

 국비 학원에서 두번째 세미 프로젝트를 진행했다. 첫번째 프로젝트 팀과 잘 맞았기에 같은 조원들+평소 눈여겨보던 언니 한명을 영입하여 같이 진행하게 되었다. 5일이라는 짧은 기간 안에 굉장히 많은 기능들을 서치해 본것 같다. 구글 들어가보면 관련 내용은 다 보라색이 되어있을 정도로..!

 초반 계획은 기본적인 로그인/로그아웃/회원가입, 핵심 기능인 맵상에 실시간으로 산책 위치 표시(강아지 정보와 함께), 부가 기능인 배너/날씨api 등등으로 구성했다. 서버는 원래 두개나 쓸 생각이 없었는데 짧은 시간 안에 구축하기위해 구글링 결과가 가장 많이 나오고 이해하기 쉬웠던,,,,,,,,,,, node.js를 사용하였다. 확실히 빨리빨리 한국인에게 잘맞더라,, 가볍고 빠르고 쉽당. 설치부터 화면 띄우는 것 까지 금방된다! 코드도 길지 않아서 설명하기도 수월했다. 맛보기로 한 번 사용 해봤으니 나중에는 node.js / spring 둘 중 하나만 선택하여 서버를 깔꼼히 구성해보고 싶다.

 개발을 진행하면서 가장 막혔던 부분은 데이터를 넘기는 방식이었는데 데이터 가져오기는 RDS(MariaDB) - Javaspring - React - Node.js 얘네들을 다 왔다갔다 하려했고, 조원별로 보통 한가지씩 맡았기에 서로의 소통이 가장 중요했다. 진짜 우리 별달 부른것 보다, 5일동안 조원들 이름을 더 많이 불렀던 거 같다....... 조원들간 소통이 개발의 8할 이상이다.. 라는걸 절실히 알게 됐던 프로젝트였다.

그래도 재밌었다. 조장으로서 조원들과 소통하는 방법도 반성하면서 더 좋은 방향으로 발전할 수 있었고, 밤새며 코딩을 한게 힘들지 않다면 거짓말이겠지만 하는 동안은 시간가는줄 모르고 재밌게 했다! 구럼 후기는 끝-!

 

아쉬운 점
기능

- git 협업 툴이 아직 서툴러 각각 branch를 설정하지 못했던 것, 중반쯤 다시 고민해서 적용할까 했지만 시간 관계상 하지 못했다. 다음 프로젝트때는 꼭 사용해봐야지.
- 초반 템플릿 적용을 고려하지 못한 것. 아쉽긴 하지만 후회는 하지 않는다 front맡아준 두 사람이 굉장히 깔꼼하고 귀여운 UI를 만들어줬기 때문!
- 이번에 hook을 사용했는데 session에서 받아온 정보를 타 훅에 뿌려주는 과정이 너무 삐그덕 했다. 이건.. 리액트 공부량 부족인듯,,,
- RDS는 사용했지만 EC2를 활용해보지 못했다. 이것도 담 프로젝트때 해보기
- 아직 기능 구현을 완벽히 하지 못했다. 강아지 정보도 전체가 넘어와야 하는데 이름밖에 안넘어오고, 테스트 용으로 사용하느라 자동으로 실시간 위치가 받아와지지 않고 위도/경도를 입력해야 한다. 후에 조원들과 리팩토링 하기로 했다!
팀플
- 평소 부족했던 공부량과, 밤을 새는 일정때문에 예민해져서 조원들에게 조금 더 좋은 프로젝트를 제공하지 못했던 것. 나를 위해서 뿐 아니라 같이 개발하는 분들을 위해서라도 꾸준한 개발 공부와, 컨디션 조절이 필요하다 느꼈다.