2021년 경기대 컴퓨터공학부 캡스톤디자인

viECO

viECO는 전기차/수소차의 충전소와 관련 및 연계되는 정보를 제공하는 프로젝트입니다. 이 리포지토리는 React를 사용한 웹 애플리케이션 클라이언트입니다. 간단하며 편리한 사용 경험과 매끄러운 개발 협업에 중점을 두어 설계되었습니다.

https://nklcb-capstone.github.io/vi-eco-client/#/

프로젝트의 전체적인 구조

• 호스팅 서비스로 GitHub Pages를 이용하며 main 브랜치에서 배포합니다.
• AWS의 백엔드 서버를 거쳐 여러 가지 API를 이용합니다.
• 지도를 그리기 위해 카카오 지도 API를 사용합니다.
• 크롤링한 자료도 백엔드 서버를 통해 데이터베이스에 저장하고 접근합니다.

프로젝트의 주요 관심사

• 적은 개발 리소스 투입을 지향

코드 컨벤션

• Recommended ESLint에 기반한 스타일을 준수
• Prettier를 적용하여 코드 컨벤션을 유지
• 적정 수준으로 TypeScript 사용
• 유연성을 위해 linting은 일괄적이지 않으며 개발자가 자율적으로 하도록 함

오픈 API 사용

• CORS 문제로 클라이언트 사이드 호출이 불가능하여 백엔드를 경유해 사용
• 서버와 클라이언트 간에 access-control-allow-origin 헤더 설정으로 REST API 통신

UI 개발

• UI 프레임워크를 이용한 심플하고 좋은 UI 제작
• Ant Design 프레임워크 사용

카카오 지도 API

• 지도 표현을 위한 카카오 지도 API 사용
• 링크 https://apis.map.kakao.com/web/sample/

브랜치 관리 전략

• 개발시 인원 또는 기능마다 브랜치를 만들어 개발
• 개발 후 main 브랜치에 머지
• 배포는 main 브랜치에서 진행

사용 기술 및 환경

ES6, TypeScript, React, Sass, CSS Module, Webpack, ESLint, Prettier, Ant Design, Axios, GitHub Pages

Wiki

비공개 Notion 워크스페이스에 기록

배포

GitHub Pages를 사용한 배포

주요 기능

발표 자료

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

• yarn start
• yarn build
• yarn deploy

Learn More About Create React App

This project was bootstrapped with Create React App.

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.