앱개발을 시작하며 - 자바스크립트 문법 다지기

이 글은 제가 앱개발을 하며 알게 된 내용, 느낀 점 등을 기록하고자 쓰는 글입니다. '스파르타코딩클럽'의 '앱개발 종합반' 강의를 듣고 배우고 있습니다. 내용에 대한 반박과 피드백은 늘 감사히 받겠습니다.

<목차>
1. 자바스크립트에 대해서
2. 기초문법1 : 변수
3. 기초문법2 : 리스트(배열) & 딕셔너리(객체)
4. 기초문법3 : 함수
5. 기초문법4 : 조건문 & 반복문
6. 앱개발에 자주 쓰이는 자바스크립트

1. 자바스크립트에 대해서

자바스크립트는 보통 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때(혹은 띄울 때) 쓰이는 작고 가벼운 언어였습니다. 사이트 내의 팝업을 띄운다거나, 시간 카운팅이 된다거나하는 모습입니다. 그렇기 때문에 자바스크립트 == 웹 기술! 이라는 고정관념이 있었는데요, 이젠 아닙니다. 자바스크립트로 앱개발도 가능합니다! 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠.

따라서 자바스크립트를 배워놓으면 웹도, 앱도 만들 수 있습니다.

저는 처음에 자바스크립트를 크롬 콘솔창으로 접했습니다. 크롬 콘솔창은 크롬 브라우저에서 F12를 누르면 열 수 있습니다. (맥은 alt(option) + command + i)를 눌러서 개발자 콘솔을 열면 됩니다.)
콘솔창 위에 Console이라고 되어있는 부분을 눌러 코드를 작성해보겠습니다.

console.log("Hello World!");

코딩의 처음은 역시 Hello World! 인 것 같습니다. 자바스크립트에서 console.log()는 화면에 문자열을 출력해주는 함수입니다. C언어의 printf()와 같은 느낌이죠.

2. 기초문법1 : 변수

자바스크립트에서는 변수를 선언하는 2가지 방법이 있습니다.

let a = 20;

var b = 30; 

이렇게 let과 var 두 가지로 선언할 수 있습니다. 저는 이 글에서 앞으로 let을 사용해서 선언하도록 하겠습니다.

let a = 20;
a = 'eeeun' // 한 번 선언했으면, 그 다음부터는 선언하지 않고 그냥 값을 넣어도 됩니다.

다음은 사칙연산 그리고 문자열 더하기입니다.
자바스크립트도 다른 언어와 같이 기본적인 기능들이 다 가능합니다.

let a = 1
let b = 2

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

let first = 'eunseo'
let last = 'Lee'

first+last // 'eunseoLee'

first+' '+last // 'eunseo Lee'

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

변수 선언에는 let 과 var 두 가지가 있다고 했는데요, 사실 const라는 아이가 하나 더 있습니다. const는 코드 상에서 쉽게 변하면 안되는 고정 값을 관리할 때 선언합니다.

let value_box = '값'
value_box = '변경한 값';

console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다.

const value_fix = '값';
value_fix = '변경한 값';

console.log(value_fix) // 오류 발생 : const로 선언한 변수엔 새로운 값을 재 할당(다시 입력)할 수 없습니다.

기초문법2 : 리스트(배열) & 딕셔너리(객체)

리스트를 배열이라고도 부릅니다. 딕셔너리 또한 객체라고 부를 수 있습니다.

리스트 : 순서를 지켜서 가지고 있는 형태
딕셔너리 : 키(key) - 밸류(value) 값의 묶음

먼저 리스트를 선언하는 방식에 대해 알아보겠습니다.

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

자바스크립트에서 리스트를 선언하는 방식은 다른 언어에서 리스트를 선언하는 방식과 비슷합니다. 어렵지 않네요!

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력

리스트에 저장한 값을 출력할 때는 인덱스값을 주어 출력합니다.

b_list.push()를 통해 값을 추가해주었습니다. 이 때 추가한 값은 맨 마지막에 붙습니다. 마치 스택과 같은 형태입니다. 스택을 생각해보면 b_list.pop() 을 했을 때는 맨 마지막에 있는 값이 빠진다고 예상할 수 있습니다.

다음은 딕셔너리의 코드 예시를 보겠습니다.
먼저 선언입니다.

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능

딕셔너리는 리스트와 비슷한 듯 다르게 생겼습니다. 일단 리스트는 [], 딕셔너리는 {}의 형태입니다.

딕셔너리의 선언을 자세히 보면, 키값과 밸류값이 연결되어있음을 알 수 있습니다. 위 코드에서는 키 값이 'name'과 'age'이고, 그 키 값에 따른 밸류 값이 각각 'Bob', 21인 것을 알 수 있습니다.

b_dict['name'] 	// 'Bob'을 출력
b_dict.name	// 'Bob'을 출력

b_dict['age'] 	// 21을 출력
b_dict.age	// 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

딕셔너리를 출력할 때 또한 리스트와 비슷한 듯 다릅니다. []안에 키 값을 넣어주면 밸류 값이 출력되는 방식이네요.

리스트와 딕셔너리를 같이 배운 이유가 있습니다. 이 둘은 자주 같이 쓰이는데요. 같이 쓰이면 마치 전화번호부, 출석부같은 형태를 만들 수 있습니다.

names = [
  {'name':'bob','age':20},
  {'name':'carry','age':38}
]

names[0]['name']	// 'bob'
names[1]['name']	// 'carry'

이와 같이 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조를 JSON 데이터 구조라고 합니다. JSON 데이터 구조를 사용하면 방대한 데이터를 편리하게 관리할 수 있습니다.

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'

이와 같이 새 딕셔너리를 선언하고(new_name), .push 명령을 통해 리스트에 딕셔너리를 추가할 수도 있습니다.

기초문법3 : 함수

위에서 봤던 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.
웬만한 함수는 다 존재하니, '왠지 이건 있을 것 같은데?' 싶은 함수는 먼저 구글링을 해봅시다. 저는 주로 MDN에서 함수에 대한 설명을 봅니다.
MDN 웹 문서 바로가기 : 웹 표준과 모질라 프로젝트에 대한 개발 문서들이 담긴 모질라의 공식 사이트입니다.

**나눗셈의 나머지를 구하고 싶은 경우**

let a = 20
let b = 7

a % b = 6

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

let myname = 'spartacodingclub'

myname.toUpperCase() // SPARTACODINGCLUB

**특정 문자로 문자열을 나누고 싶은 경우 1**

let myemail = '[email protected]'

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 함수이름(필요한 변수들) {
	내릴 명령들
}

함수이름(필요한 변수들);

기본 생김새입니다. 이렇게 봐서는 감이 잘 오지 않네요. 코드로 직접 써보겠습니다.

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	let res = num1 + num2;
  	console.log(res);

	return res;
}

sum(3, 5);	// 8
sum(4, -1);	// 3

이와 같습니다. function 함수명(){} 이 구조는 다른 언어에서도 자주 써서 익숙하네요.

자바스크립트에는 또다른 함수 선언 방식이 있습니다.

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

a()	//리터럴 방식이라고 합니다

변수 a를 선언하고, a에 함수를 넣는 방식입니다. 이 방식을 "리터럴 방식"이라고 부릅니다.

기초문법4 : 조건문 & 반복문

조건문과 반복문 또한 다른 언어의 구조와 비슷해서 어렵지 않습니다.

조건문과 반복문은 예시 코드를 짜며 확인만 하고 넘어갔습니다. C언어와 JAVA를 배울 때 지겹도록 짠 보람이 있었네요...ㅎㅎ

//성인, 청소년, 어린이를 구분하는 조건문
function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('어린이예요')
	}
}

is_adult(12)	// 청소년이에요

//1부터 99까지 숫자를 순서대로 출력하는 반복문
for (let i = 0; i < 100; i++) {
	console.log(i);
}

//리스트의 모든 원소를 한 번에 출력하는 반복문
let people = ['철수','영희','민수','형준','기남','동희']

for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
}

//점수가 70점 미만인 학생들의 이름만 출력하기
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++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}

앱개발에 자주 쓰이는 자바스크립트

1. 함수를 더 짧게 표현하자 : 화살표 함수

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

//기존 방식
let a = function() {
  console.log("function");
}
a();

//화살표 방식
let a = () => {
  console.log("arrow function");
}
a();.

function 대신 =>가 들어갔습니다. 이제 => 를 보면 함수라고 생각하면 됩니다.

2. 딕셔너리 키와 값을 빠르게 꺼내자 : 비구조 할당

딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당과정을 거치지 않으면서 딕셔너리 키 값 그대로 변수 사용이 가능합니다. 말로 쓰니 어려운데, 코드로 보면 쉽습니다.

//딕셔너리
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의 키 값과 이름이 꼭 같아야 합니다. owner2로 쓰면 x

이를 이용해서 앞으로 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식을 소개하겠습니다. 바로 함수 매개변수를 비구조 할당 방식으로 전달하는 방식입니다.

//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

3. 자바스크립트 안에서 자유롭게 줄바꿈하자 : 리터럴

키보드에서 느낌표 옆에 있는 키인 백틱을 이용해서 자유롭게 줄바꿈을 할 수 있습니다.

const message = "기존에는 줄바꿈을 하려면 \n 이 기호를 써야 했습니다"

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

4. 딕셔너리를 짧게 만들어보자 : 객체 리터럴

//기존 방식
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"}

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

5. 반복문의 또 다른 방식 : map

리스트(배열)을 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

이를 위해 리스트의 길이 값을 알아야 했습니다.
map은 리스트의 길이값을 몰라도 되며, for와는 반대로 리스트안에서 몇 번째에 있는 값인지 순서를 알려줍니다.

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

map이라는 도구(?) 안에 함수를 선언하는 방식인 것 같습니다. for문에 너무 길들여져서 그런가 개인적으로 map 방식은 조금 헷갈리네요ㅜㅜ

여기까지 1주차 때 공부한 내용을 정리해보았습니다. 내용에 대한 반박과 피드백은 늘 감사히 받겠습니다.

👉 참고한 내용

스파르타코딩클럽 '앱개발 종합반' 1주차 강의 & 강의자료