일반적으로 앱 서비스는 실시간으로 변경되어야하는 데이터가 있거나, 인터넷 환경 연결로 상시 업데이트 되는 환경이 중요합니다. 이번에는 앱에 실시간 날씨 데이터를 외부 API로부터 받아와 적용시키는 방법을 공부해보고자합니다. 서버가 제공하는 도메인을 그대로 사용하여, 실제 날씨 데이터를 넣고자합니다. 날씨 데이터는 무료 API인 "openweathermap api" 를 사용합니다. 과정으로는) 1) 현재 위치 (좌표) 데이터 필요, 가져오기 2) 위치 데이터를 이용해 현재 위치 날씨 데이터를 가져오기 가 됩니다. 평소 다른 앱 서비스들을 보면 처음 앱을 시작할때나 특정한 경우에 앱 위치 정보권한을 물어보게 됩니다. 따라서 먼저 앱 위치 정보 권한을 설정하여야하는데, expo install expo-loca..
지금까지 팁 데이터들을 data.json(로컬파일)로 관리하였는데, 이는 실시간으로 바뀌어야하는 데이터나 많은 유저들이 접근해야하는 앱 서비스일 경우에는 적합하지 않습니다. 굉장히 무거워지기 때문에 파이어베이스라는 서버를 사용해 데이터를 관리하는 방법을 공부해보고자 합니다. 지금까지는 프론트엔드(화면을 그리는 것)를 공부했는데, 서버는 백엔드 부분을 다루게됩니다. 앱에서 다양한 요소들이 화면에 보여지게 될 때 map 함수로 반복하여 화면에 그렸습니다. 서버를 사용하게되면 다른 방식으로 구현할 수 있게 됩니다. >> 쉽게 서버를 제공해주는 서비스를 사용하게됩니다. 이는 '서버리스'라고 합니다. 서버리스중에서 가장 유명한 구글에서 제공중인 파이어베이스라는 서버리스를 사용할 것입니다. 데이터 요소가 많아질수록..
1. 자바스크립트란? >> 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다. 2. 브라우저는 왜 자바스크립트 언어를 사용? 2-1) HTML 안에 파이썬, 자바 언어사용은 불가능? >> 브라우저에 자바스크립트 언어 사용은 이미 만들어진 표준이기때문에 모든 브라우저는 기본적으로 자바스크립트를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+자바스크립트 구조로 되어있습니다. >> 이미 많은 브라우저들이 자바스크립트로 만들어져있어서 파이썬이나 자바로 굳이 만들 이유가 없기때문에 표준처럼 굳어진 것입니다. 3. 자바와 자바스크립트의 차이점? >> 아무관련 없다고 봐도 무방합니다. 4. 자바스크립트 사용법? >> 태그 안에 CSS를 넣었듯이 태그 안에 자바스크립트를 넣습니다. ex) on..
리액트 네이티브로 앱개발을 하면서, 다양한 페이지를 구현했지만 그 페이지들 간의 이동에 대해서는 아직 구현하지 못했었습니다. 리액트의 네비게이터 기능을 이용하여 페이지 간 이동에 대해서 공부해보고자 합니다. 네비게이터? : 페이지 끼리 이동할 수 있게끔 만드는 것으로, 웹 사이트를 이용하듯 앱에서 만든 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리입니다. ex) 가로방향으로 슬라이드 했을 때 다음페이지로 넘어가는 기능이 포함됩니다. cf) React Navigation 공식문서에서 정말 좋은 기능들을 가져다 쓸 수 있습니다. https://reactnavigation.org/ 1. React Navigation 공식문서의 installation 에는 npm과 Yarn ..
리액트 네이티브로 앱 개발을 하다보면, 앱 화면을 보면서 스마트폰의 배터리 잔량, 인터넷 연결상태, 시간등을 확인하고 싶을때가 있습니다. 이를 표시해주는 기능이 '상태바 (Statusbar)' 입니다. 이 상태바를 표시해주는 방법에 대해 공부해보겠습니다. - 기본값은 WHITE(흰색)으로 되어있기때문에, 몇시인지, 배터리, 와이파이 연결 등 잘 보이지 않습니다. 1. 먼저 상태바는 Expo에서 제공해주는 도구를 설치해주어야합니다. 2. 설치 후 이 도구에서 꺼내서 사용하기 expo install expo-status-bar 3. 기존 white로 되어있어 보이지 않던 상태바를 보이게 하기 => (MainPage.js) 에 추가 StatusBar style="black" ** 기본적으로는 스마트폰에는 st..
리액트 네이티브로 앱 개발을 할 때 알아둬야하는 리액트 기초지식에 대해서 공부해보겠습니다. 리액트의 간단한 과정을 살펴보자면, (컴포넌트 / 상태 / 속성) ** 컴포넌트에 Props(속성) 가 데이터를 전달해주면 컴포넌트 안에 있는 State(상태)가 그 데이터를 관리하게됩니다. 1. 컴포넌트 : 정해진 태그들을 사용하여 화면의 일부분들을 만드는 것을 말합니다. ex) 페이지를 여러 개로 나눠서 작성하고 관리한 것조차 컴포넌트라고 할 수 있습니다. ex) 버튼, 이미지, 전체화면조차 가능합니다. ex) 크게는 "코드를 분할해서 관리했다"를 의미합니다. 2. State (상태) : 컴포넌트 안에서 데이터를 관리하는 방법 : 하나의 파일, 페이지 등과 같은 의미입니다. >> 리액트에서는 상태가 바뀌어야 화..
'리액트 네이티브' 앱 개발에 필요한 자바스크립트의 문법에 대해서 배워보고자 합니다. - export를 function 앞에다가 달면 참조할 수 있습니다. - export 키워드는 밖에서도 쓸 수 있게 만들어주는 키워드입니다. export default function App { } // App함수를 외부에서 사용할 수 있도록 내보낼 수 있습니다. : 화면을 그리는 함수말고도 데이터를 다룰 때도 유용하게 사용됩니다. : 딕셔너리 + 리스트 복합구조(JSON 데이터 형식)로 구성됩니다. : 모듈시스템의 사용 예로, 폴더 안에 이 data.json을 넣고, 반복문을 통해서 APP.js 에서 뿌려줄 수 있습니다. >> App.js 에서 import data from './data.json' cf) 같은 폴더 ..
'리액트 네이티브' 앱 개발에서 가장 중요하다고도 할 수 있는 Style 속성에 대해서 배워보고자 합니다. :태그에 이어 모든 태그에 공통적으로 있는 style 속성에 대해서 공부할 것입니다. : style 속성은 엘리먼트들 즉 태그들에 스타일을 주기위한 속성입니다. * StyleSheet 이라는 기능을 가져와서 스타일을 입힐 수 있습니다. import StyleSheet from 'react-native'; * styles 라는 변수로써 StyleSheet를 쉽게 불러올 수 있습니다. const styles = StyleSheet.create({ )} >> StyleSheet을 생성해서 styles라는 변수에 넣어놓습니다. >> const : 변하지 않는 변수값이므로 스타일 값으로 태그들을 꾸며줄 수 ..
'리액트 네이티브' 앱 개발에서 필요한 엘리먼트(태그)에 대해 공부하고자합니다. 기본적인 엘리먼트부터 유용한 엘리먼트까지 배워보고자 합니다. 1. View 태그 : 화면의 영역을 잡아주는 태그 : style코드를 입혀주지 않는 이상 화면에 표시가 되지 않습니다. 2. Text태그 : 문자를 쓸때는 항상 Text태그를 사용해주어야 합니다. : View 태그안에 문자를 쓰게되면 오류가 발생합니다. 텍스트입니다. 3. ScrollView : 앱화면을 벗어나는 경우 ScrollView 엘리먼트로 감싸면 스크롤이 가능해지면서 모든 컨텐츠를 확인할 수 있습니다. : View 태그보다 바깥에서 구성 4. Button : 버튼을 누르면 팝업이 뜨기도하고, 다른페이지로 넘어가기도 하는 등의 다양한 기능이 실행됩니다. >..
