스파르타 코딩클럽 앱개발 종합반 1주차

1주차 수업은 기본적인 스크립트에 대한 설명과 앱 개발을 위한 개발환경 세팅이어서

큰 어려움 없이 진행할 수 있었다.

 

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

• 클라이언트와 서버 : 클라이언트는 사용자가 보는 화면
• 서버는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 응답해주는 곳이기도 하다.

2. 앱과 리액트 네이티브

• 앱 개발은 "안드로이드" 와 "iOS(아이폰)"
• 안드로이드는 Java & Kotlin 기술로 개발
• iOS는 Swift 기술로 개발
• 안드로이드, iOS 각각 개발 하는 건 네이티브 앱
• 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱
• "크로스 플랫폼 앱" 개발이 존재
• 리액트 네이티브(React Native)
  • 크로스 플랫폼 앱 개발 언어 중 하나
  • 페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술

3. 필수 프로그램 설치

• VSCode, 안드로이드 스튜디오
• 윈도우 : node, npm, git 설치
• 맥 : Xcode, node, npm 설치

4. JavaScript 기초 문법 - 1

• 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어
• let, const 변수 선언
  • 변수 대입(a=2) 의미 : "오른쪽에 있는 것을 왼쪽에 넣는 것"

4. JavaScript 기초 문법 - 2

• 리스트 : 배열(Array) 이라고도 부르며, 순서를 지켜서 가지고 있는 형태
• 딕셔너리 : 키(key) - 밸류(value) 값의 묶음. 객체로도 불린다.
• 기본 제공하는 함수가 있기에 만들지 말고 우선 검색해서 찾아볼 것
• 함수의 기본 생김새

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

5. JavaScript 기초 문법 - 3

• 조건문 : if, else if, else 조합으로 구현
• AND 조건과 OR 조건

// 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 < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}

// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.

• 합을 구하는 함수

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를 출력

• 배열에서 특정 원소 갯수 구하기

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

• 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기

for (let i = 0; i < mise_list.length; i++) {
  let mise = mise_list[i];
  if (mise["IDEX_MVL"] < 40) {
    let gu_name = mise["MSRSTE_NM"];
    let gu_mise = mise["IDEX_MVL"];
    console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
  }
}

6. 앱개발에 자주 쓰이는 Javascript

• 함축적인 자바스크립트 : 최신 버전의 자바스크립트 문법(ES6)을 사용
• 함수를 더 짧게 - 화살표 함수

[기존 방식]

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

[최신 방식]

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

• 자바스크립트 안에서 줄바꿈을 자유롭게 - 리터럴

// 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ` ) 을 이용하여
// 문자열을 + 기호 없이 간단히 처리할 수 있습니다.
// 또한 백틱 ( ` ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

const id = "myId" ;
const url = `http://noahlog.tistory.com/login/${id}` ;

const message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"

const message = ` 줄바꿈도 마음대로
사용이 가능합니다. `

• 딕셔너리를 짧게 만들어보기 - 객체 리터럴

[기존 방식]

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

var user = {
  name: name,
  job: job
}

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

[최신 방식]

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

var user = {
  name,
  job
}

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

• 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