스파르타 앱개발 종합반_1주차(자바 눈뜨기)

학창시절 컴퓨터 수업때

홈페이지 만든다고

교과서 뒤져가며 메모장에

html table br 뭐 이런 단어 나열해가며

작성해본 이후론 처음으로

 

말로만듣던 (나에겐 외계어)

자바스크립트 Javascript 라는 언어?문법?을 

드디어 접해본다. 두근

 

[1주차 수업 정리하기]

 

0. 수업 들어가기

 

1) 앱 개발 종류만 먼저 이해하자!

 

안드로이드, IOS를 각각 개발 하는 네이티브 앱

웹사이트에 껍데기만 씌워 간단히 배포하는 하이브리드 앱

 

이제 내가 배울 크로스 플랫폼 앱

 

네이티브앱과 하이브리드앱의 장점만 모아놨다고 한다.

 

2) 필수 프로그램 설치

 

 - (공통) VSCode&안드로이드 스튜디오

▷ Visual Studio Code https://code.visualstudio.com/

▷ 안드로이드 스튜디오 https://developer.android.com/studio

 

 - (Windows 사용자만) node, npm 설치

▷node, npm https://nodejs.org/download/release/v12.19.1/node-v12.19.1-x64.msi

node만 설치하면 npm도 설치됨

 

 - (Mac 사용자만) XCode&node, npm 설치

▷XCode https://apps.apple.com/kr/app/xcode/id497799835?mt=12 

▷node, npm https://nodejs.org/download/release/v12.19.1/node-v12.19.1.pkg

 

앱 개발을 위한 도구인 프로그램 설치가 되었으니 

 

본격적으로 이제

차례대로 기본중의 기본 문법들을 나열해본다.

 

1. let 으로 변수를 선언한다

 

let num = 20

 

num이란 칠판을 만들어 데이터를 붙이려면 먼저 let 으로 선언하고

num에 20이란 데이터를 저장하는 방식이랄까

 

결과값은 "num은 20이다" 라는 규칙이 만들어진다.

 

let num = 20

num = 'Bob'

 

let으로 num을 한번 선언했다면 이후로 추가데이터를 붙일땐 let 없이~

 

결과값은 "num은 Bob이다" 라는 규칙으로 변경된다.

 

2. const 로 변수를 고정한다

 

const num = 20

num = 'Bob'

 

let 대신 const 를 입력한다면 num은 20이다 에서 고정되고

bob으로 변경되지 않는다.

 

* 쉽게 변하지 않아야 하는 값은 const로 고정변수를 선언할 것

 

3. 사칙연산, 문자열 더하기

 

let a = 1

let b = 2

 

let 으로 a와 b라는 변수에 데이터를 각각 선언하면

 

a+b      // 3

a/b      // 0.5

 

변수의 합에 따라 입력한 데이터가 사칙연산 되어진다.

 

let first = 'Bob'

let last = 'Lee'

 

선언한 변수의 데이터가 문자로 되어있어도

 

first+last           // 'BobLee'

first+' '+last      // 'Bob Lee'

 

변수의 합, 더하기에 따라 문자열이 합쳐져서 출력된다.

 

* 띄어쓰기를 하려면 변수에 '+' 를 위치에 맞게 입력할 것

 

4. 리스트(배열) & 딕셔너리(객체) 구분하기

 

1) 리스트

 - '배열' 또는 'array' 라고도 한다.

 - 순서대로 데이터가 나열된 값

 - 입력할 땐  "[  ]" 괄호를 사용한다.

 

let a_list = [1,2,'hey',3]

 

a 라는 변수 안에 1, 2, 'hey', 3 이란 값이 순서대로 선언된다.

 

값을 추출할 때 순서는 0번째부터 시작한다.

ex)  let a_list = [1,2,'hey',3] 에서

a_list[0] 값은 '1' , a_list[2] 값은 'hey'가 된다

 

 - 처음 입력된 변수 리스트에 값을 추가 하고 싶다면

   .push 를 사용하기

 

let a_list = [1,2,'hey',3] 다음에

a_list.push('헤이') 를 입력하면

 

a_list 결과값은 [1, 2, "hey", 3, "헤이"] 로 출력된다

 

개념 정리

리스트는 명단을 나열할 때 

1반_list = [철수,영희,길동,-------]

 

 

2) 딕셔너리

 - '객체'라고 한다. 

 - 각각의 (밸류 Value) 값의 묶음 

 - 입력할 땐  "{  }" 괄호를 사용한다.

 

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

 

a 라는 변수안에 각각의 값들이 입력된다.

 

 - 처음 입력된 변수 딕셔너리에 값을 추가 하고 싶다면

let a_dict = {'name':'Bob','age':21}다음에

a_dict['height'] = 180 으로 입력하면 

let a_dict = {'name':'Bob','age':21,'height':180}

으로 추가된다

 

출력할땐

a_dict[name]  값은 Bob으로 출력된다 

 

개념 정리

리스트는 조건 정보를 입력하고 찾을 때

철수_dict = {이름:철수, 키:180, 몸무게:70 -----}]

 

3) 리스트와 딕셔너리 조합

 

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

이름들 = 이름과 나이값이 묶인 순서대로 나열된다

출력할땐 순서[0번째]와 조건['0000']으로 찾는다

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

// names[1]['age']의 값은? '38'

 

값을 추가할 땐 

new_name = {'name':'john','age':7}

names.push(new_name)

 

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

위 변수에서 bob 이름을 꺼낼땐

b_dict['name']

b_dict.name

두가지 방식으로 가능

 

개념 정리

조건붙은 명단 정리로 생각하기명단 = [{철수,20살},{영희,18살},{길동,35살},-----]

 

실제활용

- 고객 별로 따로 정보 묶기

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'}

]

 

5. 자바스크립트 기본 제공 함수

 

1) 나눗셈 나머지 구하기

 

let a = 20

let b = 7

 

a % b   

 

결과값은 '6'

 

2) 모든 알파벳 대문자로 변환하기

 

let myname = 'spartacodingclub'    변수에

myname.toUpperCase()   를 입력하면

 

결과값은 'SPARTACODINGCLUB'

 

3) 문자열 분리하기

 

let myemail = 'sparta@gmail.com'  변수에서

let result = myemail.split('@')    로 입력하면

@기준으로 분리되면서

 

결과값은 ['sparta','gmail.com'] 가 되고

출력할 땐

result[0]   값은 'sparta'

result[1]   값은 'gmail.com'

 

추가로 'gmail.com' 변수값에서

 

let result2 = result[1].split('.')

로 입력하면 '.' 기준으로 분리되면서

 

결과값은 ['gmail','com'] 가 되며

출력할땐

result2[0]     ->   gmail

result2[1]     ->   com

 

tip!

위 문법에서 분리시키고 결과물 출력까지의 문법을

간단명료하게 쓰는 방법

 

let myemail = 'sparta@gmail.com'  변수에서

myemail.split('@')[1].split('.')[0]     ->  gmail

 

4) 함수 & 조건문

---

- 기본 생김새

 

// 만들기

function 함수이름(필요한 변수들) {

   내릴 명령들을 순차적으로 작성

}

 

// 사용하기

함수이름(필요한 변수들);

---

<조건 결과 팝업창 띄우기>

 

 - 기준 조건에 따라 크고 작음을 구분해주는 함수 'alert'

 

function is_adult(age){ 

   if(age > 20){

 

     alert('성인이에요')  

   } else { 

     alert('청소년이에요') 

   }

}

 

is_adult(25)

 

function 성인 나이라는 변수에

조건으로 20살 초과한다면 결과는 성인으로 표시되고 

else로 표현하여 위 조건 외에는 모두 청소년으로 표시되게한다.

 

그래서 출력값을 

is_adult(25)

로 입력하면 25살은 '성인이에요'로 팝업이 뜬다.

 

 - if, else if, else if else

 

function is_adult(age){

   if(age > 20){

     alert('성인이에요')

   } else if (age > 10) {

     alert('청소년이에요')

   } else {

     alert('10살 이하!')

   }

}

 

is_adult(12)

 

20이상은 성인, 10이상은 청소년, 그외에는 10살 이하

로 표시되게 하는 조건식.

 

기본조건 if, 중간 조건 else if, 그 밖에 조건 else

 

 - AND, OR 

 

// AND 조건, '&&'

function is_adult(age, sex){
   if(age > 20 && sex == '여'){
     alert('성인 여성')
   } else if (age > 20 && sex == '남') {
   alert('성인 남성')
   } else {
     alert('청소년이에요')
   }
}

 

나이와 성별 모두 포함된 조건일때 '입력값' 출력

그 외에는 '나머지 결과값' 출력

 

// 참고: OR 조건, '||' (엔터키 위에 shif+\키)

function is_adult(age, sex){
   if (age > 65 || age < 10) {
     alert('탑승하실 수 없습니다')
   } else if(age > 20 && sex == '여'){
     alert('성인 여성')
   } else if (age > 20 && sex == '남') {
     alert('성인 남성')
   } else {
     alert('청소년이에요')
   }
}

is_adult(25,'남')

 

A 값 또는 B값 둘 중 하나에 포함된 조건이면

'해당 입력 값' 출력

그 외에는 나머지 입력 값들이 출력된다.

 

5) 반복문

 

console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)

이런 반복 입력이 당연히 힘드니깐

간단하게 함축한 공식!!

 

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

 

for 이란 반복문으로 시작해서

0부터(i=0) 1씩 더해지며(i++) 100미만 숫자까지(i<100)

차례대로 입력되게 한다.

 

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

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

와 같은 순서로 실행

 

실제활용

반복문은 주로 리스트와 함께 쓰인다.

 

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

 

이런 리스트에 점수가 함께 연결되면서

 

let scores = [
  {'name':'철수', 'score':90},
  {'name':'영희', 'score':85},
  {'name':'민수', 'score':70},
  {'name':'형준', 'score':50},
  {'name':'기남', 'score':68},
  {'name':'동희', 'score':30},
]
명단 리스트에
for (let i = 0 ; i < scores.length ; i++) {
   console.log(scores[i]);
}

// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

 

for (let i = 0 ; i < scores.length ; i++) {
   if (scores[i]['score'] < 70) {
     console.log(scores[i]['name']);
   }
}

// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있다.

 

문법 구조 눈에 익히기!!

 

 

 

마지막!!

6. Javascript 기초 연습

 

0) 결과 값을 구할때 단어 축약하기

 

필요한 변수,함수들을 입력한 뒤

 

let로 선언하고 result 변수에 get_sum(i) 값을 입력하면

let result = get_sum(i)

긴 단어인 get_sum(i) 대신 축약시킨

console.log(result) 로 결과 값을 출력한다.

 

ex)

let result = 제주도 출신, 나이 20세, 도술사, 남성, 잘생김

console.log(result)     //  홍길동

 

1) 합 구하기, 'sum'

 

0부터 n보다 작은 숫자까지 i를 증가시키며

총합을 구하라

 

n=5 일땐 0+1+2+3+4의 값을 구함

 

function get_sum(n) {
    let sum = 0   0번부터 합하라
    for (let i = 0; i < n; i++) {
        sum += i;      sum을 i만큼 증가시키라는 의미
    }
    return sum
}

let result = get_sum(5);
console.log(result)       // 10을 출력

 

중간 함수식 변형도 가능 

i < n n보다 작은 숫자까지

i < n+1 n+1보다 작은 숫자까지, 즉 n까지의 의미

 

 

2) 배열에서 특정 원소 갯수 구하기

 

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

let count = 0;    0번째부터 센다
for (let i = 0; i < fruit_list.length; i++) {    length는 갯수, 길이를 의미
   let fruit = fruit_list[i];      딸기 리스트를 fruit에 담고
   if (fruit == '딸기') {       조건인 딸기를 count해서 더하기
     count += 1;
   }
}
console.log(count);

 

결과 값은 2,

 

---

여기까지 

자바스크립트에서 제공되는 기본함수까지

아주 기본만 다뤄봤는데

난생 처음배우는거라 기본중 기본이지만 자세하게 정리해본다

 

앞으론 앱개발에서 쓰일 문법과 구조들을

좀더 간단하게 요약하며

 

정리해봐야겠다