[내일배움단] 앱개발 종합반 1주차 개발일지

 

 

직무상 개발을 너무 안했더니 그나마 있던 개발 지식이 다 도망가는 것 같아서 내일배움카드(재직자)를 신청했다.

직업훈련포털(https://www.hrd.go.kr/)에서 카드를 신청하고 수령하여 수업을 검색하다가 스파르타코딩클럽이라는 곳이 괜찮아 보여서 수강하게 되었다. 요새 광고도 많이 하고.. 뭔가 떠오르는 샛별같은 느낌?

 

웹은 회사에서 하고 있는 거라 직접적으로 도움이 될 것 같아서 신청했고, 앱은 개인적으로 kotlin으로 공부하다가 어려워서 다른 언어일지라도 개념은 비슷하겠지 싶어 개발 구조를 좀 맛볼 수 있지 않을까해서 신청했다.

 

요새 계획서 넣는 시즌이 아니어서 진도빼는 건 생각보다 수월했는데, 이게 주차 수업이 끝날때마다 개발일지를 작성해야 한다. 글을 잘 못 써서 걱정이 되지만 수업했던 내용을 복기하는 시간으로 생각하며 작성하고자 한다.

 

 

 

[수업 목표]

1. 앱의 기본적인 동작 구조를 공부한다.
2. 하이브리드 앱과 React Native에 대해 간략히 살펴본다.
3. Javascript 기초 문법을 익힌다.
4. 앱 개발에 자주 쓰이는 Javascript 내용을 연습한다.

 

 

1. 앱의 기본적인 동작 구조

앱 서비스 제작이란, 클라이언트와 서버를 모두 만들어야 한다는 뜻.

클라이언트 : 사용자가 보는 화면
서버 : 클라이언트에서 요청받고 응답해주는 곳

클라이언트(앱)에서 원하는 데이터를 서버에게 요청하면 서버는 응답 데이터를 클라이언트에게 준다. 클라이언트는 응답 데이터를 받아 사용자에게 보여준다.

 

 

2. 하이브리드 앱과 React Native

앱을 만들기 위해서는 안드로이드와 iOS로 만들어야 하는데, 안드로이드는 Java와 Kotlin으로 개발하고 iOS는 Swift로 개발이 가능하다.
안드로이드와 iOS 각각 개발하는 것을 네이티브 앱
웹 사이트를 먼저 만들고 껍데기를 씌워 간단히 배포하는 것은 하이브리드 앱
네이티브 + 하이브리드 = 크로스 플랫폼 앱

리액트 네이티브란?
크로스 플랫폼 앱 개발 언어 중의 하나.
리액트(React.js) 라이브러리/프레임워크를 기반으로, 자바스크립트로 개발이 가능하다.

 

 

3. Javascript 기초 문법 1

회사 입사하기 전에 내일배움카드(구직자)로 자바를 6개월간 공부한 적이 있는데, 그때에도 자바스크립트에서 엄청 헤맸던 기억이 난다. 이번 기회에 제대로 내걸로 먹어버려서 트라우마를 극..복....해보자...

 

자바스크립트로 웹도 만들고 앱도 만들 수 있다. 가볍고 여기저기 쓰기 좋은 아이다.

* 변수
코드를 마칠 때 ; 써도 되고 안써도 된다.
변수를 선언할 때 let/var 둘다 써도 되지만 이 수업에서는 let을 쓰도록 한다.
변수는 사칙연산, 문자열 더하기가 가능하며, 변수명은 Snake Case/Camel Case 둘중에 아무거나 써도 되지만 혼용해서 쓰는 것보다는 통일해서 사용하는 것이 가독성이 좋다. 
변수명에 특수문자나 띄어쓰기는 불가하다.
const는 변하면 안되는 값을 넣을 때 사용하는 키워드다.

* 리스트(배열) & 딕셔너리(객체)
리스트 = 배열
순서를 가지고 있는 형태

딕셔너리 = 객체
키-밸류 값의 묶음
값을 꺼낼 때는 이렇게 사용한다.

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

//bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다.
b_dict['name']
b_dict.name

둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.​

리스트+딕셔너리 = JSON

 

4. Javascript 기초 문법 2

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

예를 들면, 나눗셈의 나머지를 구하고 싶은 경우

let a = 20
let b = 7

a % b = 6​

또, 모든 알파벳을 대문자로 바꾸고 싶은 경우

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 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

 

리터럴 방식 함수 생성

let a = function(){
	console.log("리터럴 방식 이라고 합니다");
}

a()

조건문과 반복문은 익숙하니까 넘어가고 AND와 OR은 좀 헷갈릴 수 있으니까 적어두기.
A && B : A도 맞고 B도 맞으면 true
A OR B : A와 B 중 하나라도 맞으면 true 

반복문은 주로 리스트와 함께 쓰인다.

let people = ['철수','영희','민수','형준','기남','동희']

// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
}​

근데 그 리스트가 딕셔너리가 들어간 리스트라면?

for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}​

 

5. Javascript 기초 연습

0부터 n-1까지의 합을 구하는 함수 만들기

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

 

미세먼지값이 40 미만인 구 이름값 출력하기

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

함축 함축! 화살표 함수

[기존 방식]

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

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

 

자바스크립트 파일의 모듈화, import/export/export default

import : 자바스크립트 파일 안으로 가져올게

export : 나 다른 자바스크립트로 갈게

export default : 파일 안에 유일한 내가 다른 자바스크립트로 이름 바꿔서 갈게

//times, plusTwo 함수를 외부로 내보낼 준비를 합니다.
export function times(x) {
  return x * x;
}
export function plusTwo(number) {
  return number + 2;
}

import { times, plusTwo } from './util.js';
console.log(times(2));
console.log(plusTwo(3));

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

 

7. 1주차 숙제

숙제1. 배열에서 특정 원소 갯수 구하기 - map함수 사용

let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

let count = 0;
fruit_list.map((value) => {
    if (value == '딸기') {
        count += 1;
    }
})

console.log(count);
//2

 

숙제2. 이메일 검사 함수 만들기 - indexOf() 사용

function checkEmail(email){
    let check = email.indexOf('@')
    if (check != -1) {
        console.log("이메일이 맞습니다.")
    } else {
        console.log("이메일이 아닙니다.")
    }
}

checkEmail('gunhee21@gmail.com') 
// 이메일이 맞습니다

이메일 정규표현식 사용

function checkEmail(email){
    let regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
    
    if (email.match(regExp) != null) {
        console.log("이메일이 맞습니다.")
    } else {
        console.log("이메일이 아닙니다.")
    }
}

checkEmail('gunhee21@gmail.com') 
// 이메일이 맞습니다

 

 

 

이렇게 쓰고 나니 많은 것을 배웠구나 싶다. 어쩐지 머리가 아프더라니..

5주동안 열심히 따라가면 그래도 내가 구상했던 아이디어를 현실화할 수 있을 것이라 믿으며 1주차 개발일지는 여기서 마무리한다.