[앱개발/종합반] 1주차 1강 - 앱 개발과 서버의 이해, 자바스크립트 기초

[내일배움단 코딩클럽/앱개발 종합반]

---

1주차 1장

비개발자의 앱개발에 대한 기본 이해를 위한 공부

코딩클럽에서 앱개발 종합반을 공부중이다. 기본적인 이해부터 개념설명까지 비개발자가 학습하기에도 수월한 느낌이다. (아직 기초과정이라서 그럴거라...고 급반성)

---

앱 서비스의 기본 동작 구조

클라이언트와 서버

앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻한다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나간다. 클 라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당된다. 서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 한다. 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여주게 된다. 이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통한 것이다. 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 된다.

앱을 만들려면?

앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠른다.
안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능하다. 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문이다. 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있다. 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능하다. 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까?

앱 개발 종류

안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱! 그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재한다.크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨다. (크로스플랫폼 앱 개발에 대한 리서치는 추가적으로 보충해볼 예정)

---

자바스크립트 기초

맥 구글 콘솔

• 단축키 : option + command + I

우측 점3개 클릭 - Dock side / 기타 셋팅 확인 가능

• console.log("Hello World!");

• Command + R : 새로고침

---

변수

• 변수는 데이터를 저장하기 위한 컨테이너이다. 변수는 값을 보유한다고 이해.
• 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다) / 사칙연산 그리고 문자열 더하기가 기본적으로 가능
• 일반적인 규칙을 원할 경우: 항상 변수를 const / 변수의 값이 변경될 수 있다고 생각되면 let사용
• 변수(고유 식별자)의 이름을 구성하는 일반적인 규칙은 다음과 같다. 이름에는 문자, 숫자, 밑줄 및 달러 기호가 포함될 수 O / 이름은 문자로 시작O / 이름은 $ 및 _로 시작 O / 이름은 대소문자를 구분O (y와 Y는 다른 변수임) / 예약어(예: JavaScript 키워드)는 이름으로 사용할 수 X
• = : 할당을 의미 / == 같음을 의미
• 문자열은 큰따옴표나 작은따옴표 안에 작성된다. 숫자는 따옴표 없이 작성하고, 숫자를 따옴표로 묶으면 텍스트 문자열로 처리한다. const pi = 3.14;
  let person = "John Doe";
  let answer = 'Yes I am!'

let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'
first+' '+last // 'Bob Lee'
first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

변수명은?

• 쉽게 알아볼 수 있게 쓰는 게 중요하다. 다른 특수문자 또는 띄워쓰기는 불가능.

let first_name = 'bob' // snake case
let firstName = 'bob' // camel case

const로 변수 선언

• 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언하면 좋다.

let value_box = '값'
value_box = '변경한 값';

console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다.

const value_fix = '값';
value_fix = '변경한 값';

console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

리스트(배열) & 딕셔너리(객체)

• 리스트를 배열(Array)이라고도 부르며 순서를 지켜서 가지고 있는 형태이다.

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력

딕셔너리

• 키(key)-밸류(value) 값의 묶음. 딕셔너리는 객체로 불린다.

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

• 리스트와 딕셔너리의 조합

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

딕셔너리의 자주쓰는 또 다른 표현

• 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조이다.

let b_dict = {'name':'Bob','age':21}

//bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다.
b_dict['name']
b_dict.name

둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.

왜 필요하나

순서를 표시할 수 있고, 정보를 묶을 수 있다.

앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있다. 
대기표를 작성하기 위해서 온 순서대로 이름,  휴대폰 번호를 적도록 했다. 
변수만을 사용한 모습은 다음과 같습니다.

let customer_1_name = '김스파';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박르탄';
let customer_2_phone = '010-4321-4321';
...(알아보기 힘듭니다.)

👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있다.
let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};

👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해진다.
let customer = [
    {'name': '김스파', 'phone': '010-1234-1234'},
    {'name': '박르탄', 'phone': '010-4321-4321'}
]

✅보기에도 깔끔해지고, 다루기도 쉬워지고, 
고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있다

JSON 데이터 구조

• 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조이다.
• 다음은 서울시 Open API JSON 데이터 구조이다.

/서울시 미세먼지 값/
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

• 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.

---

브라우저에서 JSON 문서를 볼 수 있다 (크롬 웹스토어 연결)
크롬 익스텐션 JSONView를 설치하면 좀 더 예쁘게 JSON을 볼 수 있다.

JSONView