리액트 네이티브로 앱 개발을 하다보면, 앱 화면을 보면서 스마트폰의 배터리 잔량, 인터넷 연결상태, 시간등을 확인하고 싶을때가 있습니다. 이를 표시해주는 기능이 '상태바 (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 : 버튼을 누르면 팝업이 뜨기도하고, 다른페이지로 넘어가기도 하는 등의 다양한 기능이 실행됩니다. >..
2주차부터는 '리액트 네이티브' 앱 개발을 시작하려고 합니다. 그러기 위해서는 리액트 네이티브 (기술)와 Expo (도구)를 설치하여야 합니다. 이후 앱 화면을 만들고, 리액트 기초를 공부해보겠습니다. 리액트(React) + 네이티브(Native)의 합성어로, 자바스크립트 언어 하나로 안드로이드 앱과 ios앱 두가지 모두 만들어주는 라이브러리를 말합니다. cf) 라이브러리 : 개발할 때 사용하는 도구 안드로이드 & iOS 코드를 몰라도 개발이 가능하게 해주는 도구이자, 개발중인 앱을 쉽게 확인해주는 앱을 제공하는 도구 즉 Expo는 "개발 중인 앱 테스트"를 위한 Expo 클라이언트 앱을 자바스크립트 형태로 제공해줍니다. >> Expo Client 앱을 다운받..
이번 일지에서는 자바스크립트의 기초을 활용해 예제를 공부해보겠습니다. Q. 0부터 n-1까지 더하는 함수 만들기 function get_sum(n){ let sum = 0; for(let i = 0; i < n; i++){ sum = sum + i; // = (sum += i) } return sum } let result = get_sum(150) console.log(result) Q1. 포도는 몇개일까? let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기'] let count = 0 for(let i = 0; i < fruit_list.length; i++){ let fruit = fruit_list[i] if (fruit == ..
이번 일지에서는 자바스크립트의 기초 문법에 대해 공부한 내용을 기록하였습니다. 기존 공부하던 자바 언어와 비슷한 점이 많은 문법이었습니다. let num = 250 let = 변수를 선언하는 문법 num = 변수의 이름 250 = 변수에 넣을 값 console.log(num) >> 250 출력 여기서 num = 1000 으로 재할당해주면 재할당된 값이 출력됩니다. let a = 1 let b = 2 let c = a + b console.log(c) >> 3 console.log(a * b) 처럼 곱셈도 가능합니다. let first = 'gnob' let last = 'ong' console.log(first + last) // 문자열 더하기 가능 // gnobong console.log(first +..
자바스크립트에 대한 공부를 '앱개발' 과 더불어 해나가고자 합니다. 이번 일지에서는 기본적인 개념과 앱 서비스의 전반적인 개요에 대해 공부한 내용을 기록하였습니다. * 앱 서비스를 만든다 는 것은 "클라이언트와 서버를 모두 만든다는 것"을 의미합니다. 여기서 클라이언트는 '사용자가 보는 화면 (어플)' 을 말합니다. 앱 서비스는 전반적으로 데이터가 담겨있는 서버에서 데이터를 요청하고 데이터를 응답하는 과정을 말합니다. 앱을 개발하기 위해서는 안드로이드 또는 IOS를 선택해 개발할 수 있습니다. 둘은 OS(즉 환경)이 다르기 때문에 각기 다른 개발 기술이 필요합니다. 안드로이드는 Java 와 Kotlin, iOS는 Swift라는 기술로 개발이 가능합니다. 1. 안드로이드와 iOS를 각각 개발하는 것 = 네..
