앱개발 종합반 1주차 개발일지
Javascript 기초문법
let a_list = [ ] 리스트를 선언,변수 이름은 임의로 설정 가능. 대괄호 안에는 값을 담는다. ⇒ 대괄호로 선언하는건 리스트이다.
let a_dict = { } 딕셔너리 선언.변수 이름은 임의로 설정 가능. 중괄호 안에는 값을 담는다. ⇒ 중괄호로 선언하는건 딕셔너리다, 객체를 의미한다.
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력 (딕셔너리는 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번째 딕셔너리와 1번째 딕셔너리가 존재한다.
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name) ⇒ 여기서 names에 새로운 값을 넣을때:names라는 리스트에 새로운 값을 넣을 대에는 push( )라는 함수를 쓴다.push라는 함수안에 new_name라는 변수를 넣을수있고 (변수의 모습은 딕셔너리로 되어있음)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john' ⇒ 여기서 두번째 항목에서 name키를 불러내오면 이름이 출력된다.
AND 조건과 OR 조건!
// 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 < 100; i++) { console.log(i); }
for (1. 시작조건; 2. 반복조건; 3. 더하기) { 4. 매번실행 }
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3 와 같은 순서로 실행됩니다.
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++) {
console.log(scores[i]);
} // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
for (let i = 0 ; i < scores.length ; i++) { if (scores[i]['score'] < 70) { console.log(scores[i]['name']); } } // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
Javascript 기초 연습해보기
0부터 n-1까지 더하는 함수를 만들고 싶다면?
function get_sum(n) {
let sum = 0
for (let i = 0; i < n; i++) {
sum += i; // sum을 i만큼 증가시켜라.sum = sum + i 와 동일!
}
return sum
}
let result = get_sum(10);//return 결과인 sum이 result에 저장
console.log(result) // 45를 출력
배열에서 특정 원소 갯수 구하기
다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
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);
미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
미세먼지 지수가 40보다 작은 구 찾기!
서울시 미세먼지 값
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
if (mise["IDEX_MVL"] < 40) {
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
}
}
함수를 더 짧게! - 화살표 함수
기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.
[기존 방식]
let a = function() {
console.log("function");
}
a();
[최신 방식]
let a = () => {
console.log("arrow function");
}
a();.
딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
//객체
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 = "스파르타";
var job = "developer";
var user = { name: name, job: job }
console.log(user); //{name: "스파르타", job: "developer"}
[최신 방식]
var name = "스파르타";
var job = "developer";
var user = { name, job }
console.log(user); //{name: "스파르타", job: "developer"}
key: value 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
map -반복문의 또 다른 방식
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
console.log(numbers[i]);
}
map은 리스트의 길이값을 몰라도 되며, for와는 반대로 리스트안에서 몇 번째에 있는 값인지 순서를 알려줍니다.
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
숙제1:
let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']
let count = 0;
fruit_list.map((value,i) => {
let fruit = fruit_list[i];
if (fruit == '딸기') {
count += 1;
}
})
console.log(count);
숙제2:
let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']
let podo_list = fruit_list.filter((podo) => {
return podo =='포도'
})
console.log(podo_list);