개발야 기하하자

배열을 사용하는 이유

많은 데이터를 저장하고 출력하려면 출력하고자하는 수 만큼 변수 선언을 하고 하나하나 출력을 해야겠죠?

그런데 이 값을 하나의 배열에 넣어 for문을 이용해 값을 넣어주고 출력하면 하나의 배열로 배열안에 들어있는 모든 변수를 한번에 출력이 가능하니 효율적이고 쓸대없는 코드를 줄일 수 있어서 사용을 합니다.

자바스크립트의 배열 선언

자바스크립트의 배열 선언입니다.

let arr = new Array();
let arr = []; // 배열 만들기

let Test = ['a','b','c']

console.log( Test.length ); // 배열의 길이를 구할 수 있습니다. (들어있는 변수 갯수)
console.log( Test ); // 배열의 전체 요소를 출력합니다 a,b,c

let arr1 = ['a', { test: '배열 테스트'}, true, false]; //처럼 여러가지 자료형을 넣을 수 있습니다.

 이런식으로 사용을 할 수 있습니다.

큐, 스택

큐는 배열을 사용해 만들 수 있는 대표적 자료구조입니다.

큐에서 사용하는 연산은 아래와 같습니다.

• push – 맨끝에 요소를 추가합니다.
• shift – 제일 앞 요소를 꺼내 제거한 후 남아있는 요소들을 앞으로 밀어줍니다. 

스택에서 사용하는 연산은 아래와 같습니다.

• push – 요소를 스택 끝에 집어넣습니다.
• pop – 스택 끝 요소를 추출합니다.

ES6 이전의 Javascript에서는 var가 변수 선언방법 중 유일한 방법이였습니다.

하지만 ES6에서는 let, const 가 나왔습니다.

이전에 변수란 무엇인가?

변수란 데이터를 담기 위한 메모리 공간입니다.

var helloworld; // 변수 선언. undifined
var hi = hello; //  hello를 hi에 할당
var a,b,c,d; // 변수 a,b,c,d를 선언
let test = test;
const test = test;

이런 식으로 값을 변수에 할당 할 수 있습니다.

var

var( 변수 재선언 가능)

변수 선언을 여러 번해도 에러없이 각기 다른 값이 출력  될 수 있습니다.

var test = '안녕1';
console.log(test); // 안녕1

var test = '안녕2;
console.log(test) // 안녕2

이런식으로 같은 test라는 변수를 계속 재선언 가능하면 코딩을 할 때 헷갈리거나 하는 일이 종종 생깁니다.

이를 보안하기 위해 ES6부터 let, const가 추가 되었습니다.

let

let 은 ( 변수 재선언 불가능,  변수 재할당 가능)

let test = '안녕';
console.log(test) // 안녕

test = '안녕 변경!';
console.log('test') // 안녕 변경!

let test = '안녕 변경의 변경!!!';
console.log('test') // 에러!!!!!!!!!!

let은 다시 재선언은 불가능하지만 재할당은 가능합니다.

const

const( 변수 재선언, 재할당 모두 불가능 )

const test = '안녕';
console.log(test); // 안녕

test = '안녕 바꿔치기';
console.log(test); // 에러--

const test = '안녕 바꿔치기!';
console.log(test); // 에러--

const 경우 재할당, 재선언 모두 불가능합니다.

그럼 무엇을 사용해야 하는가 ?

var는 ES5 변수 선언이라서 쓰이지 않습니다. 대부분 let, const를 많이 사용하는데

상황에 맞게 let, const를 써주면 될 것 같습니다.

예를 들면 재할당이 필요 없는 경우 => const  필요 한 경우 => let 이렇게 사용하는게 좋을 것 같습니다.

어플 개발을 하다보면 기기 등록을 해야할 때가 있을 것 입니다.

os는 무엇인지, 기종은 무엇인지 version은 뭔지 등등 이러한 부분에 궁금증이 생겨 하나하나 찾아보았습니다 !

1. device UniqueId, Brand, DeviceId 등

https://www.npmjs.com/package/react-native-device-info

react-native-device-info 라는 npm 입니다. 이 npm 은 많은 디바이스 정보들을 가져올 수 있는 npm 입니다 !

npm install --save react-native-device-info 로 install을 한 뒤

import DeviceInfo from 'react-native-device-info';

사용할 곳에 import를 해줍니다.

그 다음 예제를 보여드리면

let platform = DeviceInfo.getBrand();

이런식으로 값을 담아서 console.log를 찍어보시면 Brand 값을 알 수 있습니다.

2. language

https://www.npmjs.com/package/react-native-localize

language등 앱 현지화를 위한 npm 입니다 !

필자는 여기서 language만 가져오고 싶어서 이 npm을 사용했습니다.

npm install --save react-native-localize 또는

yarn add react-native-localize

로 install 을 한 뒤

import * as RNLocalize from "react-native-localize";
 
console.log(RNLocalize.getLocales());
console.log(RNLocalize.getCurrencies());
 
RNLocalize.addEventListener("change", () => {
  // do localization related stuff…
});

이런 식으로 example 코드를 사용할 수 있고

  let lang = RNLocalize.getLocales()[0].languageTag;

오브젝트 안에 원하는 값을 찾아서 값을 넣어주었습니다 !

3. react-native Platform

react-native 에서도 제공을 하는데요 저는 os, version 등을 알기위해서 사용했습니다.

import Platform from 'react-native';

  let os = Platform.OS;
  let version = Platform.Version;

이런식으로 사용했습니다.

이로써 디바이스 정보에 대해서 알아봤습니다 ~~ 

React Native 는 Facebook, Inc.에서 만든 오픈 소스 모바일 애플리케이션 프레임 워크 입니다 . [3] 개발자가 React 와 함께 사용할 수 있도록하여 Android [4] , iOS , Web [5] 및 UWP [6] 용 애플리케이션을 개발하는 데 사용 됩니다. 네이티브 플랫폼 기능 ! - wikipedia에 적혀있는 React Native 정의입니다.

말그대로 모바일 애플리케이션 프레임 워크로 어플을 만들때 많이 사용됩니다. 

일단 윈도우에 설치를 해보겠습니다.

1. Node.js 설치

https://nodejs.org/en/

node.js 를 설치해줍니다. 설치를 한 뒤 cmd에 node -v npm -v 라는 명령어로 설치가 잘 되었는지 확인해봅니다.

2. Python 설치

https://www.python.org/downloads/windows/

react-native 빌드 시스템은 파이썬을 사용합니다. mac은 파이썬이 기본적으로 설치되어 있는데 윈도우는 따로 설치를 해야합니다 ! 

다운을 받은 뒤 cmd 에 잘 다운받았는지 Python 버전을 확인해봅니다.

저는 2.7.18 버전을 다운로드 받았습니다.

3. React Native CLI 설치

npm명령어를 통해 React Native CLI를 설치합니다.

설치가 잘 되었다면 react-native --version

명령어로 확인해봅니다.

4. JDK 설치

react-native로 안드로이드 앱을 개발하기 위해 JDK를 설치 해줍니다.

https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

64bit, 32bit 잘 선택해서 다운로드 받으시면 됩니다.

그리고 cmd를 다시 킨 뒤 

java -version을 통해 잘 다운받았는지 확인해봅니다.

추가로 JAVA 컴파일러도 잘 설치 되어있는지 확인해봅니다.

5. 안드로이드 스튜디오 설치

https://developer.android.com/studio

안드로이드 스튜디오를 설치합니다.

다른 것은 건들지말고 next 만 눌러서

이 화면이 나올 때 까지 넘겨줍니다. 중간중간에 경로를 설정하거나, 테마를 설정하는 건 본인이 하면됩니다!

여기서 중요한 것은 sdk 설정입니다.

6. 안드로이드 스튜디오 SDK 설정

Configure > SDK Manger에 들어가서

• Android SDK Platform 28
• Intel x86 Atom System Image
• Google APIs Intel x86 Atom System Image
• Google APIs Intel x86 Atom_64 System Image 를 다운로드 받아줍니다.

오른쪽 하단의 Show Package Details를 눌러줘야 세부사항이 뜹니다!!

7. 환경 변수 설정

환경변수를 내 PC 에서 해줘야합니다.

내PC의 마우스 오른쪽 클릭을 한 뒤 속성에 들어가서 ( 제어판 > 시스템 및 보안 > 시스템) 입니다.  왼쪽의 고급 시스템 설정에 들어갑니다.

고급 속성에서 환경변수 설정을 클릭합니다.

User에 대한 사용자 변수에 새로만들기를 한 뒤 자신의 안드로이드 스튜디오 SDK 위치를 입력하고 확인버튼을 누릅니다.

그리고 Path를 누르고 편집 버튼을 눌러 위에 자신의 안드로이드 스튜디오 SDK위치\platform-tools 을 입력해줍니다.

이렇게 여기까지 완료가 다 되었다면 cmd 창에 adb 라는 명령어를 입력해줍니다.

이렇게 뜨면 성공입니다 !

이제 react-native 프로젝트를 생성 한 뒤 안드로이드에서 확인하면 초기설정 끝입니다 !

여기서 기종에 맞게 추가해주면 끝입니다~~~