본문 바로가기
기타/React Native 공부

[앱개발 종합반] 1주차 개발일지

Hannah_06 2021. 8. 21.

개발일지 시작

티스토리나 블로그에 공부 과정을 포스팅 하는 건 사실 한참 전에 생각했지만 실행에 옮기는 건 이제야 겨우 한 걸음을 뗀 것 같다. 앱개발은 전부터 배우고 싶었는데 이곳 저곳 바교해 본 결과, 스파르타 코딩클럽의 앱개발 종합반 강의를 신청하게 되었다. 앞으로 몇 주 동안 앱개발 종합반 강의를 수강하면서 배운 내용을 이 곳에 간단하게 정리해 볼 생각이다.

 

1주차 학습 내용은 자바 스크립트(JavaScript)의 기초적인 내용을 다뤘다. 자바 스크립트 실습 중 가장 좋았던 점은 크롬 콘솔 창에서 바로 실습할 수 있다는 거였다. 파이썬이나 C++로 코드 작성할 땐 Visual Studio Code로 작성했었는데 훨씬 간단해서 편하긴 했다. 

 

#1주차 주요 학습내용

 

(1) 변수

let 으로 변수 선언하고 간단한 연산 해보기

let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

 

(2) 리스트와 딕셔너리 형태

 

리스트는 순서를 지켜서 가지고 있는 형태이다. [] 로 표현 하고, 요소를 추가하거나 길이를 구하는 게 가능하다. 딕셔너리는 키(key)-밸류(value) 값의 묶음이고 객체라고 불린다. 리스트와 딕셔너리의 조합도 자주 쓰인다.

 

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'

 

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

 

여러가지 기본 제공 함수들이 있는데 아번 주에 배운 것은 아래의 내용이다. 

기본 제공 함수 종류 사용 예시
toUpperCase() 모든 알파벳을 대문자로 바꾸고 싶은 경우
split('') 문자열을 나누고 싶은 경우 (e.g. 이메일)
join('') 특정 문자로 합치고 싶은 경우
a % b 나눗셈 나머지 구하고 싶은 경우

(4) 함수

 

자바스크립트 함수의 기본 생김새는 이렇다.

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

#리터럴 방식

함수를 선언하는 또 다른 방식이다.

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

a()

 

(5) 조건문

if,else를 쓰고 AND조건과 , OR 조건도 가능하다. (아마 조건문과 반복문을 자주 쓰게 되지 않을까.)

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

is_adult(25)

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

 

(6) 반복문

반복문 형태는 다음과 같다.

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
}

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

//예시 1

for (let i = 0; i < 100; i++) {
	console.log(i);
}

//예시 2 - 리스트와 함께 사용

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

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

 

(7) 배열에서 특정 원소 갯수 구하기

예시는 리스트에 있는 원소 중 딸기의 갯수를 구하는 방법이다.

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

 

(8) 화살표 함수 (Arrow Function)

기존에는 함수를 선언하기 위해서 function 키워드를 사용했지만 이제는 화살표 함수 (Arrow Function) 문법으로도 선언이 가능하다.

[기존 방식]

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

[최신 방식]

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

 

(9) 비구조 할당

딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치지 않고 딕셔너리의 키 값 그대로 변수사용이 가능하다.

//객체 
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)

 

(10) 줄바꿈 리터럴 방식 (Template Literals - newline characters(\n))

최신 방식은 키보드에서 느낌표 옆에 있는 키인 백틱 ( ` ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있다. 또한 백틱(grave accent) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능하다. 키보드에서 ~ 모양을 누르면 백틱(`)이 나온다. 중간에 따옴표를 전부 넣을 필요 없이 훨씬 간편하게 사용이 가능하다.

//기존 방식

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

//literals 방식

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

 

(11) 딕셔너리(객체) 리터럴 방식 (Template Literals)

기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 아래처럼 코드를 작성. 최신 버전은 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"}

 

(12) map

반복문의 또 다른 방식으로, map은 리스트의 길이값을 몰라도 되며, for와는 반대로 리스트안에서 몇 번째에 있는 값인지 순서를 알려준다.

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

 

(13) 파일 모듈화 module system

export는 자바스크립트의 값, 함수, 딕셔너리(객체) 또는 자바스크립트 파일 자체를 외부로 내보내는 키워드 이고 import는 반대로 자바스크립트 파일 안으로 가져오는 키워드이다. 외부로 내보낸다는 건 밖에서 쓸 수 있게 준비한다는 의미이고, 내부로 가져온다는 것은 외부로 내보낸 것들을 가져온다는 의미! (예시에서는 util.js 파일이 있다고 가정함)

[export 예시]


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


[import 예시]


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

#export default 

export default로 선언한 함수는 해당 파일에서 유일해야 하며, 가져올 땐 이름을 달리해서 가져와서 사용 할 수 있다. 

// 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

 

숙제 제출한 것

 

숙제 1

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

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

 

숙제 2

더보기

// indexOf로 구현

var email = prompt("이메일 주소를 입력해주세요");

function checkEmail(email){
    if(email.indexOf('@') > 0){
        alert("이메일이 맞습니다.")
        return;

    }else{
         alert("이메일이 아닙니다.")
        return;
    }
}

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

 

더보기

//정규식으로 구현

unction checkEmail(email){
    
    var reg_email = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
    if(reg_email.test(email)){
        alert("이메일이 맞습니다")
        return;

    }
    else{
        alert("이메일이 아닙니다")
        return;

    }

}

checkEmail('gunhee21@gmail.com');
checkEmail('gunhee21#gmail.com');

 

다행히 아직 1주차라 막 엄청나게 어렵거나 그러진 않은 것 같다. 다른 프로그래밍 언어 배웠던 사람이라면 더 이해 금방 할 듯. 나도 파이썬이랑 C/C++ 좀 배웠던 게 전체적인 구조나 흐름 이해하는 데 도움이 되는 것 같다. 다음주에는 본격적으로 앱개발 실습 들어가는 것 같아서 걱정 반 기대 반이다. 2주차도 열심히 달려야지~!!

 

 

 

 

'기타 > React Native 공부' 카테고리의 다른 글

[앱개발 종합반] 4주차 개발일지  (0) 2022.01.15
[앱개발 종합반] 3주차 개발일지  (0) 2021.09.17
[앱개발 종합반] 2주차 개발일지  (0) 2021.09.07

'기타/React Native 공부' 관련글

티스토리툴바