앱개발 공부 1일차

실업급여를 받는 동안 무얼 해볼까 고민하다가 앱개발 온라인 강의 광고를 보고 한번 공부해보기로 결정했다. 배움카드를 발급받아서 신청을 하면 강의비가 거의 무료이다. 이 강의를 다 들으면 앱을 출시할 수 있다고 한다. 그냥 호기심에 노크를 해보았지만 어떤 결과가 나올지는 나도 모르겠다. 일단 두드려야 문이 열리는 거니까. 

 

앱을 만들려면?

 

핸드폰에서 구동되는 앱을 개발하려면 안드로이드환경이냐 ios환경이냐에 따라 다른 언어로 개발을 해야 한다. 즉, 안드로이드환경에서는 Java&Kotlin으로 개발이 가능하고 ios환경에선 Swift로 개발이 가능하다. 왕초보로서 이 언어들을 각각 공부하는 것은 너무 무리다. 다행히도 두 가지 환경에서 두루 쓰일 수 있는 크로스플랫폼 방식의 하나인 리액트 네이티브(React Native)언어를 배우면 된다. 리액트 네이티브는 크로스 플랫폼 방식에 쓰이는 가장 대표적인 언어로 페이스북에서 만들고 지원하고 있으며, 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼 자바스크립트(Javascript)를 이용하여 개발할 수 있다고 한다.  

 

설치할 프로그램

 

앱을 개발하기위해 다음의 프로그램들을 설치한다. 

 

• Visual Studio : 코드 편집 프로그램
• 안드로이드 스튜디오(맥사용자의 경우, Xcode): 앱을 마켓에 올리기 직전에 최종적인 앱파일을 만들기
• node와 npm

 

다음으로, 자바스크립트 연습은 크롬 브라우저를 실행한 다음 F12(맥은 option+command+i)를 눌러서 개발자 콘솔을 열어서 할 수 있다. 

 

 

자바스크립트 문법 이해하기

 

변수 정의하기

 

let : 변수에 값을 지정하기

 

   let a= 10
   let b = 20
   let c = a+b  

 

(여기서 그냥 a=30을 입력하면 변수값이 업데이트되어 30이 지정된다. 만약, const num2=100이라고 변수선언을 했다면 중간에 값이 바뀌지 않고 상수처럼 쓸 수 있다. 기존의 지정된 변수를 싹 지우고 싶다면 <F5>를 누르면 이제까지 입력한 값들까지 다 지우고 다시 작성할 수 있다.)

 

화면에 보여주기

 

console.log (변수명)

console.log (c)        //30이 출력됨.

 

리스트(배열)

 

변수 안에 여러개의 값들을 담음. (리스트에서 값의 순서는 0번부터 시작함.)

 

let 변수명= [값1, 값2, 값3, ... ] 

 

예) let a_list = [1, 2, 'bee', 'flower', 5]에서 세번째 변수 'bee'를 출력하고 싶다면,

 

     console.log (a_list[4]) 

 

리스트 값에 새로운 값을 넣고자 한다면 'push'를 붙임

 

a_list.push (6)
console.log(a_list.push)

 

딕셔너리(객체)

 

여러개의 변수(키)에 값(value)을 지정.

 

let 변수명 = { 키1 : 값1, 키2 : 값2, ...} 

let a_dict = {"name": "Rose", "age": 30}
console.log(a_dict["name"])                //Rose가 출력됨

 

(값을 추가하려면 push를 쓰지않고 바로 추가할 수 있다.)

 

a_dict["height"]=160
console.log(a_dict)      //{name: "Rose", age: 30, height:160}가 출력됨

 

딕셔너리를 리스트안에 여러개 담을 수 있음. 전화번호부 같은 것을 만들 수 있음. 

 

let names = [{"name":"Rose", "age":30}, {"name":"Rose1", "age":31}]

 

names 리스트에 딕셔너리를 추가하고 싶다면, 

 

names.push({"name":"Rose2", "age":32})

 

여기서 만약 names변수에서 1번째 값의 나이의 값을 꺼내라고 한다면?

 

names[1]["age"]  //31이 나옴

 

Json데이터 구조

 

실제 앱을 개발할 때는 리스트와 딕셔너리를 모두 사용할 때 <Json데이터구조>라는 말을 많이 사용함.  예를 들어 Json데이터구조로 되어있는 서울시 미세먼지 정보 페이지를 크롬에서 볼 경우, 크롬의 확장프로그램인 Jsonview를 설치하면 깔끔하게 정리된 구조로 볼 수 있다. (Jsonview 설치페이지)

 

서울시 미세먼지 값

 

앱개발을 위한 첫날 공부를 마쳤다. Jsonview로 된 서울시 미세먼지 데이타 페이지를 보니, 머지않아 빅데이터도 다뤄보고 싶은 마음이 든다. 코딩 공부를 하다보면 서너 시간이 훌쩍 지나버린다. 다른 것도 하면서 하려니 집중력이 좀 떨어지긴 하지만 최대한 노력해서 앱출시까지 포기하지 말고 가보자. 코딩공부를 하다보니 다시 대학생이 된 기분이 든다.