Day01(1-1~1-7)

필수 프로그램 설치 : VSCode&안드로이드 스튜디오, node, npm

 

1. Javascript 기초 문법-1

1) 자바스크립트란?

- 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어

- But. 자바스크립트로 앱도 제작 가능

 

2) 자바스크립트 환경

- 크롬 브라우저에서 F12(윈도우)

- console.log(변수) : 콘솔 창에 괄호 안의 값을 출력

- let, var 둘다 변수 선언 사용 가능하지만, let이 더 최신!

 

3) 변수

- 변수 대입 : ' = '의 오른쪽에 있는 값을 왼쪽에 넣는다

- let으로 변수 선언, 선언한 변수의 값은 이후 변경 가능

- 사칙연산과 문자열 더하기 가능

- const 변수 선언 : const로 선언한 변수에는 새로운 값을 재할당할 수 없다!!

 

 

.2. Javascript 기초 문법-2

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

- 리스트 : 순서를 지켜서 가지고 자료를 가지고 있는 형태

- 딕셔너리 : key와 value 값의 묶음

- 딕녀리의 값을 꺼낼 때 ' 딕셔너리명[키값] ' 과 ' 딕셔너리명.키값 ' 둘다 가능!

 

2) 자바스크립트 기본 제공 함수

- 나눗셈의 나머지를 구하는 경우 : %

- 모든 알파벳 대문자로 변경 : 변수명.toUpperCase()

- 특정 문자로 문자열을 나누는 경우 : 변수명.split('특정문자')

- 특정 문자로 합치는 경우 : 변수명.join('특정문자')

 

3) 함수

- 기본 생김새

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

- 또다른 함수 선언 방식

let a = function() {
	console.log("리터럴 방식이라고 합니다.")
}

a()

 

 

3. Javascript 기초 문법-3

1) 조건문

- 특정 조건을 만족하는 경우와 그렇지 않은 경우를 분리해 명령을 처리

- AND 와 OR 조건 사용 가능

- AND는 조건을 모두 만족, OR은 최소 하나만 만족하면 조건이 TRUE

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

 

2) 반복문

- 일정 조건을 만족하는 동안 특정 명령문 반복

- 주로 리스트와 함께 사용(아니면 딕셔너리)

- 기본 구조

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

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

와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

 

3) 합을 구하는 함수 만들기

- 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를 출력

 

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

- 특정 배열에서 '딸기'의 개수 구하기

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);

*나는 그냥 fruit 변수 안 만들고 fruit_list[i] == '딸기' 조건으로 세움.. 변수 생성 시 조건문이 보기 편하다는 장점있음. 그리고 자바스크립트의 문자열 비교는 '==' or '===' 이다!

 

5) 미세먼지(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);
  }
}

*마찬가지로 mise변수 대신 mise_list[i]["IDEX_MVL"] < 40 사용 가능

 

 

4. 앱개발에 자주 쓰이는 Javascript

1) 함축적인 자바스크립트

- 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법 사용

 

2) 화살표 함수

- 기존 방식

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

- 최신 방식(function 생략 후 화살표 추가)

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

 

3) 비구조 할당

- 딕셔너리에 있는 값을 꺼내 변수에 담을 때 할당 과정을 거치지 않으면서 딕셔너리의 키 값 그대로 변수사용 가능

//객체 생성
let blog = {
	ower: "noah",
    url: "noahlogs.tistory.com",
    getPost() {
    	console.log("ES6 문법 정리");
    }
    //딕셔너리에 함수도 포함 가능
};

//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()

//비구조 할당 방식(blog의 키값과 변수명이 동일해야 함!)
let { ower, getPost } = blog;

//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({ owner, url, getPost }) => {
	console.log(owner)
    console.log(url)
    console.log(getPost())
}

blogFunction(blog) //해당 딕셔너리에서 비구조 할당 방식 적용해 값 꺼냄

 

4) 객체 리터럴

- 딕셔너리 생성 시 필드명과 대입할 변수명이 같은 상황에 적용

- 기존 방식

[기존 방식]

let name = "스파르타";
let job = "developer";

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

console.log(user);
//{name: "스파르타", job: "developer"}

- 최신 방식

let name = "스파르타";
let job = "developer";

let user = {
	name,
    job
}

console.log(user);
//{name: "스파르타", job: "developer"}

- 기존 key: value 형태에서 단순히 변수명만 작성 시 변수명과 동일한 필드가 생성되고, 그 변수 값이 대입

 

5) map : 반복문의 또다른 방식

- 기존 for문 사용

let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
	console.log(numbers[i]);
}

- But. 리스트의 길이 값을 모를 경우 map 함수 이용

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

 

 

5. 1주차 끝&숙제설명

숙제 1 : 배열에서 특정 원소('딸기') 개수 구하기 - map 함수 사용

let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']
let count = 0
fruit_list.map(function (item, index) {
               if(item == '딸기') {
                   count+=1
               }
})
console.log(count)

//정답
let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']
let count = 0;
fruit_list.map((f)=>{
    if(f == "딸기") count += 1
})

console.log(count)

 

숙제 2 : filter 함수로 '포도'만 들어 있는 podo_list 구현해보기

let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']
let result = fruit_list.filter(str=> str=='포도')
console.log(result)

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

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

console.log(podo_list) //['포도','포도','포도']

*result가 아니라 podo_list로 변경해야 한다.