1. 앱 서비스의 기본 동작구조와 1주차 전반적인 내용

웹과 비슷하게 클라이언트와 서버간의 통신을 통해 어떠한 기능을 만들어내는것은 동일하다.

다만, 여기서의 클라이언트는 앱이기에 정확히는 우리가 오늘날 많이 쓰는 스마트폰 화면이자

스마트폰을 이용한 앱이라는 프로그램이 클라이언트가 되겠고 서버는 이 클라이언트가 요청한

데이터를 담고 있고 이를 보내는 곳이라고 생각하면 된다.

**현재 앱 개발환경은 Android와 ios가 양분하고 있으며 원래는 Android 개발은 java와 kotlin

을 이용해서, ios는 swift만으로만 개발이 가능하다. 그래서 서로 다른 언어로써 호환이 안되기에

양쪽 동시에 진행하는 앱 개발방식이 원래는 힘들었었는데, 시간이 지나 페이스북에서 리액트

네이티브를 (react native) 만들고 공개하면서 이 공식이 깨졌다.

게다가 리액트 네이티브는 자바스크립트 프레임워크인 react.js를 기반으로 운용되어

웹개발 기본 언어에 포함되는 자바스크립트를 어느정도 안다면 쉽게 앱개발이 가능해졌다.

그래서 강사님은 이런 리액트 네이티브를 기반으로 앱 개발을 가르치기 위해 1주차는

필요한 프로그램 설치와 함께 가장 기본 언어인 자바스크립트 문법을 가르치고

다음 주차부터는 앞으로 앱개발할때 쓰게될,리액트 네이티브 기반의 Expo라는 라이브러리 앱을

어떻게 쓰는지 알려주신다고 하셨다.

(앞으로 써야할 필수 프로그램은 window 기준으로 visual studio code, android studio,

그리고 node와 npm이었다.)

---

2. 자바스크립트 기본 문법

자바스크립트는 원래 웹 개발 언어로 쓰였지만 리액트 네이티브가 나오면서 앱 개발 언어로도

사용이 가능해졌다.

자바스크립트에 대한 기본 문법은 이미 웹개발 1주차 개발일지에서 정리해서 생략하고 넘어가겠다.

---

3. 앱 개발에 많이 쓰이는 자바스크립트 문법

앱 개발에 많이 쓰이는 자바스크립트 문법은 앞서 배웠던 기본 문법보다 더 함축적이고 간결한

문법을 사용한다고 한다.

하나 하나씩 보자면,

---

1) 화살표 함수 문법 (Arrow Function)

let a = () => {
  console.log("arrow function");
}
a();.

앱 개발에서는 더 이상 "function" 키워드를 앞에 붙여줄 필요 없이 () => 표시만으로도

프로그램에서는 이 코드가 함수인것을 인식한다.

---

2) 딕셔너리의 키와 값을 빠르게 넣는 비구조 할당 방식

//객체 
let blog = {
	owner : "noah",
	url : "noahlogs.tistory.com",
	getPost() { 
		console.log("ES6 문법 정리"); 
	}
};

//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()

//비구조 할당 방식
let { owner, getPost } = blog;       
//각각 blog 객체의 owner , getPost() 의 데이터가 할당
//blog의 키 값과 이름이 같아야 해요!
//(예 - owner가 아니라 owner2를 넣어보세요! 아무것도 안 들어온답니다.)

** 앞으로 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식**

//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

기존에는 일일이 딕셔너리의 해당 키와 값을 변수에 할당하는 코드를 입력해야 했지만,

비구조 할당 방식으로 하면 let { 키값 · · · } = 객체; 형태로 바로 값을 넘겨줄수 있게 된다.

다만, let으로 선언되는 중괄호 안쪽 키값의 이름과 객체안의 키 이름이 서로 동일해야한다.

---

3) 백틱( ` )을 이용해 간단하게 문자열 덧붙이기, 줄바꿈 가능! (리터럴)

const id = "myId" ;
const url = `http://noahlog.tistory.com/login/${id}` ;

const message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"

const message = ` 줄바꿈도 마음대로
사용이 가능합니다. `  

위에 있는 url을 코드로 적기 위해선 쌍따옴표("")와 + 기호가 필요한데, 백틱( ` )을

이용하면 코드 앞과 뒤만 붙여줘도 바로 프로그램에서 문자열로 인식이 가능해진다.

또한, 백틱을 이용하면 힘들게 일일이 줄바꿈 코드 \n을 넣어주지 않아도 된다.

---

4) 딕셔너리를 짧게 만드는 객체 리터럴

var name = "스파르타";
var job = "developer";

[기존 방식]
var user = {
  name: name,
  job: job
}

[최신 방식]
var user = {
  name,
  job
}

console.log(user);
//{name: "스파르타", job: "developer"}

예전 방식으로는 일일이 변수에 대입을 해줘야 했지만, 단순히 중괄호안에 변수명만 입력해줘도

동일한 키 필드가 형성되어 자동적으로 변수값이 저장된다.

---

5) map -> 리스트의 length를 몰라도 반복문 작성 가능!

let numbers = [1,2,3,4,5,6,7];

numbers.map((value,i) => { 
	console.log(value,i) 
})

// 아래와 같다는 점! 눈치 채셨나요?

numbers.map(function(value,i) {
    console.log(value,i)
})

//1 0
//2 1
//3 2
//4 3
//5 4
//6 5
//7 6

리스트의 값을 다 출력하려면 원래는 for 반복문을 통해 length 기능을 이용해야하지만,

length를 이용하지 않아도 map 기능을 통해서 리스트 값 전체를 다 출력할 수 있다.

---

**6) 자바스크립트의 모듈화 방식 (export-import)

export function () { } : 같은 폴더 라인에만 있다면 다른 외부 파일에서 가져다 쓸수 있는 함수.

import {} from 파일명.확장자 : 같은 폴더 라인에만 있다면 다른 외부 파일에서 해당 중괄호 내용을 가져다 쓴다는 표시의 코드

이런 export-import 기능을 통해 자바스크립트 방식은 코드를 모듈처럼 나눠서 서로 연결할수 있다.

(export default는 그 파일내에서 유일한 것이어야 함, 가져올땐 이름 달리할수 있음.)

---

4. 1주차 숙제

1) 다음 리스트에서 '딸기'는 몇개인지 코드로 만들어 출력해보자. (앱 개발에 쓰이는 자바스크립트 문법으로 할것)

let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']
let count = 0;
fruit_list.map((str)=>{
    if(str=='딸기')
count += 1
})
console.log(count); => 2

2) gunhee#gmail.com, gunhee@gmail.com 등 이메일 주소인지 아닌지를 판별하는 프로그램 코드를 작성해보자. (indexOf( ) 기능 이용할것 = 괄호 안 변수와 같은 문자가 있으면 1이상, 없다면 -1 음수값 반환함)

function checkEmail(email){
    if(email.indexOf('@') < 0) {
        console.log("이메일이 아닙니다.");
    }else {
        console.log("이메일이 맞습니다.");
    }
}
checkEmail('gunhee21@gmail.com') // 이메일이 맞습니다
checkEmail('gunhee21$gmail.com') // 이메일이 아닙니다.

---