[사이드프로젝트][React JS] [완료] MOA

첫 사이드 프로젝트가 끝났다!! 디자인 알못인 내가 전체 디자인을 다 해서 퀄리티가 좀 그렇지만..ㅎㅎ..그래도 뿌듯!!

MOA 팀원 매칭 및 프로젝트 관리 플랫폼

첫 아이디어 회의때 내가 낸 아이디어다! 팀원 구인 플랫폼은 많지만 시간 조율, 공지사항과 같은 것들은 외부에서 주로 하는데 같이 있다면 좋을 거 같다고 생각했다. 대학생활을 외국에서 해서 잘 몰랐는데 비슷한 사이트가 있긴했다..(렛플..) 그치만 시간 조율까지 포함되어 있지는 않다. 시간 조율은 동아리할 때 많이 썻던 when2meet 을 참고하였다.

개발 기간은 기획 배포까지 약 두달 정도 걸렸다. Github 링크

개발

시연영상

- 내가 구현한 부분
컴포넌트 단위로 개발하였다.

• Header
• 로그인 유무에 따라 바뀌는 헤더
• 로그인 시 헤더에 사용자 이름 보이기
• 로그인/회원가입
• 로그인 화면은 모달로 띄우기
• 회원가입시 선호 위치 입력하기 (카카오맵 API 이용, 검색 가능)
• 글 쓰기/수정
• 카테고리, 모집 포지션, 태그, 에디터(제목, 내용) 컴포넌트로 구성
• 마이페이지
• 프로필 사진과 별점이 있는 사이드바 구현
• 소수점만큼 채워지는 별점 구현
• 탭 이동시 오른쪽에 보여지는 컴포넌트만 리렌더링
• 프로필(선호위치, 관심 태그 지정, 관련 링크, 상세내용(프로젝트 지원시) 수정)
• 내 활동(참여 중, 지원, 완료한 프로젝트 보기. 지원취소, 글 링크로 이동 가능)
• 내 작성글 (메인 컴포넌트 재활용. 글 수정/삭제 메뉴 추가)
• 내 관심글 (메인 컴포넌트 재활용. 관심글 등록/취소 추가)
• 기본정보 설정(프로필 사진, 이름, 닉네임, 비밀번호 변경)
• 홈 화면
• 새로운글, 모집중인 글, 추천 글, 인기글 탭으로 구현
• 카테고리, 태그 클릭 시 검색 기능
• 검색바로 글 검색하기

- 기술 스택

• React JS
• Style-Component
• react-kakao-maps-sdk
• react-quill
• react-icons
• Axios

첫 프로젝트라서 처음 써보는 것이 많았다. 카카오 맵이랑 리액트 퀼은 정말 유용했다!!

느낀점

백엔드와 협업은 처음이라 초반에는 걱정이 많았지만 다들 잘해주셔서 감사했다. 마지막에 프로필 사진 바뀌는 기능이 제대로 작동을 안해서 아쉬웠다.. 업로드한 사진이 잘 바뀌고 Api 전송도 잘 되는데 왜 안되는걸까ㅠㅠ 혼자 다시 해봐야겠다..

AWS에 배포할 때 'JavaScript heap out of memory'라는 이 에러가 자꾸 나서 시연 영상을 찍을 때는 로컬에서 돌렸다.. 이 문제도 해결해봐야겠다. 현재는 백엔드 서버를 내려서 MockData로 바꾸고 AWS 오류 해결중이다. MockData로 바꾸면서 메모리 문제도 해결해봐야겠다.
+ CSS, AWS, Node.js를 이번 기회에 더 공부해야겠다고 다짐했다!

프로젝트 아이디어, 기능, 개발, 배포 다 할 수 있는 경험이었다. 내 아이디어로 진행해보니 끝났을 때 엄청엄청 뿌듯했다!! 프로젝트 참여하면서 내가 생각보다 많이(?) 좋아한다는 것도 알게되었다. 평소에도 딱히 할 일이 없으면 프로젝트 개발하기 때문,, 정말 재밌다! 같이 개발해서 더더 재밌는 듯 :)
참여 중인 다른 프로젝트도 다음 달까지 마무리하는 것이 목표-!!

프로젝트 이후 보완해야할 것

- Mock Data로 변환해서 서버에 띄우기 (데이터 변환 진행중)
- Redux 적용해보기
- 코드 최적화