앱개발 기초 2일차

전윤환·2022년 3월 8일
내일배움단스파르타코딩클럽
0

앱개발종합반

목록 보기
2/6

학습일자: 2022/03/08
강의: 앱개발 종합반
진도: 1-5 ~ 2-4

앱은 아직 자바스크립트 배우는 중이니까,
복습한다는 마음으로 가볍게 하자

=====================

let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']
let mise_list = [
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 22,
PM25: 14,
O3: 0.018,
NO2: 0.015,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "종로구",
PM10: 24,
PM25: 18,
O3: 0.013,
NO2: 0.016,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "용산구",
PM10: 0,
PM25: 15,
O3: 0.012,
NO2: 0.027,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "점검중",
IDEX_MVL: -99,
ARPLT_MAIN: "점검중",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "은평구",
PM10: 36,
PM25: 14,
O3: 0.019,
NO2: 0.018,
CO: 0.5,
SO2: 0.005,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "서대문구",
PM10: 28,
PM25: 9,
O3: 0.018,
NO2: 0.015,
CO: 0.6,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "마포구",
PM10: 26,
PM25: 8,
O3: 0.012,
NO2: 0.021,
CO: 0.5,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 36,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "광진구",
PM10: 17,
PM25: 9,
O3: 0.018,
NO2: 0.016,
CO: 0.6,
SO2: 0.001,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "성동구",
PM10: 21,
PM25: 12,
O3: 0.018,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 33,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "중랑구",
PM10: 27,
PM25: 10,
O3: 0.015,
NO2: 0.019,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 34,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "동대문구",
PM10: 26,
PM25: 9,
O3: 0.016,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 34,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "성북구",
PM10: 27,
PM25: 8,
O3: 0.022,
NO2: 0.014,
CO: 0.5,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "도봉구",
PM10: 25,
PM25: 12,
O3: 0.024,
NO2: 0.011,
CO: 0.3,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "강북구",
PM10: 30,
PM25: 15,
O3: 0.022,
NO2: 0.02,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "노원구",
PM10: 21,
PM25: 14,
O3: 0.017,
NO2: 0.016,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 36,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "강서구",
PM10: 36,
PM25: 16,
O3: 0.021,
NO2: 0.013,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "구로구",
PM10: 23,
PM25: 10,
O3: 0.022,
NO2: 0.016,
CO: 0.3,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "영등포구",
PM10: 29,
PM25: 15,
O3: 0.01,
NO2: 0.022,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "동작구",
PM10: 29,
PM25: 15,
O3: 0.012,
NO2: 0.023,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "관악구",
PM10: 27,
PM25: 12,
O3: 0.012,
NO2: 0.022,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "금천구",
PM10: 25,
PM25: 15,
O3: 0.015,
NO2: 0.02,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 43,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "양천구",
PM10: 0,
PM25: 14,
O3: 0.016,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "점검중",
IDEX_MVL: -99,
ARPLT_MAIN: "점검중",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "강남구",
PM10: 31,
PM25: 16,
O3: 0.018,
NO2: 0.018,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "서초구",
PM10: 34,
PM25: 13,
O3: 0.024,
NO2: 0.019,
CO: 0.3,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "송파구",
PM10: 25,
PM25: 6,
O3: 0.014,
NO2: 0.025,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "강동구",
PM10: 24,
PM25: 14,
O3: 0.016,
NO2: 0.02,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25",
},
];

사과 개수 세기, 미세먼지...머 이건 처음할때 이해안돼서 너무 많이 했던거라 설명은 생략

=====================

함축적인 자바스크립트 문법

화살표 문법(arrow function)

let a = () => {

}

띠요요용...
let a = function(){console.log('ㅎㅎ')} 대신 위처럼 사용이 가능하다.

비구조 할당

//객체 
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)

일단 넘어가자....

=====================

축약 2

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

var user = {
  name,
  job
}

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

아니 이게 되네... 왜 전엔 안알려줬어요 ㅠㅠ

(var 대신 let을 써도 먹힐까? --- 실험결과 가능)

=====================

축약 3

map = 짧은 for문

기존 for 문
let numbers = [1,2,3,4,5,6,7];

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

새로운 map 사용법
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

value값, i값(순서값=index값)이 위처럼 나온다.

=====================

모듈 시스템

파일 불러오기와 같은 기능

export = 자바스크립트파일을 만들고나서, 외부에서도 쓸수있다고 선언
import = export 선언된 자바스크립트파일을 불러온다고 선언

util.js라는 파일의 코드

export function times(x) {
  return x * x;
}
export function plusTwo(number) {
  return number + 2;
}
외부의 파일에서 export 선언된 파일의 함수를 불러오는 코드
import { times, plusTwo } from './util.js';
console.log(times(2));
console.log(plusTwo(3));
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

util.js 파일 안의 times라는 함수를, app.js라는 외부파일에서 k라는 명칭으로 사용할 수 있다.

=====================

숙제 1.

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

map을 이용해 딸기 개수 세기

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

숙제 2. 아래에서 ...을 채워서 이메일 정상입력여부 판단하기

function checkEmail(email){
	...
}

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

1) indexOf로 해결하기

잠깐, indexOf란?(O는 반드시 대문자)
변수.indexOf("@") -> @가 변수의 몇번째 인덱스에 있는지 알려줌.
변수 안에 @가 없으면? -1을 반환함.
위 문제에서 email.indexOf("@") = -1이면? @가 email에 미포함이라는 뜻

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

이런식으로 하면 되지 않을까??

※ indexOf에 대해 쉽게 설명되어있는 블로그 발견
클릭

 

2) 정규식으로 해결하기

정규식은....어....ㅎㅎ; ㅈㅅ!

//도메인에 .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'))

※ 정규표현식에 대해 잘 정리된 블로그 발견
클릭

=====================

2주차 시작!

react = 페이스북에서 만든 프론트앤드 개발기술
react.native = react를 기반으로 프로그래밍을 도와주는 라이브러리
expo = 안드로이드와 ios를 알아야되는 상황을 모면해주는 기술
node.js = 자바스크립트 개발환경 구축
npm = 자바스크립트 앱 개발 도구들을 가져와서 사용

=====================

npm을 통해 yarn 설치
//도구를 가져와 설치하는 npm 의 설치 명령어 install과
//컴퓨터 어디서든 설치하고 있는 도구를 사용할 수 있게 해주는 -g 옵션 명령어
npm install -g yarn
//설치가 완료된다음
yarn -v
npm을 통해 expo 설치

npm install -g expo-cli

expo 가입 링크

내 컴퓨터로 expo 로그인

expo login --username "Expo 사이트 가입당시 입력한 name"
...
expo 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공
터미널에서 expo 실행해서 앱 생성
expo init 앱이름

※ 오류 발생 시(윈도우 노트북)

vscode를 다음 순서대로 실행시켜보세요!
• 1) VSCode를 실행하고 Ctrl + Shift + P 조합키를 입력합니다. (아마 모든 설정 검색 창)
• 2) "shell"이라고 입력합니다.
• 3) "Treminal: Select Default Shell"을 클릭합니다.
• 4) "Comand Prompt C:\Windows\System32\cmd.exe"를 클릭합니다.
• 5) VScode를 재실행 하면 제일 아래 "PS"로 시작하던 것이 없어졌을 것이고 이는 CMD로 바뀌었다는 의미가 됩니다.

expo 명령어로 앱 생성 후 실행하는 방법

cd 앱이름으로 생성된 폴더
expo start
(종료할땐 Ctrl + C)

=====================

jsx문법

app.js에서 사용하는 jsx문법

태그로 화면을 그림
1. 모든 태그는 리액트네이티브에서 꺼내온다.
2. 여는 태그와 닫는 태그가 있다.
3. 상위 태그(엘리먼트)는 하위 태그를 감싸준다.
4. jsx는 소괄호()가 항상 감싸져 있어야 한다.
5. 주석 = //, 그러나 jsx 안에서는 {/* */}

=====================

view 태그
영역을 잡아주는 태그. 웹에서의 div같은건가봄
style태그와 함께 써서 view태그를 수식가능

text 태그
텍스트를 입력할때 반드시 넣어줘야함. 웹에선 없던건데...

=====================

음.....웹개발에서 css, ajax, jquery 쓰는거랑 비슷하면서 다르다.
뭔가 재밌을거 같으면서도, 튜터님이 자꾸 재밌다 쉽다 이러니까 내가 속고있는거 같은 느낌도 들고...
아무튼 어질어질하다. sql 배울때랑은 정 반대의 느낌 ㅠㅠ

profile
전윤환
코딩 연습장. 발전하고 싶습니다. 모든 방향에서의 비판 부탁드립니다.
이전 포스트

앱개발 기초

다음 포스트

앱개발 기초 3일차

0개의 댓글