앱개발 스터디 (9) 썸네일형 리스트형 StyleSheet 자주 사용하는 스타일 속성 import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; export default function App() { return ( 스파르타 코딩클럽!! ); } const styles = StyleSheet.create({ container: { //영역을 잡는 속성입니다. 따로 자세히 다룹니다. //flex: 1은 전체 화면을 가져간다는 뜻입니다 flex: 1, //영역의 배경 색을 결정합니다 backgroundColor: '#fff', //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. //flex를 자세히 다룰때 같이 자세히 다룹니다 justifyContent:".. Image(assets) import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; //이렇게 상단에 가져와 사용할 이미지를 불러옵니다 import favicon from "./assets/favicon.png" ** "./assets/favicon.png" 이거는 상대주소 export default function App() { return ( {/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */} ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', //혹시 미리 궁금하신 분들을 위해 언급하자면, //just.. Text import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! ); } const styles = StyleSheet.create({ cont.. View 화면의 영역을 나타내는 태그 import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, subContainerOne: { flex:1, backgroundColor:"yellow" }, subContainerTwo: { flex:1, backgroundColor:"green" } }); 리액트 네이티브&Expo 설치 및 실행 1) 리액트 네이티브 = 리액트(React)(페이스북에서 만든 기술) + 네이티브(Native) 리액트 네이티브는 우리가 배운 자바스크립트 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리 입니다 라이브러리가 뭐냐구요? 개발 할 때 사용하는 도구입니다! 2) Expo란? (1) 안드로이드&iOS 코드를 정말 몰라도 개발이 가능! 리액트 네이티브로 앱을 개발할 때, 안드로이드 & iOS 코드를 건드려야 하는 대부분의 상황들을 안 건드려도 되게끔 도와주는 툴입니다. 또한 앱 개발을 편리하게 해주는 도구들이 많이 존재합니다. Expo에서 제공해주는 공식 문서와 리액트 네이티브 공식 문서만 따라 보면서 앱을 만들면, 마치 미니카 조립하듯 앱이 뚝딱 만들어집니다. (2) 개발 중인 앱을 쉽.. Ajax 시작하기 참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다. 즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다. Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻 미세먼지 OpenAPI http://spartacodingclub.shop/sparta_api/seoulair Ajax 기본 골격 $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }) Ajax 코드 해설 $.ajax({ type: "GET", /.. 서버-클라이언트 통신 이해하기 1) 서버→클라이언트: "JSON"을 이해하기 서울시 OpenAPI에 접속해보기 http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유사하죠 2) 클라이언트→서버: GET 요청 이해하기 API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다. * GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회 * POST → 통상적으로! 데이터 생성(C.. 1주차_02 자바스크립트 이전 1 2 다음
