앱개발 종합반 1주차 정리 (자바스크립트 기초)

앱개발이란?

앱 서비스를 만드는 것 → 클라이언트, 서버를 모두 만들어야함

• 클라이언트 : 사용자가 보는 화면

• 서버 : 데이터가 있는 곳, 데이터 요청 시 응답해주는 곳

 

앱 개발 : 안드로이드, iOS(아이폰)

• 안드로이드 → Java & Kotlin

• iOS → Swift

운영체제가 다르기 때문에 개발 기술 언어가 다르며, 둘 다 러닝 커브 (허들) 존재

 

앱개발 종류

1. 네이티브 앱 : 안드로이드, iOS를 각각 개발

2. 하이브리드 앱 : 웹 사이트를 만들고 간단히 배포하는 앱

3. 크로스 플랫폼 앱 : JS 하나의 언어로 두 개의 플랫폼의 앱을 제작 (강의에서 다룰 것)

 

리액트 네이티브 (React Native)

• 크로스 플랫폼 앱 개발 언어 중 하나

• 페이스북에서 만들었고 지원함

• 리액트(React.js) 라이브럴/프레임워크를 기반으로 앱 제작하는 기술

• 자바스크립트(JS)로 개발 가능

 

---

 

Javascript 기초

js는 웹 개발에서만 사용되는 기술이 아닌가? → 아니다. (리액트 네이티브가 js 기반)

js를 학습하면 웹/앱 개발 가능

 

크롬 F12 콘솔창에서 실습 진행

console.log("hello world")

console.log → 화면에 값을 출력하는 함수

 

• F12 콘솔창 점 세개 버튼 클릭 → Dock side에서 팝업으로 띄울 수 있음

• 상단의 clear console 버튼을 클릭해서 콘솔창 정리 가능 (변수는 그대로 유지)

• Shift+Enter로 여러 줄 입력 가능

 

변수

변수 선언

• let 이용

let num = 20
console.log(num) //20

 

숫자형 및 문자형 변수

let a = 1
let b = 2
let c = a + b
console.log(c) //3

let first = 'yewon'
let last = 'jeong' //큰따옴표 or 작은따옴표로 문자열
console.log(first+" "+last) //yewon jeong

 

변수 이름 규칙

let firstName //카멜 케이스 (camel case)
let first_name // 스네이크 케이스 (snake case)

 

const 변수

• 값을 재할당할 수 없는 변수

let num = 100
const num2 = 1000
num = 200
num2 = 2000
console.log(num)
console.log(num2)

→ 위의 코드 실행 시 오류 발생

 

💡

Uncaught TypeError: Assignment to constant variable. at <anonymous>:4:6

const로 선언한 변수는 값을 바꿀 수 없기 때문

 

리스트

리스트란?

• 여러 데이터들을 담을 수 있는 자료형

• 인덱스는 0부터 시작

let a_list = [1,2,3,4,'yewon',6,'jeong']

//두 번째 값을 꺼낸다 (인덱스 1)
console.log(a_list[1]) //2

 

값 추가하기

• push 함수 이용

a_list.push('sparta')
console.log(a_list) //[1, 2, 3, 4, "yewon", 6, "jeong", "sparta"]

 

길이

• length

a_list.length //8

 

딕셔너리

딕셔너리란?

• 사전 형식

• key : value

let a_dict = {"name":"yewon", "age":23}
console.log(a_dict["name"])
a_dict["height"] = 200 //값 추가
console.log(a_dict) //{name: "yewon", age: 23, height: 200}

 

리스트, 딕셔너리 복합 구조

let names = [{"name":"yewon", "age":23}, {"name":"yewon2","age":23}]
console.log(names)

실행 결과

💡

(2) [{…}, {…}] 0: {name: "yewon", age: 23} 1: {name: "yewon2", age: 23} length: 2 __proto__: Array(0)

 

names.push({"name":"yewon3","age":23}) //3
console.log(names)
names[1]["age"] //23

 

→ JSON 데이터 구조

*크롬 확장 프로그램 JSON view 설치

 

함수

기본 제공 함수

• 나머지 구하기 : %

• 대문자로 바꾸기 : toUpperCase()

• 특정 문자로 문자열을 나누기 : split() (ex. split('.') , split('@') ...)

• 문자열 합치기 : join()

let myname = "jeongyewon"
console.log(myname.toUpperCase()) //JEONGYEWON

let email = "yewon@gmail.com"
console.log(email.split('@')) //["yewon", "gmail.com"] 리스트 형식
console.log(email.split('@')[1]) //gmail.com
console.log(email.split('@')[1].split('.')) //["gmail", "com"]
console.log(email.split('@')[1].split('.')[1]) //com

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

 

함수 만들기

• 함수 이름 지정

• 파라미터 이용

• return을 이용하여 리턴값 반환

function funcName(){
    console.log("함수")
}
funcName() //함수

function sum(num1,num2){
    console.log(num1+num2)
}
sum(10,20) //30

function minus(num1,num2){
    return num1-num2
}
let result = minus(100,10) //변수에 리턴값 저장
console.log(result) //90

 

• 리터럴 함수 선언 방식 : 변수에 함수를 저장

let a = function(){
    console.log("리터럴 함수 방식")
}
a()

 

조건문

if - else if - else

function is_adult(age){
    if(age>20){
        console.log("성인")
    }else if(age>10){
        console.log("청소년")
    }else{
        console.log("어린이")
    }
}
is_adult(30) //성인

 

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<10;i++){
    console.log(i)
}
// 0~9까지 출력

 

• 리스트와 같이 이용

let people=['철수','영희','민수','형준','기남','동희']
for(let i=0;i<people.length;i++){
    console.log(people[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++){
    if(scores[i]['score']<70){
        console.log(scores[i]); //70점 미만의 점수인 경우에만 출력
    }
}

 

---

 

앱개발에 자주 쓰이는 Javascript

화살표 함수

• 함수를 짧게 선언할 수 있음

• function 대신 () ⇒ 이용

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

 

비구조 할당 방식

• key에 따옴표를 붙이지 않아도 됨

• . 을 이용해서 딕셔너리 안의 값 접근 가능

• 딕셔너리 키와 값을 빠르게 꺼낼 수 있음

let blog = {
		owner : "noah",
		url : "noahlogs.tistory.com",
		getPost() {
				console.log("ES6 문법 정리");
		}
};

//기존 할당 방식
let owner = blog['owner']
let owner = blog.owner //동일한 결과
let getPost = blog.getPost()

//비구조 할당 방식
let { owner, getPost } = blog;
console.log(owner)

 

💡

리액트 네이티브에서 가장 많이 사용할 방식!

//비구조 할당 방식
let blogFunction = ({owner,url,getPost}) => {
		console.log(owner)
		console.log(url)
		console.log(getPost())
}
blogFunction(blog)

 

백틱 (`) 사용

• 줄바꿈을 자유롭게

const message = `줄바꿈
자유롭게 가능`
message //"줄바꿈\n자유롭게 가능"

• 문자열 안에 변수 넣기

let name="정예원"
let str=`내 이름은 ${name}`
console.log(str) //내 이름은 정예원

 

딕셔너리 구성을 간단하게

• 변수 이름과 key가 같은 경우

• 기존에는 딕셔너리 내에서 name:name, job:job으로 썼음

let name="정예원"
let job = "개발자"
let dic={
    name,
    job
}
console.log(dic) //{name: "정예원", job: "개발자"}

 

map

• 기존 코드

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

→ 리스트 길이 값을 알아야 for문 사용 가능

 

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

💡

value : 값 i : 인덱스 (순서)

 

JS 파일 모듈화

• export : 자바스크립트 값, 함수, 딕셔너리, JS 파일 자체를 외부로 내보내기

• import : JS 파일로 불러오기

//util.js 파일

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

 

• export default

💡

export default는 하나의 파일 안에서 유일해야함

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

 

Uploaded by Notion2Tistory v1.1.0

---

지금까지 "리액트"라는 것을 들어보긴 했으나 내가 직접 다루고 공부한 적은 없었다.

오늘부터 수강하게 된 앱개발 종합반에서는 리액트 네이티브 앱 개발을 배울 것이다.

 

리액트 네이티브란, 안드로이드와 iOS 두 개의 운영체제에서 모두 실행될 수 있는 크로스 플랫폼 앱 개발 언어 중 하나이며,
이번 주에는 리액트를 본격적으로 다루기 전에
리액트의 기반 언어인 자바스크립트의 기초를 배우는 시간을 가졌다.

자바스크립트의 리스트, 딕셔너리 구조와 이 둘의 복합 구조를 사용하는 방법을 알게 되었고
JSON 데이터 구조가 리스트와 딕셔너리의 복합 구조라는 사실을 알게 되어
JSON이라는 내가 알지 못하던 것에 대한 거부감(?)이 사라진 듯 하다.

튜터님이 차근차근 잘 알려주셔서 그런듯!👍

그리고 앱 개발 시 자주 쓰인다고 하는 화살표 함수, 비구조 할당 방식, map 등을 배워서 좋았다~