개발 일지 1주차

DD20210620
목표
실재 앱을 제작하여 플레이스토어나 앱스토어에 업로드하는 것.
향후 5년안에 진정한 프로가 되는 것.
이번에는 1주일치를 한번에 적지만
앞으로는 여기에 틈틈히 적어야 겠다

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

리액트 네이티브(React Native)
안드로이드, 애플 모두 적용 가능하고
크로스 플랫폼이고 Javascript 로 개발 가능하다

Javascript
보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
웹사이트는 CSS + HTML + Javascript 로 이루어 진다.
즉 Javascript 는 google chrome 등 client 로 최종 결과물이 보여지는 언어.
그런데 더이상 Javascript 가 웹 언어만이 아니고 리액트 네이티브 기반이되어 앱을 제작하는 도구로 사용한다. 이번 강의의 목적이 바로 Javascript 를 사용한 리액트 네이티브 작성이다.

var input = prompt('Message', '여기에 이메일 대이타를 입력하세요')
alert(input)

var bool = confirm('수락 하시겠습니까?')
alert(bool)

이렇게 뭐 별로 안썼는데 윈도우 뜨고 뭐가 막 됀다.

크롬에서 콘솔 열기
자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.
크롬 브라우저를 실행한 다음
윈도우는 : F12
근데 이거 사실 편하면서 불편하다

햇갈리는 것 사이다 정리
1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다!
let num = 1;
let num = 1
2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가?
둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다!
3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞는것이냐? 둘다 똑같습니다!
4) 마찬가지로 배열과 리스타라는 어휘도 똑같은 개념이라고 보시면 됩니다!

#문법 const
const로 변수를 선언하면 더이상 변수가 아닌 고정값이 된다

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

#문법 리스트 []
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를 출력

#문법 딕셔너리 {}
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'

리스트와 딕셔너리가 필요한 이유 예시.
순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하
기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.
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 함수를 이용해 간단하게
대응할 수 있습니다.

함수
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
//return 으로 값을 돌려주는, 뱉는 구조로 변수에 값을 전달 할 수도 있습니다.
return num1 + num2;
}
sum(3, 5); // 8 --> 예를 3 , 5를 유저가 입력하도록 하는 방법 숙지할것!!
sum(4, -1); // 3
let result = sum(10,10)
console.log(result) // 20

#문법 for
for (let i = 0; i < 100; i++) {
console.log(i);
}

for 문은 주로 리스트 [] 와 함께 쓰인다
let people = ['철수','영희','민수','형준','기남','동희']
// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
// 리스트[]나 딕셔너리{} 나 모두 출력값 불러올때는 []를 사용한다

#문법 function 의 최신 표현
[기존 방식]
let a = function() {
console.log("function");
}
a();
[최신 방식]
let a = () => {
console.log("arrow function");
}
a();

1주차 숙제 문제와 제출한 답안

리스트안에 딸기가 몇개인가?

// 정답 제출
//
let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']
let count = 0;
fruit_list.map((value, i) => {
if (value == '딸기'){
count += 1;
}
// console.log(value,i);
// console.log(value);
})
console.log("딸기는 총 " + count + " 개가 있습니다");

입력된 이메일이 형식이 맞는가?

function checkEmail(email){

if (email.indexOf('@') > 0 && email.indexOf('.') >0) {
console.log ( email + " 은 이메일이 맞습니다");
                     } else {
console.log (email + "은 이메일이 아닙니다");
             }

}

checkEmail ('chopin@gmail.com');
checkEmail ('yongwoo$gmail.com');
checkEmail ('sorry@gmailcom');

출력값
VM1817:4 chopin@gmail.com 은 이메일이 맞습니다
VM1817:6 yongwoo$gmail.com은 이메일이 아닙니다
VM1817:6 sorry@gmailcom은 이메일이 아닙니다

1주치를 한번에 적으려니 1시간 넘게 걸렸다.
하지만 한번에 완독하니 단편적으로 정리하는 것보다 한눈에 보이는 장점이 있다.
좌우간 2주차 부터는 그때 그때 개발일지 작성해 보자.
일기처럼.