[KT AIVLE] 빅프로젝트 개발일지 1일차: 리액트 대시보드 구현

이 글에서는 프로젝트의 개요, 본격적인 개발을 진행하기에 앞서 어떻게 내용을 구성하고 설계하였는지에 대해 간단히 기술하였다. 또한 대시보드 구현을 하면서 중요한 부분은 무엇이었는지, 그 결과 내가 배우고 느낀 것이 무엇이었는지에 대해 정리해보았다. 상세 개발 내용에 대해서는 이 글에 담기엔 글이 너무 길어질 것 같아 별도 포스팅을 게시한다.

 

 

1. 프로젝트 개요

(1) 프로젝트의 목적 및 나의 역할

이 글은 KT 에이블스쿨 수업의 마지막 단계인 빅프로젝트에 대한 내용을 기재하기 위해 작성되었다.

나는 팀장으로 전체 프로젝트 흐름에 대해 설계하고, 프론트와 데이터 분석, AI 모델링을 중점으로 진행한다.

 

(2) 현재 상황

지난 주에 팀원들과 함께 요구사항 및 UI/UX 설계서 작성을 포함하여 전체 프로젝트를 설계하였고, 이번 주부터는 지난 주에 작성되었던 내용을 기반으로 웹 서비스를 구현한다. 그러나 아직 지난 주에 올렸던 심의 요청에 대한 결과가 나오지 않았다. 혹시 통과되지 않았을 때를 대비하여 활용 가능한 데이터셋과 핵심 기능을 추가적으로 탐색함과 동시에 웹 개발의 토대가 될 프론트/백엔드 서버 구축을 진행한다.

 

(3) 개발 개요: Front-end

내가 맡은 프론트의 경우에는 리액트 프레임워크를 사용하기로 했다.

프론트를 구현하기 위한 프레임워크로는 리액트를 선택했다. 팀원들이 개발 경험이 적고, 프로젝트의 퀄리티 향상을 위해서는 웹 개발 시간을 단축해야 하는 상황이나, 리액트는 컴포넌트를 재사용 가능하기 때문에 이러한  팀원들이 웹 프론트 개발을 빠르게 진행할 수 있도록 필요한 컴포넌트를 구현하려고 한다.

또한 우리는 휴대 전화, 태블릿, PC 에서 모두 사용 가능한 플랫폼을 구현하여야 하므로 반응형 웹 화면을 구축한다.

 

 

---

 

 

2. 개발 진행에 앞서...

앞으로 작성될 포스트들은 React 서버 구축과 Github 연동이 완료되었다는 것을 전제로 진행된다.

대시보드는 Github에서 오픈소스로 제공되고 있는 Dashboard template을 차용하였으며, 적절한 코드만 추출하여 우리가 원하는 형식에 맞게 변경하여 적용하였다. 참고한 템플릿은 최하단 References에 기재하겠다.

 

 

리액트 환경 구축 및 프로젝트 생성은 아래 링크를 참고하도록 하자.

https://street-developer.tistory.com/36

React.js 환경 구축

 

 

또한 해당 프로젝트는 Visual studio code와 Github을 연동하였다. 전체 코드는 아래 링크에서 확인할 수 있다.

https://github.com/dev-hjJoo/inventory-helper

GitHub - dev-hjJoo/inventory-helper