[모각코] ReactJS 프로젝트 시작하기(1) - 기능,UI/UX 구체화

이번 모각코시간에는 React 개념에대한 직접적인 학습보다는 팀원들과 만들어볼 프로젝트에대해서

얘기해보고 기능과 UI/UX를 구체화 시켰다.또한 페이지별/기능별로 파트를 나눠서 다음 모각코 회차까지 개발해오기로하였다!

 

프로젝트 구체화

저번에도 기재했지만 ✨✨리액트를 활용한 모현 맛집지도✨✨를 제작하는것이 우리 프로젝트의 주된 주제였다.

물론 이미 에타와 같은 학생커뮤니티나 정리해놓은 서비스들은 기존에 존재하지만 직접 고학번(나름)의 시각에서 생각햇을때 필요한 정보들이 잘 보이게 분류된 서비스는 없다고 생각했다!

따라서 이런부분들을 위주로 서비스를 분류해보았다.

 

우선 데이터의 출처는 에타, 네이버/카카오지도 후기, 직접방문한 가게, 지인추천등등으로 모아보았다(4-50개정도 수합될것으로보인다)

또한 엑셀파일로 정리를 햇는데 이번주중으로 리액트로 csv형식의 데이터를 json형식으로 바꾸거나 혹은 아예 데이터베이스에 올리는 방식을 알아보려고한다.

 

아직 서비스의 완전 세부적인 기능(ex 카테고리 분류는 어떻게? 사용자에게 몇가지,어떤 정보를 제공할건지?)는 안정한 상태에서 대략적인 초안으로 작성한 피그마와 해당 엑셀파일을 바탕으로 회의를 해보면서 서로 피드백을 해보았다

 주로 피그마의 댓글(comment) 피켓 기능으로 수정사항들을 기재해두었다

쿠개 결정된/새롭게 추가하기로 한 기능은

1. 카테고리

- 종류를 한식,양식,이런식으로 단편적으로 나누기보다는 우리학교 인근 음식점들의 특징을 고려하여

 고기/술집 , 양식/일식 , 패스트푸드(분식) , 중식 , 한식, 카페/디저트

이렇게 6가지로 나누었다.

 

2. 위치정보

우리 학교는 크게 외대사거리/모현사거리/교내/배달 혹은 차로 이동해야할 거리로 

나뉘기때문에 도로명주소를 제공하는것 뿐만아니라 해당 대분류를 제공하기로했다.

더불어 가능하다면! 찾아가는 길도 알기쉽게 정리한 데이터를 제공할까한다

하지만 이는 모두 수작업으로 기입해야기때문에 시간이 남는다면 추가적으로 제공할 계획이다

 

3. 키워드제공

우리 서비스를 누가 이용할지에대해서 생각해보았는데,

1) 기숙사/자취/통학등 학교학생들이 점심/저녁식사를 하기위해 

2) 밥약

3) 신입생들은 아직 음식점 정보를 모르기때문에 찾아보기위해

이기때문에 검색기능으로 원하는 음식점 정보를 얻기위해서는 키워드로 검색이 가능한 기능을 구현하는것이

불가피하다고 생각했다.

따라서 키워드를 아래와 같이 제공하기로했다

1.양식/한식과 같은 음식 대분류

2. 대표메뉴(소분류) ex 마라탕,양꼬치같은 대표메뉴

3. 혼밥,밥약과같은 추천키워드

 

더불어 1,3번의 경우 메인페이지에서 버튼을 클릭함으로써 한눈에 확인해볼수있게끔 하려고한다.

협업 워크스페이스 준비 

보통 프로젝트를 하면 문서화를 하거나, 코드를 공유하는등의 워크스페이스 사용이 필수적이다

따라서 아래와같은 워크스페이스들을 이용하려고한다

• 구글드라이브,노션
  • 구글드라이브 : 페이지에 들어갈 사진이나 api파일을 엑셀,문서등의 형태로 자유롭게 공유할수있으므로 사용
  • 노션: 회의록및 일정공유를 관리하기에 심플하고 강력한 UI를 가지고있어 사용
• 깃허브
  • 각자 분담하여 개발한 코드를 합치고 공유
• 슬랙
  • 깃허브,노션과 연동하여 업데이트 될때마다 알림기능으로 사용
  • 개발에 참고하면 좋을 블로그나 참고자료 링크 공유

 

 

더불어 깃허브에 레포지토리를 파서 collaborator를 추가하고, 각자 개발에 사용할 파일을 미리 생성하고 네이밍 규칙을 지정하였다.

개발 파트분배

위와같이 라우터, 파일이름을 미리 같이 상의하여 정하고 파일을 업로드하였다.

 

나는 해당 프로젝트에서 검색과 localStorgae( 회원가입기능을 넣는대신 이름, 스크랩 기능을 local에 저장하는방식으로 구현!), 그리고 csv 연결파트를 맡게되었다🧑‍💻

 

우선 다음 모각코회차인 수요일까지 csv연결은 최대한 구현하고, 가능하다면 localStorage도 구현해보려고한다.