[React] Snack Travel - 해커톤 // **Readme 꾸미기**

들어가며

이력서에 수상내역으로 2줄을 추가할 수 있게 되었다! 부트캠프가 끝난 후, 팀원들과 함께 해커톤 대회를 나가게 되었다.

처음에는 막연하고, 내가 할 수 있을까? 했던 마음이 좋은 결과로 돌아와서 너무 기뻤던 ...!

사실 해커톤대회는 사업가능성이 중요한 점수의 기준이고, 발표력이 중요한 영향을 끼치는 것 같다.

코드도 물론 열심히 짰지만, 팀원들과 함께 하나의 의견도 버려지는 것 없이 경청하면서 서로 존중하면서 초기부터 기획을 해 나간 결과

웹사이트의 활용성과 사업가능성이 인정받아 심사위원들에게 좋은 평가를 받았던 것 같다.

 

결론은.. 두둥! 

23.09.21 ~ 23.09.22  ICT 이노베이션 스퀘어 AI 해커톤 대회 1등
 데이터를 활용한 관광 서비스 개발 분야(강원정보문화산업진흥원장상 수상)

 

 

프로젝트 설명

GitHub - Dino-Soul/client

1분 미만의 짧은 영상을 활용한 지역관광 서비스

2030 여행자들을 메인 타겟으로 한 위치기반 숏폼 SNS

‘이번에 여행가는 곳엔 어떤 핫플들이 있을까?’ 유튜브 인스타 등의 대형 플랫폼에서도 위치를 기준으로 보여주는 영상들은 없기에 직접 만들어 봤습니다. 지도를 기준으로 여행지를 확인하고 편하게 여행계획을 준비해보세요!

깃허브  스낵트레블 프론트엔드 깃허브

노션     스낵트레블팀의 워크스페이스

▰ 프로젝트 기간 : 2023.09.21-2023.09.22 (2일)

▰ 참여 인원 : 4명 (Frontend 2, Backend 2)

▰ 사용 기술 : React, React-query, Redux-toolkit, Axios, Styled-component

담당 역할

1. 페이지 디자인
2. ▰ Figma를 이용한 전체 페이지 디자인 구성
3. 카카오맵
4. ▰ 카테고리별 여행추천지와 현재 내위치, 숏폼등록지 지도에 나타냄
5. 숏폼 등록,수정,삭제
6. ▰ Dropzone 라이브러리 사용하여 동영상 미리보기 및 재생 구현

로고

white version

 

black version

 

시연영상

 

기술적 의사결정

1. react-query: 클라이언트쪽 데이터가 아닌 서버쪽 데이터 관리를 더 원활하게 하기위해 사용 리액트쿼리 코드를 사용 시 길게 작성해야 하는 기존 코드들을 짧은 코드로 대체하여 복잡한 설정없이 사용을 용이하게 해주며, 데이터 관리 및 캐싱도 효율적으로 관리하게 해주는데 데이터 업데이트 및 지연 로딩, 메모리 관리 등 옵션들을 통해 유지보수를 편하게 해줌
2. Styled Components: "Styled Components"는 컴포넌트 기반으로 스타일을 정의하므로, 각 컴포넌트에 필요한 스타일을 함께 정의하고 유지할 수 있음 스타일을 JavaScript 코드 내에서 작성하므로 변수, 조건문, 반복문 등을 활용하여 동적으로 스타일을 생성할 수 있고 컴포넌트에서 사용되는 색상, 글꼴 등의 테마 정보를 쉽게 관리할 수 있음
3. Redux-toolkit: 전역적으로 관리해야 하는 데이터가 있었고, 컴포넌트 구조가 복잡하다 보니 리덕스로 상태관리를 해야 데이터를 활용하기 좋을 것 같았음. npm trends 지표에서 보면 리코일은 편하지만 아직 이슈도 많고, 정식버전이 배포되지 않은 배타이다. 그리고 리덕스를 배우면 리코일은 상대적으로 배우기 쉽고, 기본적으로 많은 기업들에서 리덕스구조의 보일러플레이트가 이미 잡혀있기 때문에 리덕스를 더 사용하고 있고, 회사에 입사했을 때 당황하지 빠르게 적응할 수 있을 것 같아서 리덕스를 선택하였음.

주요기능

‘이번에 여행가는 곳엔 어떤 핫플들이 있을까?’ 유튜브 인스타 등의 대형 플랫폼에서도 위치를 기준으로 보여주는 영상들은 없기에 직접 만들어 봤습니다.

✅ 영상이 많이 올라온 곳을 한눈에 확인할수 있어 그 지역의 핫플레이스를 확인 할 수 있어요!

✅ 한국관광 데이터랩의 신뢰성있는 지역관광 정보를 지도 화면으로 한눈에 확인할 수 있어요!

✅ 중독성 있는 숏폼 영상을 통한 지역 홍보가 가능합니다!

✅ 좋아요와 댓글기능으로 유저간의 소통이 가능합니다!

 

---

 

FE / React 최은지

• 깃허브 : https://github.com/hotcream3904
• 블로그 : https://yogidogi11.tistory.com/

FE / React 이남규

• 깃허브 : https://github.com/tph7897
• 블로그 : https://skarbcoding.tistory.com/

<h1>Snack Travel</h1>

<h2>프로젝트 설명</h2>


1분 미만의 짧은 영상을 활용한 지역관광 서비스

- 23.09.14~09.24 (1주)
- ICT이노베이션 스퀘어 AI해커톤 대회 - 데이터를 활용한 관광 서비스 개발 분야 <span style="color:yellow">**1등**</span> 상 수상(강원정보문화산업진흥원장상 수상)



<h2>로고</h2>
<img width="200" alt="IMG_5966 PNG" src="https://github.com/project-team-six/FE/assets/130561236/2b55db4d-d9a3-4394-a584-7144b2629ea2">
<img width="200" alt="IMG_5966 PNG" src="https://github.com/project-team-six/FE/assets/130561236/e30724d9-ab52-49e2-a05c-80efdddfa655">

<br>

<h2>시연영상</h2>
<img width="1163" alt="스크린샷 2023-09-04 오후 12 23 20 (1)" src="https://github.com/project-team-six/FE/assets/130561236/b5fa34bc-ca67-47dd-ab9c-3be0c099ca52">
<img width="1163" alt="스크린샷 2023-09-04 오후 12 23 20 (1)" src="https://github.com/Dino-Soul/client/assets/130561236/4c9761dc-dafe-440c-b7ab-66891677957a">




<h2>기술적 의사결정 </h2>

1. react-query:	클라이언트쪽 데이터가 아닌 서버쪽 데이터 관리를 더 원활하게 하기위해 사용
리액트쿼리 코드를 사용 시 길게 작성해야 하는 기존 코드들을 짧은 코드로 대체하여 복잡한 설정없이 사용을 용이하게 해주며, 데이터 관리 및 캐싱도 효율적으로 관리하게 해주는데 데이터 업데이트 및 지연 로딩, 메모리 관리 등 옵션들을 통해 유지보수를 편하게 해줌


2. Styled Components:	"Styled Components"는 컴포넌트 기반으로 스타일을 정의하므로, 각 컴포넌트에 필요한 스타일을 함께 정의하고 유지할 수 있음
스타일을 JavaScript 코드 내에서 작성하므로 변수, 조건문, 반복문 등을 활용하여 동적으로 스타일을 생성할 수 있고 컴포넌트에서 사용되는 색상, 글꼴 등의 테마 정보를 쉽게 관리할 수 있음


3. Redux-toolkit:  전역적으로 관리해야 하는 데이터가 있었고, 컴포넌트 구조가 복잡하다 보니 리덕스로 상태관리를 해야 데이터를 활용하기 좋을 것 같았음.
npm trends 지표에서 보면 리코일은 편하지만 아직 이슈도 많고, 정식버전이 배포되지 않은 배타이다. 그리고 리덕스를 배우면 리코일은 상대적으로 배우기 쉽고, 기본적으로 많은 기업들에서 리덕스구조의 보일러플레이트가 이미 잡혀있기 때문에 리덕스를 더 사용하고 있고, 회사에 입사했을 때 당황하지 빠르게 적응할 수 있을 것 같아서 리덕스를 선택하였음.



<h2>주요기능</h2>

‘이번에 여행가는 곳엔 어떤 핫플들이 있을까?’ 유튜브 인스타 등의 대형 플랫폼에서도 위치를 기준으로 보여주는 영상들은 없기에 직접 만들어 봤습니다.

✅ 영상이 많이 올라온 곳을 한눈에 확인할수 있어 그 지역의 핫플레이스를 확인 할 수 있어요!

✅ 한국관광 데이터랩의 신뢰성있는 지역관광 정보를 지도 화면으로 한눈에 확인할 수 있어요!

✅ 중독성 있는 숏폼 영상을 통한 지역 홍보가 가능합니다!

✅ 좋아요와 댓글기능으로 유저간의 소통이 가능합니다!

<br>
<hr>
<br>

FE / React  최은지
- 깃허브 : https://github.com/hotcream3904
- 블로그 : https://yogidogi11.tistory.com/

FE / React	이남규
- 깃허브 : https://github.com/tph7897
- 블로그 : https://skarbcoding.tistory.com/