UPF Project 고도화 프로젝트
기존 고려대학교 해커톤 참가작 "안나소" 프로젝트의 아쉬운 점을 고려하여 고도화 프로젝트를 진행하였다.
활동 문서
리팩토링 목표
- 비효율적인 개발 구성이였던 Pure Django 기술 스택을 변경.
- Backend : Node.js를 활용한 REST API 서버 구현 및 API 제작
- Frontend : React/Redux를 활용한 프론트 서버 구현
As is
🔼 Main Page Design 중 일부 (로그인 전 화면)
이전 디자인의 경우 1박 2일 동안 이루어진 해커톤 참여작이라는 것과
HTML/CSS/JS만을 이용하여 개발한다는 것을 고려하여 디자인과 페이지 개수를 간소화
🔼 Main Page Design (로그인 후 화면)
이전 UI의 경우 로그인 전 사용자와 로그인 후 사용자에게 다른 메인 페이지를 띄워줌으로서
가입 전 사용자에게는 서비스 홍보, 가입 후 사용자에게는 포트폴리오 관리를 촉구
🔼 Contest Page Design (공모전 게시글 Read 화면)
공모전 게시글을 Read하는 페이지는 이전 디자인의 경우 배너 없이 카드 형태로 구현
🔼 Portfolio Detail Page (포트폴리오 및 프로필 화면)
이전 포트폴리오 디테일 페이지의 경우 간단한 이미지와 소개, 뱃지, 프로젝트 카드로 구성
To be
🔼 Main Page Design 중 일부 (로그인 전)
현재 디자인의 경우 기술 스택을 ReactJS로 변경한다는 점과
웹앱 서비스 혹은 모바일 Cross Browsing을 고려하여 디자인은 간소화하되 페이지 개수를 조절
🔼 Portfolio Detail Page (포트폴리오 및 프로필 화면)
참여 중인 공모전, 스터디를 더 눈에 띄는 위치에 이동시키고 강조, 프로젝트는 아래에 카드 형식으로 위치
뱃지에 대한 이미지와 디자인은 변경 예정
🔼 Contest Page Design (공모전 게시글 Read 화면)
배너를 추가하고 검색 창을 간소화하였으며 카테고리, 카드의 디자인 디테일은 비슷하게 유지
🔼 컴포넌트 별로 UI를 제작
역할
- 프론트엔드 파트를 맡아 React와 Redux-thunk를 이용하여 프론트 서버를 구성했습니다.
- AccessToken을 전역 상태로 관리하여 로그인 기능 구현
- 메인 페이지 제작을 통해 Slider Banner 구현
- 컴포넌트 구성에 있어서 Container/Presenter 디자인 패턴 방식의 프로젝트 구성을 했습니다.