'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 지금까지 프로젝트를 진행해왔는데,
다뤄보지 못했던 언어도 접하고, 각종 프레임워크, 라이브러리를 공부하다보니 서비스 개발에 더 흥미가 생기기 시작했습니다.
이번 기회를 토대로 앞으로도 꾸준히 'App' 개발을 공부해보려고 합니다.
현재 만든 프로젝트는 수업내용을 따라가며 만든 프로젝트이기 때문에 기존 수업에서 완성되는 최종 앱과는 크게 다르지 않습니다. 앱의 이름과 설명만 조금 수정했습니다.
https://expo.dev/@gnob/Mytips?serviceType=classic&distribution=expo-go
Expo
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
expo.dev
앱의 개요를 보기위해서 앱을 실행해보겠습니다.
구글 플레이스토어 (Googld Playstore)에 출시되어있는 프로젝트 입니다. 프로젝트 명(=앱 이름)은 마팁스(Mytips)이며, 꿀팁들을 관리할 수 있게 도와주는 어플입니다.
한글로 검색해도 어플이 표시됩니다.
'마팁스(Mytips)' 어플의 정보입니다. 구글플레이스토어에 기재된 정보 기준이며, 날씨를 수집해오기위해 위치 권한을 필요로합니다.
개발자 이메일인 sewd1224@gmail.com 을 통해 연락이 가능합니다.
<어플 내 Screenshot>
- 어플 내의 모든 스크린샷은 '아이폰 XR'을 기준으로 촬영되었습니다.
처음 어플을 실행시키면 스플래시 이미지가 먼저 나오고, 로딩화면이 출력됩니다.
그 로딩화면까지 지나게되면 메인화면 페이지가 나오게되는데,
1. 이 화면에서는 '오늘의 날씨'를 가져올 수 있는 OpenAPI를 활용하여 현재 유저가 위치한 지역의 날씨 정보를 보여주게됩니다.
2. 전체보기, 생활, 재테크 ... 등 버튼이 활성화 되어있습니다.
- 카테고리 별로 분류할 수 있는 버튼이며, TouchableOpacity 로 구현이 되었습니다.
- 예로, '생활'버튼을 누르게되면 생활에 관련된 리스트화된 꿀팁들이 분류되어 화면에 보여지게 됩니다.
3. 꿀팁 정보들
- 현재 가져온 정보들은 수업에서 활용된 꿀팁 정보들입니다. 내용과 관련된 썸네일 이미지가 왼쪽에 위치하고,
유저들에게 필요한 정보를 알맞게 보여줄 제목이 굵고 큰 글씨로 출력됩니다.
- 하위요소로는 실제 꿀팁 정보가 담겨있는 상세 내용들이며, 3줄 이상 출력이될 시 ... 으로 구분하여 생략을 합니다.
메인화면 우측 위의 '소개 페이지' 버튼을 누르면 이 어플을 개발한 개발자의 소개페이지로 이동이 됩니다.
저는 '스파르타코딩클럽'의 수업내용을 기반으로 소개페이지를 작성하였고, 밑의 [인스타그램] 주소를 수정하여 입력하였습니다.
메인화면의 리스트화된 꿀팁들 중 하나를 눌러보게되면, Card 섹션으로 넘어가 상세내용이 화면에 보여지게 됩니다.
이 화면에는 썸네일이 좀 더 크게 출력되고, 3줄이상으로 생략되어있던 꿀팁 상세 정보 또한 전부 읽을 수 있습니다.
그 밑으로는 '팁 찜하기' / '팁 공유하기' / '외부 링크' 등 버튼이 활성화 되어있고, 실제 기능 또한 가지고 있습니다.
'팁 찜하기' 버튼을 누르게되면 '찜 완료!' 라는 팝업과 함께 유저가 원하는 팁을 저장할 수 있게됩니다.
'팁 공유하기' 버튼 또한 각종 SNS에 글을 공유할 수 있게 구현되었습니다.
'외부 링크'를 클릭하게되면 실제 꿀팁 정보가 담긴 링크를 출력할 수 있게 구현해야합니다.
이번 프로젝트에서는 이 수업을 수강할 수 있던 '스파르타코딩클럽' 사이트로 연결을 해놓았습니다.
카테고리가 있는 부분을 우측으로 슬라이딩하여 넘기면, 맨 우측에 '꿀팁 찜' 버튼이 있습니다.
이 '꿀팁 찜' 버튼은 지금까지 '팁 찜하기' 버튼을 통해 꿀팁들을 찜해놨던 것을 한번에 모아 보여주는 페이지 입니다.
현재 '팁 찜하기' 버튼을 통해서 찜해놓은 2개의 꿀팁들이 모아져 출력되는 것을 확인하실 수 있습니다.
'꿀팁 찜' 화면에서도 '자세히보기' 버튼을 누르게되면 그 꿀팁의 상세페이지로 이동할 수 있게 구현되어있는 모습입니다.
'꿀팁 찜' 화면에서 '찜 해제' 버튼을 누르게되면 '삭제 완료'라는 팝업과 함께 저장된 꿀팁이 지워지게됩니다. ('꿀팁 찜' 화면에서만 사라지게됩니다.)
수익성 앱 만들기 마지막 주차때 배웠던 애드몹 또한 배너 형태로 어플 밑에 활성화 되어있는 모습입니다.
지금까지 5주에 걸쳐 프로젝트를 진행해오면서 만들게 된 어플 '마팁스(Mytips) - 나만의 꿀팁 관리 앱' 이었습니다.
학교 수업과 독학으로 어플을 만들때는 단순히 index.html로 그려서 보여지는 것으로만 구현을 했었는데,
이렇게 실제로 DB와 연동도 해보고, 날씨도 OpenAPI를 통해 가져오게되고,
여러 페이지를 구현하여 다양한 모습이 있는 어플을 만들어보니 느낌이 색달랐습니다.
어려웠던 점으로는 아무래도 Expo나 OpenAPI, 구글 플레이스토어 개발자 계정 가입 등 새롭게 접하는 부분이 많다보니
조금이라도 다른 방법으로 찾아보거나 버전이 다른 등의 문제가 생기면 그 순간만큼은 1시간, 2시간 내내 문제해결에 급급했습니다. 코드 부분에서의 오류도 찾기 위해 노력했었고, Slack으로 멘토분들과 소통하며 질의응답을 하다보니 효과적으로 해결할 수 있었고, 그 과정에서 개발 시 소통의 중요성, 정보 검색의 필요성에 대해서도 많이 느끼게 되었습니다.
멘토분의 친절한 설명과 다양한 수업자료로 만족할만한 성과로 어플제작을 잘 마무리 할 수 있었습니다.
지금은 출시된 어플이 수업내용 기반의 어플이지만, 수정을 거듭하여 저만의 아이디어가 담긴 어플을 만들고 싶은 생각이 들었습니다.
리액트, 자바스크립트 등 이번 강의를 통해 새롭게 접하게 되었지만 효율적이고, 직관적인 코드 사용이 많아서 리액트나 자바스크립트 언어에 관심이 생기게 되었던 강의였습니다.
'Programming > Javascript_자바스크립트' 카테고리의 다른 글
| [Javascript 공부일지2] 1주차 - 2 (웹개발 - jQuery (제이쿼리)) (0) | 2022.09.03 |
|---|---|
| [Javascript 공부일지2] 1주차 - 1 (웹개발 시작하기 - 중고거래 사이트 만들어보기) (0) | 2022.09.02 |
| [JAVASCRIPT 공부일지] 5주차 - 3 (수익성 앱 만들기 - 배포하기) (0) | 2022.08.29 |
| [JAVASCRIPT 공부일지] 5주차 - 2 (수익성 앱 만들기 - 애드몹 (배너생성)) (0) | 2022.08.20 |
| [JAVASCRIPT 공부일지] 5주차 - 1 (수익성 앱 만들기 - 앱에 광고넣기) (0) | 2022.07.07 |
