앱개발 종합반 1주차

함축적인 자바스크립트

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

화살표 함수(Arrow Function)

함수를 더 짧게 표현하기 위해 '화살표 함수'를 사용한다.
즉, 기존에는 함수를 선언하기 위해서 functon 키워드를 사용하였으나 이를 화살표 함수(Arrow Function) 문법으로도 선언이 가능.

기존 방식

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

최신 방식

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

비구조 할당

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

다음의 객체가 있다. 키값은 자동으로 인식하기 때문에 꼭 " "안에 넣을 필요는 없다. 함수도 인식한다.

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의 키 값과 이름이 같아야 한다.

함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기

앞으로 리액트 네이티브 앱을 만들 때 가장 많이 사용하는 방식이다.

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

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

사실 map 안에 함수가 있다. 다음과 같은 것이다.

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

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

Module system : 자바스크립트 파일을 모듈화

함수, 딕셔너리를 다른 자바스크립트 파일에서 불러 사용할 일이 많아진다. 이때 사용하는 개념이 모듈 시스템이다

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

외부로 내보낸다는 것은 밖에서 사용할 수 있도록 준비한다는 의미이고, 내부로 가져온다는 것은 외부로 내보낸 것들을 가져온다는 의미임

util.js

//times, plusTwo 함수를 외부로 내보낼 준비를 합니다. 
export function times(x) { 
  return x * x; 
} 
export function plusTwo(number) { 
  return number + 2; 
}

index.js

import { times, plusTwo } from './util.js'; 
console.log(times(2)); 
console.log(plusTwo(3));

util.js 파일에 export default 키워드
이 키워드를 함수 앞에 두면, 작성된 함수의 이름은 times 이지만 가지고 올 때 k로 가져올 수 있다. export default로 선언한 함수는 해당 파일에서 유일해야 하며, 가져올 땐 이름을 달리해서 가져올 수 있다는 말이다.

// in util.js 
export default function times(x) { 
  return x * x; 
} 
// in app.js 
import k from './util.js'; 
console.log(k(4)); // returns 16

숙제

(1) 배열에서 특정 원소 개수 구하기 - map 함수를 사용해서 해결하기 (다음에서 '딸기'는 몇 개 일까?)

보기 예시 코드

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

내가 숙제한 코드

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

let count = 0;
fruit_list.map((value, i) => {
    if(value == '감') {
        count += 1;
    }
});

console.log(count)

답한 코드

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

console.log(count)

(2) 이메일 판별하기

내가 숙제한 코드 : indexOf

let checkEmail = (email) => {
    if (email.indexOf('@') >= 0) {
        console.log('이메일이 맞습니다.');
    } else {
        console.log('이메일이 아닙니다.');
    };
}

checkEmail('abc@email.com');   
checkEmail('abd$email.com');

내가 숙제한 코드 : 정규식 이용

let checkEmail2 = (email) => {
    let regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
    if (email.match(regExp) != null) {
        console.log('이메일이 맞습니다.');
    } else {
        console.log('이메일이 아닙니다.');
    }
}

checkEmail2('abc@email.com');
checkEmail2('abd$email.com');

답안 코드 : indexOf

function checkEmail(email){
    if(email.indexOf('@') < 0){
        console.log("이메일이 아닙니다");
    }else{
        console.log("이메일이 맞습니다");
    }
}

checkEmail('gunhee21@gmail.com') // 이메일이 맞습니다
checkEmail('gunhee21$gmail.com') // 이메일이 아닙니다.

답안 코드 : 정규식 이용

function checkEmail(email){
    //이메일 정규식
    var emailRule = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
    if(!emailRule.test(email)){
        console.log("이메일이 아닙니다");
    }else{
        console.log("이메일이 맞습니다");
    }

}

checkEmail("gunhee21@gmail.com");
checkEmail("gunhee21#gmail.com");

//도메인에 .com이 없는 경우까지 판별
function email_check( email ) {    
    var regex=/([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return (email != '' && email != 'undefined' && regex.test(email)); 
}

console.log(email_check('gunhee21@gmail'))