영상의 Self Discovery

순식간에 지나간 5주. 10월 말부터 달렸던 5주간 코딩공부를 마치며, 남기는 회고록 #스파르타 코딩클럽 #앱개발3기 1. 수강목적 1년 전, 앱을 만들어보고 싶다는 막연한 생각이 있었다. 여행을 좋아해서 여행과 관련된 앱을 만들고 싶다는 생각만 하고, 그 뒤로 그 꿈은 접은 채 회사를 다니고 있었다. 회사에서 바로 옆 팀이 앱을 기획하고 만들고 있는데, 앱을 조금씩 고도화해나가는 모습을 보며, 앱 개발 과정은 무엇일지 궁금했다. 지금 하고 있는 일과는 조금 벗어났지만, 나만의 앱을 만들고 싶다는 생각과 사이드 프로젝트로 진행하기 좋다는 생각을 하게되었다. 2. 배운점 / 잘한 점 앱 개발을 Android와 iOS 두가지 운영체제에서 각각의 언어로 해야한다고 생각했는데, 리액트 네이티브를 통해 자바스크립..

앱 개발 Project 2020. 11. 26. 22:08

앱개발강의 5주차 (2)- 배포하기 FAQ는 아래 링크 참고 https://www.notion.so/FAQ-fe187d80ecc24291af6d3411e71b19a3 [배포하기] 배포를 위한 체크리스트 앱을 배포하기 위해 필요한 것 1) 앱 로고 2) 스플래시 스크린(앱 시작 초기 화면) 3) 앱 마켓에 올릴 설명 이미지 4) 앱버전 관리, 인증서 관리 - 이건 Expo의 도움을 받을 수 있다. [배포하기] 스플래시 스크린 앱을 열면 가장 먼저 보이는 로고가 뜨는 이미지. 온라인 포토샵을 써보자. 사진 에디터. PIXLR https://pixlr.com/kr/x/ 기본적으로 Expo에서 제공해주는 이미지가 있다. assets에서 splash 파일을 열어보자. [배포하기] 로고준비 로고는 icon.png ..

앱 개발 Project 2020. 11. 26. 00:10

[5주차 강의] 구글 애드몹 [수익형 앱] 앱에서 수익내기 수익내는 방법은 다양하다. 유료앱 배포 수익 모델 앱 내 배너광고 앱 콘텐츠(인 앱 결제) 구독 수익 앱 개발 용역 수익 외부 브랜드 광고 수익 앱 내 배너 광고 수익 모델이 앱 개발 초보자에겐 가장 쉽다. [구글광고] 애드몹(AdMob) - 설정 구글 애드몹 광고 종류 - 4가지 유형 배너, 전면(전체 페이지), 리워드, 네이티브 고급 광고 구글 애드몹 역시 Expo에서 지원 Expo에서 애드몹 설치하고, app.json 하단에 android 및 ios 부분을 추가한다. [구글 광고] 가로배너 생성 안드로이드, iOS 둘다 생성 앱 추가로 생성하고, 생성된 ID를 googleMobileAdsAppId 부분에 넣어준다. 그리고, 광고 단위 만들기..

앱 개발 Project 2020. 11. 25. 22:22

4주차 (2) 파이어베이스 [서버 리스] 서버를 사용만 하자 서버를 만든다는건 많은 일들을 수반해야하는데, 꼭 하지 않아도 서버 제공하는 곳에서 서비스 이용하면 된다. 꿀팁 앱에서는 어떤게 필요할까? 1. 꿀팁을 서버로부터 가져오기 2. 꿀팁 찜하기 [파이어베이스] 구글에서 만든 서버리스 서비스. 파이어베이스도 프로젝트를 생성해야한다. 가입, 프로젝트 생성, 사용할 파이어베이스 서비스 활성화. https://firebase.google.com/ [파이어베이스] 파이어베이스를 앱에 연결하다 프로젝트 생성 후에 프로젝트 내에서 앱 생성하기. 파이어베이스 입장에서 어떤 언어로 앱을 만드는지를 알아야한다. 우린 자바스크립트. 즉 웹 개발 기술 언어로 만들고 있다. 생성한 뒤에, 코드 확인하고 expo insta..

앱 개발 Project 2020. 11. 25. 22:18

4주차 강의 [오늘 배울 것] 화면을 그려왔다면, 이제 서버를 그릴 것이다. 서버리스. 서버를 직접 구축하지 않고 사용하는 것. 그 중 파이어베이스를 배울 것이다. [앱과 서버] 우리 앱에서의 서버 앱과 서버의 동작방식은 두가지. 서버가 제공하는 도메인 / 서버가 만들어놓은 함수를 이용하기 둘다, 서버가 정한 규칙을 지켜야한다. API는 정해져있는 규칙을 의미한다.(서버쪽에서 정한것) 서버에서 JSON 데이터 형식으로 응답을 해준다. 딕셔너리나 리스트 값을 준다. 데이터를 요청하는 시점은 언제일까? 1) 앱 화면이 그려진 다음 데이터 준비 메인 페이지가 켜지자마자 실행되는 함수는 useEffect. 이 안에서 API를 넣어서 요청을 할 것이다. 컴포넌트에서 상태 관리를 한다는 것. (useState로 상..

앱 개발 Project 2020. 11. 20. 22:00

[Expo 앱다운 앱기능] 앱 상태 바(Status Bar) 관리 스마트폰 맨 위 상태바. expo install expo-status-bar 로 설치하자. [앱 페이지 적용] 네비게이터 네비게이터. 앱에서 만든 컴포넌트들을 페이지화 하고, 페이지들끼리 이동 가능하게해주는 라이브러리 네비게이션 설치 코드 yarn add @react-navigation/native 네이게이션 추가 설치코드 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view [앱 페이지 적용] 설치 - 스택네비게이션 0..

앱 개발 Project 2020. 11. 19. 00:25

앱개발 3주차 [앱 필수 기초지식03] 상태(useState)와 useEffect 리액트는 상태가 바뀌어야 화면이 바뀐다. 상태란, 컴포넌트에서 보유/관리되는 데이터. state는 useState로 생성하고, setState함수로 변경 가능. useEffect 사용방법은 정해져있다. 화면이 그려진 후에 가장 먼저 실행되는 함수. 데이터를 준비할 때 사용하는데, 데이터를 서버나 어디선가부터 받아서 상태에 반영하게된다. 화면이 그려지고 -> 서버에 데이터를 요청하여 받고 -> 상태 데이터가 update되어 화면이 다시 그려진다 //useState 사용법 //[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수 //setState는 state를 변경시킬때 사용해..

앱 개발 Project 2020. 11. 19. 00:23

[복습] 나만의 꿀팁 앱 상세화면 만들어보기 DetailPage.js 파일을 하나 만들자. App.js에 import 구문 넣어줘야된다. return에는 DetailPage 넣기. 변수명을 쓰려고할 때는 { } 안에 감싸준다. ex) {tip.title} 그 자체에 고유한 영역이 있을 때, flex를 쓸 필요가 없다. (ex, textContainer, VIew) 내부에 여러가지 영역을 분배할 예정일 때는 써서 명시해주자. [앱 필수 기초지식01] 컴포넌트 Component : 정해진 태그들을 사용해 만든 화면의 일부분 (메인, 어바웃, 디테일 페이지들 또는 그 페이지 안에 UI 요소들이 될 수도 있다. 분할해서 따로 관리한다.) 상태(State) : 하나의 파일을 뜻함. 그 안에서만 관리할 데이터 속성..

앱 개발 Project 2020. 11. 15. 00:10