스파르타 코딩클럽 - 앱개발 종합반
1.React-Native [1. 개발환경 구축, 기본적인 코드, style 문법]
기본적인 style 속성을 잘 알아놓아야겠다. 개발환경 구성하기 필수 설치 프로그램 npm npm을 설치하면 node도 알아서 설치된다. npm -v, node -v로 설치가 되었는지 확인할것! yarn npm install -g yarn 으로 설치하려하는데 np
2.React-Native [2. 개발 진행 순서]
Element로 구성하여 먼저 틀을 만든다 가장 밑그림이 되는 View(혹은 ScrollView)를 container로 놓고, 그 위에 차근차근 겹겹이 element를 선언한다. Style을 세분화한다 가장 바깥쪽 container 가장 바깥을 차지하는 container는 borderWidth를 1로 선언하고 위치부터 확인해보면 훨씬 편하다. 가장 밑바탕...
3.React-Native [3. json과 map 함수]
json 다루기 어떤 데이터가 필요한지 나누어서 생성 딕셔너리{}의 키는 무엇으로 할것인지, 그 키에 해당하는 리스트[]에는 또 어떠한 딕셔너리/리스트/키/값으로 구성되어있을지 잘 나누어서 선언 사용할 페이지에서 선언 후 키 값을 참조하여 사용 예시처럼 let tip = data.tip 을 보면 data.json을 data로 선언한 후, data의 키값인...
4.React-Native [4. 간단한 소개 페이지 만들기]
헷갈렸던것들 가운데정렬 Text는 textAlign: 'center'!!!! alignItems vs justifyContent alignItems : 세로 방향만 따지는 정렬이다. 따라서 center 선언시 세로 기준 가운데 정렬이 된다. justifyContent : 가로 방향만 따지는 정렬이다. 따라서 center 선언시 가로 기준 가운데 정렬이 된...
5.React-Native [5. React의 필수 개념 : 컴포넌트, 속성, 상태, useEffect]
컴포넌트(Component) > 화면의 조각조각. 작은 컴포넌트들이 하나의 큰 컴포넌트를 구성한다. 속성(Props) > 컴포넌트에 데이터를 전달하는 기능! 규칙 1. Key & Value (content={content}) 형태로 전달 2. 컴포넌트 반복문 실행시, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것! 상태...
6.React-Native [6. State와 filter를 사용한 데이터 관리]
7.React-Native [7. React Navigation으로 페이지 이동하기]
앱에서 만든 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리! Expo에서 제공하고 있다. 1) React Navigation 설치코드 2) Stack Navigator > 컴포넌트에 페이지 기능 부여. 컴포넌트 -> 컴포넌트 이동 가능케함 => 페이지 이동 기능! 설치코드 예시코드 사용법 createStackNa...
8.React-Native [8. 공유하기, 링크]
공유하기 예시 코드 사용법 기존 "react-native" 라이브러리에서 Share 기능을 추가로 import 공유 기능을 실행시킬때 작동할 Share 기능을 작성한다. 예시에서는 Share.share 함수에 message를 작성하였다. 화살표함수로 share() 함수를 실행시킨다. 링크 설치코드 예시코드 사용법 expo-linking을 설치한다...
9.React-Native [9. 날씨 API 사용하기]
API 정의 앱에서 서버에 데이터 요청(Request)을 하기 위해서는 정해진 규칙을 사용해야한다. > 서버쪽에서 정한 규칙 = API(Application Programming Interface) 특징 일반적으로 JSON 형태의 리스트([]), 딕셔너리({}) 복합구조 화면이 처음 보여질때 필요한 데이터를 가져올때 필요 화면에서 데이터 저장과 관련된 동...
10.React-Native [10. Firebase로 데이터 관리하기]
Firebase 특징 구글에서 만든 서버리스(Serverless) 서비스 > Serverless 서버가 없다는 뜻이 아닌, 서버를 직접 만들 필요가 없다는 뜻! 필요한 서버 기능을 제공하는곳에서 서비스를 사용하기 때문에 매우 편리하다. 생성 및 설정 프로젝트를 생성한 후 앱/파일 저장소/리얼타임 데이터베이스를 생성해야한다. 앱 생성은 현재 개발중인 앱과 ...
11.React-Native [11. Firebase로 특정 데이터 조회/저장]
한꺼번에 모든 데이터를 가지고 페이지를 이동하는것은 상식적으로 느릴 수 밖에 없다. 이동하는 페이지에 필요한 데이터만 가지고 오는 기능이 필요한 이유! 예시코드 사용법 카드를 클릭하면 기존에는 content 데이터 전부를 넘겨주었었는데, 이를 {idx:content.idx}, 즉 primary key만 넘겨준다. {idx: 클릭한 카드의 idx}를 넘...
12.React-Native [12. Firebase로 저장한 데이터 조회/삭제]
저장한 데이터 조회하기 예시코드 사용법 리얼타임 데이터베이스의 like 폴더에서, 유저의 id에 해당하는 폴더의 데이터를 가져오도록 ref()에 주소값을 입력한다. 가져온 데이터가 존재할때, 그 화면이 보이도록 tip에 데이터를 입력하고, ready를 false로 변경한다. firebasedb에서 가져온 데이터가 Object라는 딕셔너리에 쌓여서 가져와...
13.React-Native [13. AdMob 기본설정, 배너 광고 추가하기]
AdMob 특징 앱에서 구글 배너 광고를 추가할 수 있도록 도와준다. 수익 현황 조회, 현금화도 가능하다. 광고 종류 총 6가지의 광고 종류를 제공한다. 이렇게 보니 그냥 배너 광고가 굉장히 양반이구나 하는 생각이 든다. 이 중 배너 광고와 전면 광고를 적용해본다
14.React-Native [14. AdMob 전면 광고 추가하기]
전면 광고 추가하기 카드를 클릭하면, 그 카드의 상세 정보 화면이 나타나기 전에 잠깐 나오는 전면 광고를 추가해보았다. 게임하거나 어플 쓰면서 가장 킹받는 광고 예시코드 사용법 "expo-ads-admob" 라이브러리에서 사용할 광고 기능을 가져온다. 전면 광고는