나의 개발일지 1 - 앱개발 종합반 Javascript 기초문법

나의 개발일지 1 - 앱개발 종합반 Javascript 기초문법

 

목차 

1. 앱 기본적인 동작 구조
2. 하이브리드 앱과 React Native 구분
3. Javascript 기초 문법
4. 앱 개발에 자주 쓰이는 Javascript 내용 연습

 

1. 앱 기본적인 동작 구조

1.1 클라이언트

사용자가 보는 화면

예를 들어 크롬 브라우저나 익스플로러, 어플 자체에 해당

1.2 서버

원하는 데이터가 있는 곳이고 원하는 데이터를 요청하면 이에 응답하는 곳

 

2. 하이브리드 앱과 React Native구분

앱 개발에는 안드로이드와 iOS로 나뉘는데

안드로이드는 Java&Kotlin이라는 기술로 개발 가능,

iOS는 Swift라는 기술로 개발이 가능하다.

각기 다른 개발 기술언어가 필요한 이유는 안드로이드와 iOS의 OS 환경이 다르기 때문이다.

2.1 하이브리드앱

안드로이드, iOS 각각 개발하는 건 네이티브앱이라고 하고, 

웹사이트를 만들고 껍데기를 싀워 간단히 배포하는 건 하이브리드 앱이라고 한다.

크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점을 모아 놓은 것이다.

2.2 React Native 리액트 네이티브

크로스 플랫폼 앱 개발 언어 중 하나이다.

페이스북에서 만들고 지원하며 사용자 인터페이스를 만드는데 특화되어 있는 리액트 라이브러리/프레임워크 기반으로 앱을 제작하는 기술이다. 

리액트 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼 '자바스크립트'로 개발 가능하다.

리액트 네이이브를 사용하고 있는 회사는 페이스북, 에어비앤비, 테슬라, QQ, 인스타그램 등 많이 있다.

 

 

3. Javascript 기초 문법

3.1 자바스크립트

웹 사이트에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어였지만,,,

웹도 만들고 앱도 만들 수 있다.

 

3.2 연습 1

크롬 브라우저 실행

윈도 : F12

맥 : alt(option) + command + i

로 개발자 콘솔 열기

 

console.log(변수)는 콘솔 창에 괄호 안의 값을 출력해 준다.

console.log("Hello World!");

1) 코드를 마칠 때, 코드 마지막에;를 써도 되고 안 써도 된다.
let num = 1;
let num = 1
2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가?
둘 다 무엇을 써도 똑같은 기능을 하지만 공부할 땐 let을 쓰자.
3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는 것이냐?
둘 다 똑같다. 강의에서는 딕셔너리라는 이름으로 배운다.
4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 된다.

let 변수 선언

let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣는다.
변수대입(a=2)의 의미 : 오른쪽에 있는 것을 왼쪽에 넣는다.
(2를 a라는 변수에 넣는다.)

const로 변수 선언

: 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 때 const로 선언

let value_box = '값'
value_box = '변경한 값';

console.log(value_box) // 콘솔엔 '변경한 값'이 찍힌다.

const value_fix = '값';
value_fix = '변경한 값';

console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없다.

3.3 연습 2

리스트 : 순서를 지켜서 가지고 있는 형태

let a_list = []
// 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3]
// 로 선언 가능

b_list[1] // 2를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력

딕셔너리 : 키(key)-밸류(value)값의 묶음

딕셔너리는 객체로도 불린다.

let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

리스트와 딕셔너리의 조합

names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

JSON 데이터 구조

: 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조이다.

 

알파벳을 대문자로 바꾸고 싶은 경우

let myname = 'spartacodingclub'
myname.toUpperCase() // SPARTACODINGCLUB

특정 문자로 문자열을 나누고 싶은 경우 1

let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

특정 문자로 문자열을 나누고 싶은 경우 2

let txt = '서울시-마포구-망원동'
let names = txt.split('-'); // ['서울시','마포구','망원동']

특정 문자로 합치고 싶은 경우

let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)

함수

function 함수이름(필요한 변수들){
  내릴 명령들을 순차적으로 작성
}
함수이름(필요한 변수들);

예)
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
      console.log('num1: ', num1, ', num2: ', num2);

//return으로 값을 돌려주는, 뱉는 구조로 변수에 값을 전달할 수도 있다.
return num1 + num2;
}

sum(3, 5); // 8
sum(4, -1); // 3
let result = sum(10,10)
console.log(result) // 20

3.4 연습 3

조건문
function is_adult(age){
   if(age > 20){
       alert('성인이에요')
   } else {
       alert('청소년이에요')
   }
}

is_adult(25)

if, else if, else

function is_adult(age){
   if(age > 20){
        alert('성인이에요')
   } else if (age > 10) {
        alert('청소년이에요')
   } else {
        alert('10살 이하!')
   }
}

is_adult(12)

 

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,'남')

반복문
0~99까지 출력해야 한다면
for (let i = 0; i < 100; i++) {
   console.log(i);
}

4. 앱 개발에 자주 쓰이는 Javascript 내용 연습

4.1 함축적인 자바스크립트

4.1.1 화살표 함수

[기존 방식]
let a = function() {
   console.log("function");
}
a();

[최신 방식]
let a = () => {
    console.log("arrow function");
}
a();

4.1.2 map 반복문

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

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

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