앱개발_1주차

JINI·2022년 3월 13일

목표
1. 앱의 기본적인 동작 구조를 공부한다.
2. 하이브리드 앱과 React Native에 대해 간략히 살펴본다.
3. Javascript 기초 문법을 익힌다.
4. 앱 개발에 자주 쓰이는 Javascript 내용을 연습한다.

Javascript

웹 사이트에서 움직이는 그림을 뜻하는 작고, 가벼운 언어이다.
자바크립트로 웹,앱을 만들 수 있다( React Native가 자바스크립트를 기반)

콘솔창

console.log(변수)는 콘솔 창에 괄호 안의 값을 출력해 준다.
(❗개발자가 결과갑을 보기 편하도록)
ex) console.log("hello") => hello

변수

let은 변수를 선언(생성)하겠다는 명령
변수에 담긴 숫자 값이면 console.log()에서 사칙 연산도 가능하다.

변수에 담긴 문자를 문자열로 바꿀 수 있다.

예시코드

let first = "jini"
let last = "kang"
console.log(first + last)
=> jinikang
console.log(first + " " +last)
=> jini kang

변수의 이름을 정할 때의 규칙

camelcase = firstName
snakecase = first_name

변하지 않는 변수(상수)선언

일반적으로 let으로 변수를 선언
const로 변수 선언시 값 변경이 안됨(상수)
- 값이 변경 되면 안 되는 값을 선언할 때 사용하면 안전하게 사용이 가능 하다.
- 그림예시

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

리스트

변수는 값을 하나만 담고 있는데 리스트는 값을 여러가지(자료형도 다르게 가능) 담을 수 있는 그릇
리스트의 순번은 0부터 시작된다.
- 그림예시

기존 생성된 리스트 값 뒤에 새로운 값을 넣고 싶을때는 .push함수를 사용한다.

사용예시

let a_list = [1,2,3,4,'jini',6,'kang']
console.log(a_list[4])
=> jini
a_list.push('sparta')
a_list 
=>  [1, 2, 3, 4, 'jini', 6, 'kang', 'sparta']
0: 1
1: 2
2: 3
3: 4
4: "jini"
5: 6
6: "kang"
7: "sparta"
length: 8

.length함수를 이용하여 리스트의 길이를 확인 할 수 있다.

✔ 유의할 점 : 리스트의 첫번째 값은 리스트의 [0]부터 센다

딕셔너리

키(key) : 값(value)가 한 묶음으로 관리 할 수 있는 객체
많은 정보를 한번에 담아서 관리할 수 있다.

딕셔너리를 화룡ㅇ하면 고객 별로 정보를 묶을 수 있다.

예시 코드

let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};

순서를 나타내기 위해 리스트를 사용하면 깔끔하게 사용할 수 있다.

예시코드

let customer = [
{'name': '김스파', 'phone': '010-1234-1234'},
{'name': '박르탄', 'phone': '010-4321-4321'}
]

❗ []괄호와 {}괄호 헷갈리지 않기
✔[]괄호안에 {}괄호 포함됨

`.push를 이용하여 정보를 추가할 수 있다.
- 예시코드
```
names.push({"name":"jini3","age":30})
```
딕셔너리에 저장된 순번의 값을 가져오고 싶을때는 순서를 입력후 가져올 수 있다.
- 예시코드
```
ㅜnames[1]["age"]
=> 29
```

JSON 데이터 구조

리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조이다.
- 예시 그림(JSONView 설정 후 모습)
  
  ✔ 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습이다.
- 예시 그림(JSONView설정 전 모습)

자바스크립트 기본 제공 함수와 함수를 만드는 방법

나눗셈에 나머지 값을 구하고 싶은 경우에는 `%연산자`를 사용한다

예시코드

let a = 20
let b = 7
console.log(a%b)
=> 6 (나머지 값)
console.log(a/b)
=> 2.857142857142857(몫)

자바스크립트에서 소문자를 대문자로 변경하기

.toUpperCase()를 사용한다.

예시코드

let myname="kangjini"
console.log(myname.toUpperCase());
=> KANGJINI

`@`를 기준으로 문자열을 나누기(split(),substr()..등)

split()함수에 구분하고 싶은 문자열을 넣음

예시코드

let email = "jini_kang@gmail.com";
console.log(email.split("@"));
=> ["jini_kang","gmail.com"]

어떤 도메인을 사용하는지 알고 싶을때는 순서를 입력해 준다.
- 예시코드
```
let email = "jini_kang@gmail.com";
console.log(email.split("@")[1]);
=> gmail.com
```

.com인지 알고 싶을때는 다시한번 잘라준다

예시코드

let email = "jini_kang@gmail.com";
console.log(email.split("@")[1].split(".")[1]);
=> com

잘랐던 문자열 다시 합치기(join(),concat()함수 사용)

join()함수

예시코드

let text = "서울시-마포구-망원동";
let names = text.split("-");
console.log(names);
=> ["서울시","마포구","망원동"]
console.log(names.join('>'));
=>"서울시>마포구>망원동"

조건문과 반복문

조건문

if와 else if를 사용하여 나이에 따른 호칭 알아보기

예시코드

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연산자는 양쪽이 다 "참(true)" 이여야 한다.
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,'남')

반복문

반복문을 사용하면 노가다 없이 간단하게 출력할 수 있다.
- 예시코드(i가 0일때부터 10보다 작을때까지 증가하며 출력)
```
for(let i=0; i<10; i++){
  console.log(i)
}
❗ for(시작조건; 반복조건; 증감){
		조건문
	}
```
- 실행순서는 시작조건확인, 반복조건 확인, 조건문실행, 증감후 반복조건확인 해당 내용 반복으로 실행됨

1_연습문제(리스트에 들어있는 값을 하나씩 출력하기)

코드

문제
let peple = ["철수","영희","민수","형준","기남","동희"]

	 풀이
     for(let i=0; i <= peple.length; i++){
			console.log(peple[i])
		}

2_연습문제(리스트에 들어있는 딕셔너리의 값을 하나씩 출력하기)

코드

문제
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]);
}

// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있다.


문제
반복문과 조건문을 이용하여 70점보다 작은 점수인 사람의 이름과 점수를 출력하라
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++){
	if(scores[i]['score'] <70){
		console.log(score[i])
	}
   }
=>{name:"형준",score:50}
  {name:"기남",score:68}
  {name:"동희",score:30}

Javascript 기초 연습하기

반복문과 사칙연산을 활용하여 연습해보기

문제 : 0부터 n-1까지 더하는 함수를 만들어보자

코드

function sum(n){
 let sum = 0;
 for(let i=0; i<n; i++){
     sum += i;        
 }
 return sum
}
let result = sum(100)
console.log(result)
=>4950

함수 정의

함수를 선언하기 위해서 funcion()키워드를 사용했지만 화살표 함수(Arrow Function)문법으로도 선언이 가능하다.
기존 방식 코드

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

Arrow Fuction 사용코드

let a = () => { 
	console.log("arrow fuction");
   }
  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)

javascript안에서 줄바꿈을 자유롭게해주는 리터럴!

백틱(ESC키 아래 shift 없이 ~키)을 이용하여 문자열을 + 기호 없이 간단하게 처리할 수 있다.

코드예시

let name = "JINI"
//기존 방식 ↓
let str = "제 이름은" + name + "입니다.";
console.log(str);
=>제 이름은JINI입니다.;
// 백틱을 사용하여 +없이 붙여서 출력하는 방식 ↓
let str2 = `제 이름은 ${name}입니다.`;
console.log(str2);
=> 제 이름은 강미진입니다.

백틱안에서는 여러줄의 줄바꿈도 자유롭게 사용이 가능하다.

코드예시

const id = "myId" ;
const url = `http://noahlog.tistory.com/login/${id}` ;
const message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"
const message = ` 줄바꿈도 마음대로
사용이 가능합니다. `

딕셔너리를 짧게 만들어 보기

기존에는 객체를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 코드를 작성하였다.

코드예시

var name= "Jini";
 var job = "developer";
 
 var user = {
 	name : name,
     job : job
 }
 console.log(user);
 // 출력결과 => {name : "Jini",job : "developer"}

연결연산자 map()함수와 module system

map()함수

map()은 리스트의 길이를 몰라도 리스트 안에 몇번째에 있는 값인지 순서를 알려준다.
- 예시코드

let num_list = [1,2,3,4,5,6,7]
num_list.map(function(value,i){
 console.log(value,i)
})
//결과값 => 
1 0
2 1
3 2
4 3
5 4
6 5
7 6

module system - 자바스크립트 파일의 모듈화

특정한 파일에서 정의한 값, 함수 또는 객체(딕셔너리)를 다른 자바스크립트 파일에서 불러서 사용할때 사용하는 개념이 모듈 시스템이다.
export는 자바스크립의 값, 함수, 객체(딕셔너리) 또는 자바스크립트 파일 자체를 외부로 보내는 키워드이다.
- 예시코드(util.js)
```
		export fuction times(x){
  	return x*x;
  }
  export fuction plusTwo(number){
  	return number + 2;
  }
 
```
import는 반대로 자바스크립트 파일 안으로 가져오는 키워드이다.
- 예시코드(index.js)
```
import {times,plusTwo} from './util.js';
console.log(times(2));
console.log(plusTwo(3));
```
export default 키워드를 앞에 둔 함수가 있다면 함수의 원래 이름은 times지만 가지고 올때는 원하는 이름으로 가져올 수 있다.
- 예시코드
```
// 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로 선언한 함수는 해당파일에서 유일해야하며, 가져올때는 이름을 달리해서 가져와서 사용할 수 있다.

숙제

문제 : 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);

JINI답안코드

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

쌤 답안코드

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

이메일 판별하기 indexOf를 이용하여 풀어보자!

문제 : jini#gmail.com으로 썼다면 이메일인지 아닌지 확인해보자

indexOf는 배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1이다.

JINI정답코드

function checkEmail(email){
 if(email.indexOf('@') < 0 ){
     console.log("이메일이 아닙니다.");
 }else{
     console.log("이메일이 맞습니다");
 }
}
checkEmail("jini#gmail.com");
=> 출력코드 = 이메일이 아닙니다.
checkEmail("jini@gmail.com");
=> 이메일이 맞습니다

이메일 정규표현식을 이용하여 구현해 보자!

이메일검증 정규표현식 = /^0-9a-zA-Z@0-9a-zA-Z.[a-zA-Z]{2,3}$/i;

답안코드

function checkEmail(email){
	var emailExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
	if(!emailExp.test(email)){
		console.log("이메일이 아닙니다");
	}else{
		console.log("이메일이 맞습니다");
	}
}
checkEmail("jini123@gmail.com"); => 이메일이 맞습니다
checkEmail("jini#123@gmail.com"); => 이메일이 아닙니다

JINI

코린이 =)

이전 포스트

웹개발_1주차 / HTML 기초

다음 포스트

앱개발_1주차

Javascript

콘솔창

변수

변수의 이름을 정할 때의 규칙

변하지 않는 변수(상수)선언

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

리스트

딕셔너리

JSON 데이터 구조

자바스크립트 기본 제공 함수와 함수를 만드는 방법

나눗셈에 나머지 값을 구하고 싶은 경우에는 `%연산자`를 사용한다

자바스크립트에서 소문자를 대문자로 변경하기

`@`를 기준으로 문자열을 나누기(split(),substr()..등)

잘랐던 문자열 다시 합치기(join(),concat()함수 사용)

조건문과 반복문

조건문

AND 조건과 OR 조건

반복문

1_연습문제(리스트에 들어있는 값을 하나씩 출력하기)

2_연습문제(리스트에 들어있는 딕셔너리의 값을 하나씩 출력하기)

Javascript 기초 연습하기

반복문과 사칙연산을 활용하여 연습해보기

함수 정의

딕셔너리 키 값을 빠르게 꺼내는 방법

javascript안에서 줄바꿈을 자유롭게해주는 리터럴!

딕셔너리를 짧게 만들어 보기

연결연산자 map()함수와 module system

map()함수

module system - 자바스크립트 파일의 모듈화

숙제

웹개발_1주차 / HTML 기초

웹개발_2주차

0개의 댓글

앱개발_1주차

Javascript

콘솔창

변수

변수의 이름을 정할 때의 규칙

변하지 않는 변수(상수)선언

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

리스트

딕셔너리

JSON 데이터 구조

자바스크립트 기본 제공 함수와 함수를 만드는 방법

나눗셈에 나머지 값을 구하고 싶은 경우에는 %연산자를 사용한다

자바스크립트에서 소문자를 대문자로 변경하기

@를 기준으로 문자열을 나누기(split(),substr()..등)

잘랐던 문자열 다시 합치기(join(),concat()함수 사용)

조건문과 반복문

조건문

AND 조건과 OR 조건

반복문

1_연습문제(리스트에 들어있는 값을 하나씩 출력하기)

2_연습문제(리스트에 들어있는 딕셔너리의 값을 하나씩 출력하기)

Javascript 기초 연습하기

반복문과 사칙연산을 활용하여 연습해보기

함수 정의

딕셔너리 키 값을 빠르게 꺼내는 방법

javascript안에서 줄바꿈을 자유롭게해주는 리터럴!

딕셔너리를 짧게 만들어 보기

연결연산자 map()함수와 module system

map()함수

module system - 자바스크립트 파일의 모듈화

숙제

웹개발_1주차 / HTML 기초

웹개발_2주차

0개의 댓글

나눗셈에 나머지 값을 구하고 싶은 경우에는 `%연산자`를 사용한다

`@`를 기준으로 문자열을 나누기(split(),substr()..등)