스파르타 코딩클럽 앱개발 1주차 개발일지

글을 시작하기 전에 웹개발과 앱개발을 모두 듣고 있는 나로써 벌써 한계에 부딧힌 느낌 ㅠㅠㅠ

개인적으로는 웹개발보다 앱개발이 더 어려웠고 ㅠㅠ 

설명도 뭔가 더 어려운 느낌이었다.

 

모르는 부분은 찾아보는 것이 중요하다고 개발자분들도 다 아는건 아니라고 하시고

처음은 당연히 어려울 수 있다고 괜찮다고 하시는데..

뭐.. 사실 그런 위로가 귀에 들리지 않아 ㅠㅠㅠ

나는 어려워.. 나는 멘붕이야..

나는 이게..맞나..싶어요 슨생님...

 

그래도 웹개발과 앱개발을 같이 듣기를 잘했다고 생각하는 부분은

웹개발 1주차와 앱개발 1주차 모두 자바스크립트를 다루고 있기 때문에

어려운 부분은 뭔가 반복해서 다른 강사에게 설명을 듣는 느낌이라

도움이 되었다.

 

하지만 결국은 내가 공부해서 내 지식으로 만들어야하는 분야이기 때문에

한계에 부딧혔다는 건 내가 무엇을 공부해야하는지 좀 더 명확해진다는 것이다.

개발일지는 웹개발보다는 앱개발이 좀더 짧을 예정이다.

웹개발은 HTML과 CSS을 배우고 Javascript를 배워 배우는 분야가 넓어 개발일지가 길어진 느낌인데

앱개발은 자바스크립트를 주로 다루고 있어서

범위가 넓어지진 않았기 때문이다.

 

무튼, 서론을 정리하자면 앱개발에서 멘붕을 먹었고... 개발일지는 웹개발보다 짧다는 것으로하고 개발일지를 시작한다...ㅠㅠㅠㅠ

살려죠ㅠㅠㅠ

 

---

앱개발

네이티브 앱 - 안드로이드(Java&Katlin)와 ios(Swift) 각각 개발

하이브리드 앱 - 웹 사이트를 만들고 껍데기를 씌워 배포(한계가 있다)

크로스 플랫폼 앱 - 한가지 플랫폼으로 앱개발 react.js 라이브러리/프레임워크 기반으로 앱 제작

 

자바스크립트 : 웹사이트 (웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어

팝업, 카운팅, 시간 등

윈도우는 F12, 맥은 option + command + i를 누르면 개발자 콘솔이 나온다.

 

변수 대입(a=2) : 오른쪽에 있는 것(2)을 왼쪽(a)에 넣는 것, 한번 선언했다면 다시 선언하지 않고 값을 넣는다

var과 let으로 변수 선언(주로 let을 사용한다)

한줄 내리기 하고 싶다면 shift + Enter

console.log : 값을 확인하는 도구

 

* let으로 변수를 언언하고 변수를 아래에서 변경하는 경우도 있는데, 변경하지 말아야 하는 중요한 변수는 const로 선언

 

- 리스트 (배열) : Array / 순서를 지켜서 가지고 있는 형태, []대괄호 안에 기입, .push는 값을 추가하는데 사용

- 딕셔너리(객체) : 키(key)-밸류(value)값의 모음, 키를 입력하면 값이 나옴, {}중괄호 안에 기입

- 리스트와 딕셔너리를 다루는 이유는 조합과 복합적인 데이터를 다루기 위해서이다

 

* 새로운 값을 넣을 땐, 리스트인지 딕셔너리 인지 파악후 .push 혹은 대괄호와 부등호를 사용하여 추가

let b_dict = {'name':'Bob','age':27}

b_dict['name']
b_dict.name
//Bob의 이름을 꺼낼 땐, 위의 두가지 방법으로 값을 꺼낼 수 있다.

모든 알파벳을 대문자로 바꾸고 싶은 경우 .toUppercase()

특정 문자를 기준으로 나누고 싶은 경우 .split()

 

함수만들기

// 만들기
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

alert : 팝업, 경고창

조건이 여러개일 경우 : if, else if, else를 사용

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

is_adult(12)

 

AND와 OR

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

조건을 3가지 작성한다(시작조건, 반복조건, 더하기)

반복문은 주로 리스트와 함께 사용

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

// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}

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

화살표함수(Arrow Function) : 함수를 더 짧게 축약

화살표함수는 함수를 식별할 수 있는 식별자가 없으므로 화살표함수로 작성된 코드를 호출하기 위해서는 '함수표현방식'으로 작성해주어야 한다

[기존 방식]

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)

 

코드를 간결하게 작성하는 이유는 코드의 용량이 줄어들면 속도가 개선될 수 있기 때문에 , 코드를 간결하게 쓰는 것은 중요하고, 자주 사용하는 부분이라 축약형 문법에 대해 많이 배워 두는 것이 좋다.

 

백틱(`)

문자열을 쓸 때, "(큰따옴표) 혹은 '(작은 따옴표)를 사용했지만, `(백틱)을 이용하여 문자열을 +기호 없이 간단하게 처리하고 자유롭게 줄바꿈을 할 수 있다

백틱은 백틱으로 마무리 하기 전까지 줄내림과 띄어쓰기 모두 문자열로 인정해준다.

맥의 경우 한/영을 바꿔 영어모드일 때 ₩키를 누르거나 한글모드일때 option + ₩키를 누르면 `백틱이 나온다

혹은 맥 + 한무무 미니 (gk868b)의 조합은 조금 더 어려운데 무조건 영어 모드에서 Shift + Option + esc 키를 누르면 백틱이 나온다

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

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

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

객체 리터럴 : 딕셔너리를 짧고, 간결하게 작성

key: value 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입된다

[기존 방식]

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 - 반복문의 또 다른 방식 (리스트를 순회하며 순서도 알려주고, 순회할 때마다 요소에 있는 값을 출력)

arrow(화살표)함수와 자주 같이 쓰임. 주로 앱개발에 사용

리스트(배열)을 순회하여 값을 꺼내 확인할 땐 주로 for반복문을 사용했다.

앱개발은 구조상 더욱 간결하고, 한줄로 작성되어야 실행이 되는 것들이 있어서 for문보다 더욱 간결하게 해야하기 때문에 map을 주로 사용한다.

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

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

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

 

filter함수 - 리스트와 함께 쓰이고 자주 사용되는 문법

주어진 함수가 참이면 개수를 출력하는 것이 아닌 참인 리스트를 나열하여 출력한다