[Toy Project 개발일지]React를 활용한 웹 + 어플리케이션 제작 - (1)

 

프론트엔드 쪽을 사용해서 웹 + 어플리케이션을 제작하려고 한다.

 

웹과 어플리케이션을 같이 사용하기 위해서 React - Native를 사용해서 웹 + 어플리케이션을 동시에 구동할 수 있는 반응형 웹 + 앱 디자인을 만들기로 결정하였다.

 

[프로젝트 계획]

 

일단 어떤 웹을 만들지 생각을 했는데 주제는 날씨 쪽의 데이터를 활용하기로 마음을 먹었다.

 

그 이유는 날씨는 전 프로젝트에서 OpenWeather API를 통해서 데이터를 받아서 사용한 경험이 있어서 데이터를 구하는 과정도 까다롭지 않는 것을 택했다. 처음에 API를 통해 데이터를 받아 데이터베이스에 저장하거나 내보내는 방식을 통해서 데이터 구축 과정에 대한 부담감을 처음부터 가지고 시작하고 싶지는 않았다.

 

일단 프로젝트 계획 세부적인 내용으로는

• 목표 정의 :                    날씨와 음식을 활용하여 앱을 사용하는 사람에게 날씨에 맞춘 음식을 제공함
• 사용자 요구사항 분석 :     X(Toy Project라 추후 기술)
• 와이어프레임 작성 :         밑에 그림으로 작성
• 기술 스택 결정 :              Pigma, React-Native

 

[프로젝트 개발환경]

 

• Github :                    깃허브 리포지토리를 활용해 원격저장소를 통한 버전관리
•  

[프론트앤드 개발]

• React를 이용해 웹사이트 구조 및 컴포넌트 작성 : 메인 페이지, 날씨 관련 식사가 나올 경우, 친구에게 찔러보기 메뉴를 활용하여 카카오 및 앱 api를 활용하여 버튼 클릭시 내 친구에게 먹고싶은 음식 전달
• CSS 및 디자인 작업 : 반응형 웹 디자인, 애니메이션 등을 적용
• API 연동 : 백엔드와 통신하기 위한 OpenWeather API 호출 진행 

 

[백앤드 개발]

• Firebase 이용해 서버 구축 : REST API를 활용하여 웹사이트의 기능을 지원하는 API를 개발
• NoSQL 데이터베이스 설계 및 구축 :사용자, 음식점 등의 정보를 저장할 테이블을 생성하고 관계를 설정

 

 

 

[앱 와이어프레임 제작]

 

피그마로 앱 + 웹 와이어프레임을 제작

 

 

 

근데 좀 더 예쁘게 하고 싶은데 디자인은 젬병이라 쉽게 되지는 않는다.

 

아무튼 이런 식으로 짜서 활용하는 걸로