코린이의 앱개발 종합반 1주차 개발일지

1주차 목표

1. 앱 서비스의 기본 동작 구조 공부
2. 앱 개발의 종류와 React Native 란?
3. Javascript 기초 문법 공부
4. 앱개발에서 자주 쓰이는 Javascript 연습

• 필수 프로그램

  : Visual Studio Code
  : Android Studio
  : node, npm

[ 1 ] 앱서비스의 기본 동작 구조

앱 서비스 = > 서버 & 클라이언트

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

  서버에 데이터를 요청한 후, 응답 데이터를 받아 사용자에게 보여준다.

• 서버 : 데이터가 있는 곳

  클라이언트에게서 요청을 받으면 그에 해당하는 데이터를 보내준다.

[ 2 ] 앱 개발의 종류와 React Native 란?

앱 개발의 종류

1) 네이티브 앱 : 안드로이드, iOS 각각의 언어로 각각 개발
2) 하이브리드 앱 : 웹 사이트를 만들고 앱을 웹을 실행시키는 형태로 개발
3) 크로스 플랫폼 앱 : 네이티브 코드로 코딩하는게 아닌, 다른 코드로 코딩한 후에 안드로이드, iOS가 이해할 수 있는 코드로 컴파일 하는 형식

크로스 플랫폼 앱 개발 언어의 종류

1) Flutter : Dart -> C/C++
2) Xamarain : C# -> intermediate(IL)
3) React Native : React -> Java Script

[ 3 ] Javascript 기초 문법 공부

변수

: 값을 담고 있는 상자

let box = ‘값’
       // box 라는 변수에 값을 넣는 다고 선언.
       // 문자열을 쓸 경우 따옴표 안에 넣어 표현한다.
box = ‘변경한 값’
       // let 으로 선언한 변수의 경우, 한번 선언한 후에 a에 담긴 값들을 바꿀 수 있다.
const theBox = ‘value’
       // const 를 이용하여 선언된 변수는 값을 변경할 수 없다.
let a = 8
let b = 2
a + b = 10
a = ‘kim’
b = ‘bob’
a + b = ‘kimbob’
       // 숫자를 값으로 지정한 변수 끼리의 사칙연산이 가능하다.
       // 문자열을 값으로 지정한 변수와는 더하기가 가능하다.

리스트 ( 배열, Array )

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

let aList = [‘순서’, ‘가지고’, ‘있는’, ‘값’, 5]
       // 리스트의 선언.
aList[0]   // ‘순서’가 출력된다.
aList[4]   // 5가 출력된다.
       // 순서는 0번째부터.
aList.push(‘추가’)
       // aList = [‘순서’, ‘가지고’, ‘있는’, ‘값’, 5, ‘추가’]
       // .push() 를 사용하여 요소를 추가할 수 있다.
aList.length   // 6이 출력된다.
       // 리스트가 가지고 있는 요소의 수를 출력해준다.

딕셔너리 ( 객체 )

: key : value 값의 묶음

let aDict = {‘k’:’밸류’, ’key’:’value’}
       // 딕셔너리의 선언.
aDict[‘k’]
       // ‘밸류’가 출력된다. = aDict.k
aDict[‘key’]
       // ‘value’가 출력된다. = aDict.key
       // 주어진 키에 맞는 값이 출력된다.
aDict[‘이건’] = ‘추가’
       // aDict = {‘키’:’밸류’, ‘key’:’value’, ‘이건’:’추가’}
       // 키와 값을 지정함으로써 추가할 수 있다.

리스트와 딕셔너리의 조합

let list =
      [{‘dic’:’딕’, ‘key’:’value’, ‘리스트’:’딕셔너리’},
       {‘dic’:’셔너리’, ’key’:’밸류’, ‘리스트’:’Array’}]
       // 리스트의 요소들을 딕셔너리로 이루면서 함께 사용이 가능하다.
list[0][‘key’]
       // ‘value’를 출력, 리스트의 0번째 딕셔너리의 key의 값.
let new = {‘dic’:’add’, ‘key’:’push’, ‘리스트’:’추가’}
list.push(new)
       //  list =  [{‘dic’:’딕’, ‘key’:’value’, ‘리스트’:’딕셔너리’},
                    {‘dic’:’셔너리’, ’key’:’밸류’, ‘리스트’:’Array’},
                    {‘dic’:’add’, ’key’:’push’, ‘리스트’:’추가’}]
       // 리스트에 요소를 추가하는 방식으로 리스트에 딕셔너리 요소를 추가 할수 있다.

함수

function name( // 필요한 변수 ){
// 함수가 실행될 때 이행될 명령들을 순차적으로.
}
       // 또는,
let func = function( // 필요한 변수 ){
// 함수가 실행될 때 이행될 명령들을 순차적으로.
}
       // 함수의 형태.
name( // 필요한 변수 );
func( // 필요한 변수 );
       // 사용.

자바스크립트 기본 제공 함수

: 사칙연산 이외에 제공하는 기본 함수

let a = 40
let b = 3
a % b = 1
       // 나눗셈의 나머지.
let name = ‘hanakim’
name.toUpperCase()
       // ‘HANAKIM’가 출력된다.
       // 문자열의 모든 알파벳을 대문자로.
let email = ‘[email protected]’
let result = email.split(‘@’)
       // result = [hanakim, naver.com]
       // 특정 문자를 기준으로 문자열을 나누고 싶은 경우.
let result2 = result.join(‘~’)
       // result2 = ‘hanakim~naver.com’
       // 특정 문자를 기준으로 문자열을 합치고 싶은 경우.

조건문

: 특정 조건을 정하고, 그 조건에 해당하고 해당하지 않을 경우에 이행할 명령을 각각 다르게 설정이 가능하다.

function name( // 필요한 변수 ){
    if ( // 조건 ){
        // 조건에 해당할 때 이행될 명령을 순차적으로.
    }else{
        // 조건에 해당하지 않을 때 이행될 명령을 순차적으로.
    }
}
       // 조건문의 형태.
function name2( // 필요한 변수 ){
    if ( // 조건1 ){
        // 조건1에 해당할 때.
    }else if( // 조건2 ){
        // 조건1에 해당하지 않지만 조건2에는 해당될 때.
    }else{
        // 조건1에도, 2에도 해당하지 않을 때.
    }
}
       // 이런 식으로 조건을 여러 개를 설정하는 것도 가능.

> 조건의 형식
    1) 변수 > 기준, 변수 < 기준, 변수 == 기준
>> 순서대로 기준보다 변수가 크고, 작고, 기준과 같다.
    2) 변수1 > 기준1 && 변수2 == 기준2
>> && (그리고) 를 사용하여 두가지 조건을 동시에 만족하도록 설정 가능.
    3) 변수1 < 기준1 || 변수2 > 기준2
>> || (또는) 을 사용하여 두가지 조건 중 하나만 만족해도 조건에 해당되도록 설정 가능. 

반복문

for(시작조건; 반복조건; 더하기){
    //반복해서 실행될 명령
}
        //반복문의 형태.
[example]
    for (let i = 0; i < 100; i++){
        console.log(i);
    }
       // 0 ~ 99까지 출력.
    let number = [{'name':'one','num':1},{'name':'two','num':2},
                {'name':'three','num':3},{'name':'four','num':4},
                {'name':'five','num':5}]
    for (let i = 0 ; i < number.length ; i++){
        if (number[i]['num'] < 3) {
            console.log(number[i]['name'])
        }
    }
       // 응용할때.
       //one, two, three 출력.
    function get_sum(n) {
    let sum = 0
    for (let i = 0; i < n; i++) {
        sum += i;
      // sum을 i만큼 증가시켜라. sum = sum + i 와 동일!
    }
    return sum
    }
    let result = get_sum(10);
      // return 결과인 sum이 result에 저장.
    console.log(result)
      // 45를 출력.
      // 응용 2, 0 ~ n-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);
      // 응용 3, 리스트 내 특정 요소의 갯수를 구할 때.

[ 4 ] 앱개발에서 자주 쓰이는 Javascript 연습

화살표 함수

[ 기존 방식 ]
let a = function(){
         console.log(“function”);
}
a();
[ 화살표 함수 ]
let a = () => {
         console.log(“function”);
}
a();

비구조 할당

[객체]
let blog = {
          owner : “hana”,
          url : “hana.blog.com”,
          getPost(){
                    console.log(“blog”);
          }
}
[ 기존 방식 ]
let owner = blog.owner
let getPost = blog.getPost()
[ 비구조 할당 방식 ]
let { owner, getPost } = blog;
           // blog의 키 값과 이름이 같아야함.

리터럴

[ 기존 방식 ]
const message = “줄바꿈을 할 때는 \n 을 넣어야 된다.”
[ 리터럴 방식 ]
const text = “가능”;
const message2 = `백틱을 사용해서, 이제 줄바꿈은
이런 식으로 사용 ${text}하다.`;

객체 리터럴

var name = “hana”;
var age = “25”
[ 기존 방식]
var user = {
          name : name,
          age : age
}
          // {name:”hana”, age: “25”}
[ 객체 리터럴 방식 ]
var user = {
          name,
          age
}
          // {name:”hana”, age:”25”}
          // 변수명만 작성 한다면 변수명과 동일한 필드가 생성되어 변수값 대입.

map

let num = [1,2,3,4,5]
[ 기존 방식 ]
for(let i=0; i<num.length; i++){
           console.log(num[i]);
}
[ map 방식]
num.map(function(value,i){
           console.log(value,i)
})
[ map + 화살표 함수 ]
num.map((value,i) => {
           console.log(value,i)
})

자바스크립트 파일을 모듈화

[ 외부로 내보내기 ]
export function a(x) {
           return x * x;
}
export function b(num){
           return num + 5
}
[ 내부로 가져오기 ]
import { a, b } from ‘./내보내기파일명.js’;
console.log(a(5));
            // 25
console.log(b(3));
            // 8
[ export default]
// 내보내기
export default function ab(x){
            return x + x;
}
// 가져오기
import y from ‘./내보내기파일명.js’;
console.log(y(6));
             // 12
             // export default 함수는 해당 파일에서 유일 해야 하며, 가져올 때 이름 변경 가능.

[ 마무리 ] 1주차를 마치며.

모르던 함수들이 많이 나와 머리가 복잡복잡 해져서 다 외울수나 있을지, 이해는 한건지 확실하지 않지만, 그래도 앞으로 배워나가며 자주 사용하게 된다면 자연스레 익숙해질 거라고 생각한다.