[1주차 개발일지] 스파르타코딩클럽 앱개발반

[JS(자바스크립트)]

보통 웹 사이트에서 움직이는 그림을 뜻하는 가벼운 언어

(ex) 팝업창

*크롬 브라우즈를 실행한 다음 윈도우는 F12를 눌러서 구글 크롬 콘솔 창을 킨다.

Console.log(“hello world”)

hello world

→ Undefined는 무시해도 됨. 그냥 구분선이라 의미 없음

num=100
console.log(num)

→ 숫자 출력

 

[자바스크립트 기초 문법]

* 함수를 찾고 싶을 때, 구글에 영어로 검색해서 맨 위에 나오는 developer Mozila 사용
* 커서를 입력 칸에 두고 방향키를 위로 올리면 위에 썼던 함수를 확인할 수 있다.

 

let a = 1
let b = 2
let c = a + b
console.log(c)

→ 숫자와 영문의 치환

→ console.log(a * b) 라고 쳐도 연산 가능

let first = 'gun'
let last = 'kim'
console.log(first+last)

gunkim

→ ‘ ’ 혹은 “ “ 안에 있는 것은 문자열

→ 공백도 추가 가능 (ex) console.log(first+” “+last)

→ let firstName : 카멜케이스 / let first_name : 스네이크케이스
    : 개발할 때 변수를 둘 중 어떤 방식으로 정하고 쭉 쓰면 된다.

const num2 = 1000

→ const 로 설정한 변수는 평생 그 변수를 가지고 있는 그릇이 된다.

→ 필요한 이유? 개발하다가 바뀌면 안되는 중요한 변수가 있을 때 그 변수를 고정하기 위해 사용한다.

 

[리스트]

변수를 여러 개 담을 수 있음(여러 데이터를 쌓아놓는 바구니)

(ex1)

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

(ex2)

let a_list = [1,2,3,’gun’,4,5,6,’kim’,7]

→ 문자열도 가능

**주의할 점: 프로그램에서 대괄호 안 첫번째 순서는 0번째 숫자이다. 즉 1은 0번째 데이터.

 

If 4번째 있는 값을 꺼내고 싶으면,

Console.log(a_list[4])

If 리스트 뒤에 값을 넣고 싶으면,

a_list.push(‘sparta’)
console.log(a_list)

(10) [1, 2, 3, 'gun', 4, 5, 6, 'kim', 7, 'sparta']

If 리스트에 몇 개가 들어있는지 알고 싶으면,

a_list.length

 

[Dictionary]

let a_dict = {"name":"gun"}

→ name이라는 키 값에 gun이라는 값이 들어있는 하나의 형태

 

* 콤마(,)로 연결해서 추가도 가능

(ex)

let a_dict = {"name":"gun","age":30}

If 이름을 알고 싶으면,

console.log(a_dict["name"])

If 값을 추가하고 싶으면,

a_dict["height"] = 200

If dict 확인,

console.log(a_dict)

{name: 'gun', age: 30, height: 200}

 

[리스트와 딕셔너리의 혼용]

(ex1)

let names = [{"name":"gun","age":30},{"name":"gu","age":20}]
console.log(names)

딕셔너리 형태로 리스트에 담긴 것

 (2) [{…}, {…}]
1.	0: {name: 'gun', age: 30}
2.	1: {name: 'gu', age: 20}
3.	length: 2
4.	[[Prototype]]: Array(0)

If 추가하고 싶다,

name.push("name":"gun","age":30)
console.log(name)

(3) [{…}, {…}, {…}]
1.	0: {name: 'gun', age: 30}
2.	1: {name: 'gu', age: 20}
3.	2: {name: 'g', age: 30}

If 나머지를 알고 싶으면,

let a = 20
let b = 7
console.log(a % b)

If 몫을 알고 싶으면,

let a = 20
let b = 7
console.log(a / b)

If 소문자를 대문자로 바꾸고 싶으면,

 

let myname = "kimgun"
console.log(myname.toUpperCase())

If 문자열을 나누고 싶다면(@ 기준으로),

let email = "gunkim@email.com"
console.log(email.split('@'))

→ split은 구분하고 싶은 문자열을 기준으로 문자열을 나누는 것

 

(응용1) 무슨 도메인을 사용하는지 알고 싶다

console.log(email.split('@')[1])

→ [1]인 이유는 @뒤에 이기 때문(0번째부터 시작함 유의)

(응용2) . 기준으로 나누기

console.log(email.split('@')[1].split('.'))

→ @로 나눈 것 기준에서 . 을 기준으로 한번 더 나눈 것

(응용3) 텍스트 나누기

let txt = "서울시-마포구-망원동"
let names = txt.split("-")
console.log(names)

If 문자열을 합치고 싶다면(위와 연결),

(1)	console.log(names.join('>'))
(2)	concat → 리스트 합치기

 

[함수는 어떻게 만들까]

function funcName(){
    console.log("함수")
}
funcName()

→ funcName은 그냥 임의로 정한 것. 이 함수는 그냥 “함수”라는 선언 기능만 함

function funcNum(num1, num2){
console.log(num1 + num2)
}
funcNum(10,20)

→ num1 = 10, num2 = 20으로 설정된 것

→ 값에다가 이름을 지을 수 있다

function minus(num1,num2){
return num1 - num2
}
let result = minus(100,10)
console.log(result)

→ result가 y값의 역할을 한다

let a = function(){
    console.log("리터럴 함수 방식")
}
a()

→ 어떤 변수에 함수를 정의하고 그 함수 자체를 변수에 넣어줘서 변수가 함수의 역할을 할 수 있도록 하는 함수

 

[조건문과 반복문_자바스크립트의 꽃]

function is_adult(age){
    if(age>20){
        console.log("성인")
    }else if(age>10){
        console.log("청소년")
    }else{
        console.log("어린이")
    }
}
}

→ is_adult(30)

*if, else if, else : 여러 조건을 걸 때

 

*AND: 둘 다 해당

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

*OR: 둘 중 하나만 해당

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,'남')

 

*반복문

for(let i=0; i<10; i++)

→ i를 0부터 10보다 작을 때까지만 실행될거고 i는 1씩 증가시킬 것

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

→ 0~9까지 나옴

let people = ['철수','영희','민수','형준','기남','동희']
for(let i = 0 ; i < people.length ; i++){
    console.log(people[i])
}

→ 리스트와 반복문은 자주 같이 쓰인다.

let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
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++) {
if(scores[i]['score'] < 70){ 
console.log(scores[i]);
}

for (let i = 0 ; i < scores.length ; i++) {
console.log(scores[i]);
}

 

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

 

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++){
    if(scores[i]['score'] < 70){
        console.log(scores[i]);
    }
    }

→ 70점 이하인 사람만 sorting

 

[Javascript 기초 연습하기]

1) 합을 구하는 함수 만들기
→ 0부터 n-1까지 더하는 함수를 만들고 싶다면

function get_sum(n){
    let sum = 0;
    for(let i=0; i<n; i++){
        sum = sum + i
    }
    return sum
}
let result = get_sum(100)
console.log(result)

→ sum += i 는 sum = sum + i 와 같다

 

2) 배열에서 특정 원소 개수 구하기
→ 다음에서 ‘딸기’는 몇 개일까?
  * for문은 돌 때마다 초기화됨\

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

let count = 0

for(let i=0; i<fruit_list.length; i++){
    let fruit = fruit_list[i]
    if(fruit == "딸기"){
        count += 1
    }
}

console.log(count)

 

3) 미세먼지(IDEX_MVL)의 값이 40미만인 구 이름(MSRSTE_NM)과 값을 출력하기
→ 미세먼지 지수가 40보다 작은 구 찾기

리스트와 딕셔너리의 복합구조는 ‘JSON 데이터’라고 부름.
‘JSON 데이터’를 가지고 원하는 데이터 취하는 일이 훨씬 많다.

 

 

[앱개발에 자주 쓰이는 자바스크립트]

1) 함수 정의 방법: 화살표 함수(arrow function)

let a = () => {
    console.log("함수")
}
let a = () => {
}

→ function 자리에 => 표시 넣기

 

2) 딕셔너리 키와 값을 빠르게 꺼내기

“”가 안붙어도 키와 벨류의 형태라고 컴퓨터가 인식
(ex) owner : “noah”

let owner = blog.owner는 let owner = blog[“owner”]와 동일

*할당 방식과 비구조 할당 방식이 있다

 

- 강의자료

  //기존 할당 방식
  let owner = blog.owner
  let getPost = blog.getPost()
  //비구조 할당 방식
  let { owner, getPost } = blog;

 

3) 자바스크립트 축약형 – 리터럴: 가독성 좋아짐
→ 백틱(`)-esc 바로 밑에
→ 윈도우 ctrl 백틱
→ 줄바꿈이 용이함-원래는 백슬래시(\키)n을 써야 함

 

4) 딕셔너리 짧게 만들기

- 기존 방식

var name = "스파르타"; 
var job = "developer"; 
var user = { 
name: name, 
job: job 
}

name: name,
job: job

→ 변수와 키가 이름이 똑같음

- 축약형

var name = "스파르타";
var job = "developer"; 
var user = { 
name, 
job 
}

name,
job

→ 키와 변수가 같다면 축약형!

 

5) Map
→ for문도 적어도 3줄 잡아먹지만 map은 한줄로 끝낼 수가 있음
→ 반복문의 또 다른 방식
→ 길이값을 몰라도 사용 가능

Map은 함수가 실행이 되는 것이다!

num_list = [1,2,3,4,5,6,7]
num_list.map(function(value, i){
   console.log(value, i)
})

6) 자바스크립트 파일을 모듈화-module system

export는 자바스크립트의 값, 함수, 딕셔너리(객체) 또는 자바스크립트 파일 자체를 외부로 내보내는 키워드

 

import는 반대로 자바스크립트 파일 안으로 가져오는 키워드

 

외부로 내보낸다는 건 밖에서 쓸 수 있게 준비한다는 의미
내부로 가져온다는 것은 외부로 내보낸 것들을 가져온다는 의미