갑자기... 개발일지?

안드로이드 스튜디오로 앱 개발을 해보긴 했는데, 이번에 학교 졸업을 위해서 예전에 만든 애플리케이션을 가져다가 뜯어서 졸업보고서로 제출을 했어요~
오랜만에 보는 자바 코드들에 머리가 어질어질해지고 다시 작성했던 코드 파악하느라 애 좀 먹었네요ㅠㅠ

예전에 대학 텀프 때 제출한 버스인식 애플리케이션 일부 코드 ㅎㅎ

보고서를 작성하면서 다시 앱 개발 공부를 해야겠다는 생각이 들더라고요 ㅠㅠ 그래서 찾던 중, ✌️스파르타코딩클럽✌️이란 곳을 발견했어요! 그리고 웹사이트를 두리번거리다가 내일배움카드라는걸 알게되었고 수강을 일정 비율 이상하면 환급이 된다구 해서 바로 발급받아서 신청했습니다!

저는

[왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택) 29회차
[왕초보] 나만의 수익성 앱, 앱개발 종합반 20회차

이렇게 두개를 신청했어요~ 앱 개발도 배우는 겸 이제는 다 잊어버린 웹 개발도 같이 배우면 좋을 것 같더라고요.

오늘이 강의 듣는 첫날인데 처음으로 게더(Gather)로 온라인스터디도 하고 강의 화면도 깔끔하고 좋은 것 같아요! 그리구 이렇게 주차 강의를 전부 수강하면 개발 일지를 쓰도록 추천도 해주네요! 개발일지는 한번도 안 써봤는데 개발할 때 좋은 습관 하나씩 들여보자는 생각으로 그림일기도 쓰기 귀찮은 저가 이렇게 글도 쓰게 되네요💪

수업 내용📝

내일배움단으로 수강을 하면 하루에 8개씩 밖에 강의를 못 들어서 1주차 강의가 8개보다 많은 웹개발은 아직 개발 일지를 못 적어요 ㅠㅠ 그래서 앱 개발 일지를 먼저 작성하는걸루....

0. 새로운 도전... React Native!

저는 지금까지 안드로이드 개발만 해와서 하이브리드와 크로스 플랫폼 개발은 존재만 알고 시도해볼 생각은 안 했는데 스파르타에서는 페이스북에서 제공하는 React Native를 통해 크로스 플랫폼 앱을 개발할 수 있도록 알려주네요~ 리액트 라이브러리와 프레임워크를 사용할때 JavaScript를 사용한다니까 JavaScript를 앱 개발 강의와 웹 개발 강의에서 같이 배우면 이해하기 더 쉬울 것 같다는 생각이 들었어요!
아직 1주차에서는 React를 다루진 않았지만 벌써 기대가 됩니다 ㅎㅎ

1. JavaScript, Only for web?

웹 기술로만 사용하던 JavaScript를 앱 개발에서 사용한다는게 흥미로웠는데요, React가 JavaScript 기반이라는 말을 듣고 조금 더 쉽게 접근할 수 있겠다는 생각이 들었어요! React를 통해 앱을 개발한다면 JavaScript로도 앱을 개발 할 수 있다는 사실을 알게 됐네요👀!

2. 진짜 이번 주차 수업 정리...ㅎ

I. 변수 선언(let, const)
II.리스트와 딕셔너리(배열과 객체)
III.함수(function)
IV. 조건문과 반복문(if, else if, else / for)
V. 앱 자주 쓰이는 Javascript(Arrow Function, 비구조 할당)

I. 변수 선언(let, const)

Javascript에서 변수를 선언할때 var와 const만 사용 했었는데, let을 사용하는 방법도 있다는 것만 알고 사용은 안 했던거 같아요. var의 치명적인 단점은 이미 정의한 변수명을 다시 사용해도 에러가 나오지 않아 혼용되어 사용할 수도 있다는 것이에요~ 이러면 현재 변수가 내가 의도한 값인 분명하지 않고 값이 바뀌어도 모를 수 있겠죠!

var a = 10
console.log(a) // ---> 10

var a = 20
console.log(a) // ---> 20

그렇기 때문에 let과 const 변수 선언방법을 요즘엔 자주 쓰는 것 같아요!

let이나 const를 사용하면 같은 변수명을 선언하면 이미 선언된 변수라는 에러가 출력된다고 하네요!

let a = 10
console.log(a) // ---> 10

let a = 20
console.log(a)
//Uncaught SyntaxError: Identifier 'a' has already been declared

자세한 내용은 아래 링크를 참고하시면 좋을 것 같아요!
var, let, const 차이점

II.리스트와 딕셔너리(배열과 객체)

리스트

리스트(List)는 배열(Array)과, 딕셔너리(Dictionary)는 객체(Object)와 비슷한 개념으로 보면 되는 것 같아요!

리스트는 계란을 담는 바구니라고 생각하면 좋아요! 리스트는 아래와 같이 정의합니다

let list = [1,"나는 문자열", fuction(x)]

숫자나 문자열은 물론 함수와 딕셔너리도 들어갈 수 있답니다! 이렇게 선언한 리스트는 아래와 같이 값을 출력할 수 있습니다!

console.log(list[0]) //---> 1

0번째 인덱스에 있는 값을 출력하면 1이 나오겠죠?

리스트에 새로운 요소(원소)를 넣는 방법은 아래와 같습니다!

list.push('새로운 값')

console.log(list) // ---> [1, "나는 문자열", fuction(x), "새로운 값"]
console.log(list[list.length-1]) // ---> '새로운 값'

list.push()는 리스트에 새로운 원소을 삽입하는 함수
list.length()는 리스트에 들어있는 원소들의 개수를 반환하는 함수에요!

list 안에 들어있는 원소의 개수는 새로운 원소를 넣었으니 4개가 되겠죠?
전체 개수(4개)에서 -1 한 값은 3이니까 지금 리스트에서 list[list.length-1]는 list[3]과 같은 뜻이에요!
list[3]은 새로 들어간 값인 "새로운 값"이라는 문자열이니까
마지막 console.log는 "새로운 값"이라고 출력 되겠네요!

딕션너리

딕셔너리는 말 그대로 사전이라고 생각하면 편할 것 같아요~ 키(Key)와 값(Value)으로 구성되어 있고 아래와 같이 선언 할 수 있어요.

let dict = {
	'name' : 'errSum', // 키-밸류 사이에 꼭 ,(comma)를 넣어주는 걸 잊지 않기!
    'age' : 26
    }

이렇게 정의된 딕셔너리(객체)는 아래와 같이 불러올 수 있습니다!

//대괄호 안에 따음표 사이 key값을 알려주어 호출
console.log(dict['name']) // ---> errSum
console.log(dict['age']) // ---> 26

//혹은 "객체 변수이름.키값" 을 이용한 호출
console.log(dict.name) // ---> errSum
console.log(dict.age) // ---> 26

딕셔너리에 새로운 키와 밸류를 삽입하는 법은 아래와 같아요!

dict['height'] = 172

console.log(dict) // ---> {name: 'errSum', age: 26, height: 172}

아래 예제는 리스트와 딕셔너리를 같이 사용하는 경우에요! 실제로 많이 사용되는 경우니, 잘 기억 해둬야겠어요!

/// 배열 안에 객체 (출처: 스파르타코딩클럽)
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 함수로 간편하게 추가 할 수 있겠죠!

이런 형태의 구조를 보이는 것이 JSON 데이터 구조입니다!

복잡한 구조처럼 보이지만 하나하나 살펴보면 결국 리스트와 딕셔너리의 조합임을 알 수 있어요!

JSON은 정말 자주 쓰이는 데이터 구조중 하나에요 ㅎㅎ

III.함수(function)

사실 리스트에 값을 새로 추가하거나 리스트에 존재하는 요소의 개수를 알아보는 것은 여러가지 연산을 통해서 이루어집니다. 이것들을 함수라고 하는 것을 이용하여, 쓰는 방법만 알면 원하는 결과를 아주 간단하게 얻을 수 있는 것이죠. 마치 전자레인지처럼 조리 시간만 설정할 줄 알면 마이크로파가 어쩌구 하는 음식을 뜨겁게 하는 원리는 몰라도 되는 것처럼 말이죠! JavaScript에서는 개발자들이 자주 사용할 것 같은 함수를 많이 만들어 놓았어요! push나 length처럼 기본으로 우리가 제공 받는 함수를 기본 제공 함수라고 해요!

하지만 기본 제공 함수 외에도 뭔가 반복적으로 사용되는 코드나, 재사용해야하는 코드가 길어져 사용 목적에 따라 구분을 지어줘야 할때 우리는 직접 함수를 만들 필요가 있습니다! 이렇게 개발자가 만든 함수를 사용자 정의 함수라고 합니다. 정의하는 방법은 아래와 같습니다.

function sum(a,b){
	return a+b
}

위 코드는 sum이라는 이름의 함수를 정의한 것입니다.
이 함수는 두 가지의 값을 받아서 둘을 더한 값을 반환하는 함수에요!

이를 이해하기 위해서 함수를 이용하여 두 값을 더한 값을 출력하는 아래 코드를 살펴보아요~

function sum(a,b){
	return a+b
}

console.log(sum(10,20)) // ---> 30

sum 함수를 선언할 때 소괄호에 안에 있는 a와 b는 변수와 같은 역할을 합니당.
이들은 함수를 호출할 때 주는 값(10과 20)으로 대체되어 계산이 되는 것이죠!

🔮 Plus+
이렇게 함수와 값을 이어주는 변수를 '매개변수(parameter)'라고 하고 전달되는 값을 전달인자(argument)라고 합니다!

return은 특정 값을 반환하라는 의미입니다! a는 10으로 b는 20으로 바뀌었으니 현재는 10+20을 반환하라는 뜻이겠죠? 그래서 출력 값은 30!

함수를 선언하는 다른 방법

함수는 이렇게도 선언할 수 있어요!

let fx = function(){
	...
}

fx()

이런 방식의 선언을 리터럴 방식이라고 합니다!

IV. 조건문과 반복문(if, else if, else / for)

조건문

조건문은 일정 조건에 따라 실행되는 코드를 다르게 할 수 있는 함수라고 생각하면 됩니다! 아래 조건문 예제를 볼까요?

function math(score){
	if(score >= 80){
		alert('80점 이상이에요!')
	} else {
		alert('80점 미만이에요...')
	}
}

math(80)

위에서 배운 사용자 정의 함수를 이용해 math라는 함수를 정의했네요!
math라는 함수에 80이라는 값을 넣어주었어요!
그리고 if라는 조건문을 만났네요
if는 기본적으로 다음과 같이 사용 됩니다.

if(조건식){
	조건식이 참(TRUE)이면 실행할 코드
} else {
	조건식이 거짓(FALSE)이면 실행할 코드
}

조건식은 80과 같거나 큰 것이 참이고 지금 score는 80이니까 if 중괄호 안에 있는 alert('80점 이상이에요!') 라는 코드만 실행이 되고 else 중괄호 안에 있는 코드는 처리하지 않게 되요!
결론적으로 "80점 이상이에요!" 라는 알림창만 뜨게 되는 것이죠.
반대로 math 값을 80미만으로하면 else 중괄호 안에 있는 코드만 처리되어 80점 미만이라는 알림창이 뜨겠죠? 이것이 조건식의 기본 원리입니다.

그리고 조건이 여러개 일수도 있겠죠? 그럴때는 아래와 같이 else if 사용합니다!

function math(score){
	if(score > 100){
		alert('100점보다 큰 점수는 없습니다!')
	} else if(score >= 80) {
		alert('80점 이상이에요!')
	} else {
    	alert('80점 미만이에요...')
    }
}

math(80)

기존 if에 있던 조건식(score >= 80)이 아래 else if로 들어가고, 지금 if에는 100보다 score가 크면이라는 새로운 조건이 들어갔어요! 이런 식으로 if 조건에 맞지 않으면 다음 조건을 검사할 수 있게 할 수 있답니다!

AND(&&)와 OR(||) 조건

조건식의 마지막으로는 AND(&&)와 OR(||) 조건입니다. 위 math(score) 함수에서

100점 - A+
90점 이상 100점 미만 - A
80점 이상 90점 미만 - B
70점 이상 80점 미만 - C
70점 미만 - D

위와 같은 복잡한 조건마다 다르게 알림창을 뜨고 싶게 하고 싶으면 어떻게 할까요? else if를 여러개 쓰면 어떻게든 되겠지만 너무 복잡하겠죠? 이럴때 사용하는게 AND(&&)와 OR(||) 조건이에요!

이 조건들은 AND연산자 OR연산자라고도 불리는데, 한 개의 조건식 안에 조건식을 이어주는 역할을 하며 아래와 같이 사용할 수 있어요!

function math(score){
	if(score > 100 || score < 0){
		alert('점수가 올바르지 않습니다!')
	} else if(score == 100) {
		alert('100점! 최고 최고👍 A+! ')
	} else if(score < 100 && score >= 90){
    	alert('A')
    } else if(score < 90 && score >= 80){
    	alert('B')
    } else if(score < 80 && score >= 70){
    	alert('C')
    } else {
    	alert('D')
    }
}

if(score > 100 || score < 0) 에서 ||는 A조건식 || B조건식 A 혹은 B 둘 중 하나라도 참이라면 참으로 성립되는 것입니다.

True || True ===> True
True || False ===> True
False || True ===> True
False || False ===> False

여기서는 100점보다 크거나 0점보다 작으면 참이 되겠죠. 그런 점수가 들어오면 점수가 올바르지 않다는 코드가 실행됩니다. (대부분 그런 점수는 존재하지 않으니까요.)

else if(score < 100 && score >= 90) 에서 &&는 A조건식 && B조건식 A와 B 모두 참일때만 참으로 성립됩니다!

True || True ===> True
True || False ===> False
False || True ===> False
False || False ===> False

여기서는 100점 미만 그리고 90점 이상일때 참이니까 90~99의 값만 참으로 성립이 되겠네요!

만약 위 코드를 AND와 OR 연산자를 쓰지 않는다면 else if를 훨씬 많이 사용해야하고 코드도 더 길어지겠죠!

반복문

반복문은 특정 코드를 반복시켜야 할 때, 리스트의 원소들을 모두 검사해야 할때 등등 사용합니다!
0부터 99까지 출력을 해야하는데

console.log(0)
console.log(1)
console.log(2)
...
console.log(99)

이렇게 쓰기에는 너무 많죠ㅠㅠ 그래서, 반복문이라는 것이 존재합니다!
반복문을 이용하면 아래와 같이 간편하게 만들 수 있어요!

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

for는 반복문을 호출하는 하나의 함수에요! for는 다음과 같이 사용 할 수 있답니다!

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 실행할 코드
}

1. 시작 변수 선언 -> 2. 조건식 체크-> 4. 조건이 맞으면 코드실행 -> 3. 시작 변수 값 증감
   -> 2 -> 4 -> 3
   -> 2 ...
   -> 2가 맞지 않으면 반복문 탈출

위 반복문에서는 i = 0 이 시작 조건이고 i < 100, i++은 i가 100보다 작을 때까지 코드를 실행 할 때마다 i를 1씩 더한다는 뜻입니다.

🔮 Plus+
i++은 현재 i값에 1을 더하는 것입니다. 이는 i = i + 1과 비슷한 역할을 하지만 미세하게 다릅니다.
i++, i+=, i = i + 1

그러면 0부터 99까지 출력이 되겠죠!

이렇게 숫자를 출력하는 것 보다는 반복문은 주로 리스트와 함께 사용이 되는데요,

let people = ['철수','영희','민수','형준','기남','동희']

// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
}

위와 같이 반복문을 사용하면 리스트에 있는 모든 원소들을 한번에 출력할 수 있어요!

여기서 더 나아가 딕셔너리가 들어간 리스트와 같이 사용한다면

let scores = [{name : '철수', scroe : 85},
  {name : '영희', score : 100},
  {name : '민수', score : 78},
  {name : '형준', score : 61},
  {name : '기남', score : 67},
  {name : '동희', score : 98}]

for (let i = 0 ; i < scores.length ; i++) {
// 'scores'라는 리스트의 모든 객체중 
	if (scores[i]['score'] < 70) { // 'score'라는 키의 값이 70 미만인 친구들의
		console.log(scores[i]['name']); // 이름을 출력하는 것이죠!
	}
}

이렇게 되면 리스트화된 객체의 정보를 아주 간편하게 색인 할 수 있겠죠?

V. 앱 자주 쓰이는 Javascript(Arrow Function, 비구조 할당, 리터럴, 객체 리터럴, map)

위에서 배운 것들은 기초적인 자바스크립트 문법입니다! 지금부터 나오는 것들은 리액트에서 많이 사용되는 자바스크립트의 형태인데요, 리액트는 최신 자바스크립트의 문법을 사용하기 때문에 더 함축적이고 간결한 문법을 사용하면 편리하게 코딩 할 수 있겠죠?

화살표 함수 (Arrow Function)

저는 람다식이라고 알고 있었는데, 자바나 C#같은 언어에서는 그렇게 부르고 JavaScript에서는 화살표 함수라고 부르는 거 같아요. 화살표 함수는 아래와 같이 사용 됩니다.

[기존 방식]

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

[최신 방식]

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

둘은 완전히 같은 기능을 하지만 더 짧게 표현할수 있고 가장 편리한 점은 익명 함수로도 사용이 된다는 것입니다! 이는 조금 후에 나올 map 함수에서 알아 볼 수 있어요!

비구조 할당 (Destructuring Assignment)

이 방식은 완전히 처음 접한 방식인데 많이 사용한다고 하니 눈에 잘 익혀 두는게 좋겠네요.

//객체 
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)

리터럴

리터럴은 백틱(`)을 이용하여 문자열을 + 기호 없이 간단하게 처리 할 수 있어요!
또한 백틱 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니당!

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

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

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

객체 리터럴

기존에는 객체를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였어요.

[기존 방식]

var name = "errSum";
var job = "artist";

var user = {
  name: name,
  job: job
}

console.log(user);
//{name: "errSum", job: "artist"}

위와 같이 필드명과 대입할 변수명이 같다면 아래와 같이 간결하게 작성할 수 있습니다.

[최신 방식]

var name = "errSum";
var job = "artist";

var user = {
  name,
  job
}

console.log(user);
//{name: "errSum", job: "artist"}

key:value형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되어, 그 변수 값이 대입됩니다.

map 함수

map 함수는 반복문과 비슷한데요,

리스트에 있는 값을 꺼내 확일할 때 길이 값을 몰라도 되고, 반대로 리스트안에서 몇 번째 있는 값인지 순서를 알려줍니다.

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

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

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

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

let new_list = numbers.map((value,i) => i)

console.log(new_list)

// (7) [0, 1, 2, 3, 4, 5, 6]

let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']

let count = 0;

fruit_list.map(v => {
    if(v == '딸기')
        count++
    }
)

console.log(count);

let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']

let podo_list = fruit_list.filter(v => {return v =='포도'})

console.log(podo_list)