[스파르타] 앱개발 1주차

𝐲𝐨𝐮𝐧𝐠𝐡𝐲𝐮𝐧·2022년 1월 20일

공부 스파르타 앱개발종합반 코딩

🚀앱을 만들려면?

안드로이드 JAVA Kotlin
iOS Swift

각각 개발하는 방식은 네이티브 앱
웹사이트를 만들고 앱으로 출시하는 방식 하이브리드 앱
둘의 장점을 하나씩 가지는 크로스플랫폼 앱 은
한가지 언어로 안드로이드와 iOS에서 실행 가능

본 강의에서 개발할 앱개발 언어는 React Native

React Native를 이용해 개발된 어플들

📚자바스크립트 문법

//대문자로 출력
let myname = 'kimyoungcheon'
console.log(myname.toUpperCase())

//문자열 자르기
let email = 'kimyoungcheon97@gmail.com'
console.log(email.split('@'))

//함수
function funName(){
  console.log("함수")
}
function sum(num1, num2){
  console.log(num1+num2)
}
sum(10,20)
#30

//리터럴 함수
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)
//성인
is_adult(17)
//청소년
is_adult(7)
//어린이

//&& = 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 (시작조건; 반복조건; 더하기){
  매번실행;
}

for (let i=0; i<100; i++){
  console.log(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점 미만인 사람들의 이름만 출력할 수도 있습니다.

자바스크립트 기초 연습해보기

// 합을 구하는 함수만들기
function get_sum(n){
    let sum = 0 ;
    for (let i=0; i<n; i++){
         sum += i
    }
    return sum
}
console.log(get_sum(100))

// 리스트에서 특정원소 갯수 세기
let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

let count = 0; //count 는 for문안에 있으면 안됨
for (let i = 0; i < fruit_list.length; i++) {
	let fruit = fruit_list[i];
	if (fruit == '딸기') {
		count += 1;
	}
}
console.log(count);

📚앱개발에 자주쓰이는 문법

// #1
//기존방식
let a = function() {
  console.log("function");
}
a();
//최신방식(애로우 펑션)
let a = () => {
  console.log("arrow function");
}
a();

//#2
//객체 
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())
}

줄바꿈을 자유롭게 - 리터럴

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

map

//for
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
	console.log(numbers[i]);
}
//map
let numbers = [1,2,3,4,5,6,7];
numbers.map((value,i) => { 
	console.log(value,i) 
})
//value = 값
//i = 인덱스

모듈시스템

앞으로 우린 특정한 파일에서 정의한 값, 함수 또는 딕셔너리를 다른 자바스크립트 파일에서 불러 사용할 일이 많아집니다. 이때 사용하는 개념이 모듈 시스템입니다.
👉 export는 자바스크립트의 값, 함수, 딕셔너리(객체) 또는 자바스크립트 파일 자체를 외부로 내보내는 키워드 이고

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

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

예컨대 util.js 파일이 있다고 가정해보겠습니다.

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

👉 해당 파일에 위와 같이 함수앞에 export 키워드를 단 함수 두 개를 선언 했습니다. 이 두 함수는 같은 폴더 라인에 위치한 파일에서 이렇게 가져와서 사용할 수 있습니다.

다음은 외부의 index.js 파일에서 util.js에서 내보낸 함수들을 사용하는 모습입니다.

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

👉 이번엔, util.js 파일에 export default 키워드를 앞에 둔 하나의 함수가 있다고 가정해보겠습니다. 그리고 코드의 하단 부처럼, 작성된 함수 이름은 times지만 가지고 올 때는 k로 가져왔습니다.

// 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

👉 이렇게 export default로 선언한 함수는 해당 파일에서 유일해야 하며, 가져올 땐 이름을 달리해서 가져와서 사용 할 수 있습니다.

📚숙제

1. 특정 과일 개수 세기 문제

👉 다음에서 '딸기'는 몇 개일까?

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 cnt = 0;
fruit_list.map((value)=>{
    if(value == '딸기'){
        cnt+=1;
    }
})
console.log(cnt)

2. 이메일 검사 함수 만들기

function checkEmail(email){
	...
}

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

풀이

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

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