리액트 네이티브(React Native),

자바 스크립트(Javascript) 앱 만들기 _ 기본 개념/문법

들어가면서..

본 포스팅을 통해 자바 스크립트를 사용하기 위한 기초지식을 정리하고자 합니다.

1. 자바 스크립트란?

· 웹(Web) 사이트나 문서에 동적인 효과를 줄 때 사용되는 언어(과거의 개념)
· 앱 개발시 사용할 수 있는 언어(React Native)
· 크롬 브라우저에서 윈도우는 F12, 맥은 Alt + command + i 를 눌러서 콘솔창 사용 가능

· console.log(변수) : 콘솔창에 괄호 안의 값을 출력
· console.log(변수1, 변수2) : 여러 변수를 한번에 출력 가능

2. 자바 스크립트 기초문법

2-1 변수

· 변수의 선언(1) - let

변수는 값을 저장하는 박스
let num = 20     // 변수 선언 하기
num = 30         // 한 번 선언했으면, 다시 선언하지 않고 값을 넣는다.

· 변수는 사칙연산과 문자열 더하기가 가능

1) 사칙연산 가능
let a = 1
let b = 2

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

2) 문자열 더하기 가능
let first = 'Bob'
let last = 'Lee'

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

3) 문자 + 숫자
first+a // Bob1    // 숫자를 문자로 바꾼 뒤 수행

· 변수명 지정

1) snake case
let first_name = 'bob'

2) camel case
let firstName = 'bob'    // camel case

3) 쉽게 알아볼 수 있게 지정하고, 특수문자, 띄워쓰기 불가능

· 변수의 선언(2) - const (let과 동일하게 새용하고, 새로운 값 할당이 불가)

2-2 리스트(배열, Array) & 딕셔너리(객체)

(1) 리스트

· 순서가 있는 꾸러미, 선언시 대괄호 '[ , ]' 를 사용
· 리스트의 각 요소는 0, 1, 2, ... 순서로 인덱싱이 적용된다.
· 리스트의 요소는 숫자, 문자 상관없이 추가가 가능하다.

1) 리스트 선언
let a_list = []
let b_list = [1,2,'hey',3]

b_list[1]
>> 2
b_list[2]
>> 'hey'

2) 리스트에 요소 추가하기
b_list.push('헤이')

b_list
>> [1, 2, "hey", 3, "헤이"]

3) 리스트의 길이 구하기
b_list.length 
>> 5

(2) 딕셔너리(객체)

· 키(Key), 벨류(Value) 값의 묶음
· 딕셔너리는 선언시 중괄호 '{ ; }' 를 사용

1) 딕셔너리 선언
let a_dict = {}
let b_dict = {'name':'Bob','age':21} 

b_dict['name']
>> 'Bob'
b_dict['age']
>> 21

2) 딕셔너리에 키:밸류 넣기
b_dict['height'] = 180 
b_dict
>> {name: "Bob", age: 21, height: 180}

(3) 리스트와 딕셔너리 조합(ex. JSON 데이터 구조)

1) 조회방법(1)
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
names[0]['name']
>> 'bob'
names[1]['name']
>> 'carry'

2) 조회방법(2)
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) 조회방법(3)
let b_dict = {'name':'Bob','age':21}
b_dict['name']
b_dict.name

2-3. 자바스크립트 기본 제공 함수

· 나눗셈의 나머지를 구하고 싶은 경우 → %
· 모든 알파뱃을 대문자로 바꾸고 싶은 경우 → 변수명.toUpperCase()
· 특정 문자로 문자열을 나누고 싶은 경우 → 변수명.split('@') // @는 기준이 될 문자로 지정

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

#Tip - 간단히 사용하는 방법
myemail.split('@')[1].split('.')[0]
>> gmail

· 특정 문자로 합치고 싶은 경우 → 변수명.join('@') // @는 기준이 될 문자로 지

2-4. 함수 사용하기

· 함수의 선언 및 사용

1) 함수의 선언
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}

2) 함수의 사용
함수이름(필요한 변수들);

1) 예시 1
# 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5);
>> 8
sum(4, -1);
>> 3

let result = sum(10,10)
console.log(result)
>> 20

2) 예시 2 (리터럴방식)
let a = function(){
console.log("abcd");
}

a()
>> abcd

2-5. 조건문(if조건문과 Boolean)

· 조건문(if, else), 반복조건문(if, elseif, ..., else) 사용하기

# 90보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
	if(age > 20){
		alert('성인')
	} else {
		alert('청소년')
	}
}

is_adult(25)
>> '성인'

# 반복 조건문 (if, else if, ... , else)
function is_adult(age){
	if(age > 20){
		alert('성인')
	} else if (age > 10) {
		alert('청소년')
	} else {
		alert('10살 이하!')
	}
}

is_adult(12)
>> '청소년'

· Boolean(AND, OR 조건)

1) AND 조건문
function is_adult(age, sex){
	if(age > 20 && sex == '여'){
		alert('성인 여성')
	} else if (age > 20 && sex == '남') {
		alert('성인 남성')
	} else {
		alert('청소년')
	}
}

is_adult(25,'남')
>> '성인 남성'

2) 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,'남')
>> '성인 남성'

2-6. 반복문(for)

· for 반복문의 구조
for (시작조건 ; 반복조건 ; 증가조건) {
실행문
}

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

2) 예시(2)
# 합을 구하는 함수 만들기
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);
console.log(result)
>> 45

3) 예시(3)
# 배열에서 특정 원소 갯수 구하기
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);
>> 2

2-7. 함축적 자바스크립트

· 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용.
· 보다 함축적이고 간결한 문법을 통해 직관적으로 코드를 짤 수 있다.

(1) 화살표 함수

· 기존 함수선언 방식인 function 키워드를 화살표 함수(Arrow Function, =>) 문법으로 선언

1) 기본 함수 선언방식
let a = function() {
	console.log("function");
}

2) 화살표 함수(Arrow Function)
let a = () => {
	console.log("arrow function");
}

(2) 비구조 할당

· 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당과정을 거치지 않으면서 딕셔너리의 키 값 그대로 변수 사용

1) 기존 할당방식과 비구조 할당방식 비교
let blog = {
	owner : "noah",
	url : "noahlogs.tistory.com",
	getPost() {
		console.log("ES6 문법 정리");
	}
};

//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()

//비구조 할당 방식
let { owner, getPost } = blog;   // 키 값과 이름 동일해야 사용 가능

2) 함수에 비구조 할당 방식 활용
let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

(3) 줄바꿈 자유롭게 리터럴 - 백틱( `)

· 백틱(`)을 이용하면 문자열을 +기호 없이 간단히 처리 가능하며, 여러 줄의 줄바꿈도 사용 가능

1) 백틱문(``) 안에 ${변수명} 을 사용하여 문자열 더하기 처리
const id = "myId" ;
const url = `http://noahlog.tistory.com/login/${id}` ;
>> http://noahlog.tistory.com/login/myId

2) \n을 사용하지 않고 백틱문(``)을 활용하여 줄바꿈하기
const message = ` 줄바꿈도
내마음대로 `

(4) 객체 리터럴

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

1) 기존 방식
var name = "세종";
var job = "대왕";

var user = {
	name: name,
	job: job
}
console.log(user);
//{name: "세종", job: "대왕"}

2) 객체 리터럴
var name = "세종";
var job = "대왕";

var user = {       // 딕셔너리임을 선언하기 위해 중괄호 사용
	name,
	job
}

console.log(user);
>> {name: "세종", job: "대왕"}

(5) map 반복문

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

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

2) map 반복문(1)
let numbers = [1,2,3,4,5,6,7];
numbers.map((value,i) => {
	console.log(value,i)
})

3) map 반복문(2)
numbers.map(function(value,i) {
	console.log(value,i)
})

2-8. 예제 풀어보기

(1) 배열에서 특정 원소 개수 구하기 - map 함수 사용

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

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

console.log(count)

(2) filter 함수로 '포도'만 들어있는 podo_list 리스트 구현하기

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

const filt = fruit_list.filter(word=>word == "딸기");

console.log(filt.length);

저작자표시 비영리 변경금지

'DEV > App 개발' 카테고리의 다른 글

React Native 앱 만들기 :: 구글 파이어베이스(Firebase)를 활용한 서버 구성 (0)	2022.08.11
React Native 앱 만들기 :: React Native, Expo 앱 화면 만들기(2) (0)	2022.07.28
React Native 앱 만들기 :: React Native, Expo 앱 화면 만들기 (0)	2022.07.22

오래도록 진실되게

React Native 앱 만들기 :: 자바스크립트 기본 개념 및 문법

리액트 네이티브(React Native),

자바 스크립트(Javascript) 앱 만들기 _ 기본 개념/문법

들어가면서..

1. 자바 스크립트란?

2. 자바 스크립트 기초문법

2-1 변수

2-2 리스트(배열, Array) & 딕셔너리(객체)

(1) 리스트

(2) 딕셔너리(객체)

(3) 리스트와 딕셔너리 조합(ex. JSON 데이터 구조)

2-3. 자바스크립트 기본 제공 함수

2-4. 함수 사용하기

2-5. 조건문(if조건문과 Boolean)

2-6. 반복문(for)

2-7. 함축적 자바스크립트

(1) 화살표 함수

(2) 비구조 할당

(3) 줄바꿈 자유롭게 리터럴 - 백틱( `)

(4) 객체 리터럴

(5) map 반복문

2-8. 예제 풀어보기

'DEV > App 개발' 카테고리의 다른 글

댓글

티스토리툴바

React Native 앱 만들기 :: 자바스크립트 기본 개념 및 문법

리액트 네이티브(React Native),

자바 스크립트(Javascript) 앱 만들기 _ 기본 개념/문법

들어가면서..

1. 자바 스크립트란?

2. 자바 스크립트 기초문법

2-1 변수

2-2 리스트(배열, Array) & 딕셔너리(객체)

(1) 리스트

(2) 딕셔너리(객체)

(3) 리스트와 딕셔너리 조합(ex. JSON 데이터 구조)

2-3. 자바스크립트 기본 제공 함수

2-4. 함수 사용하기

2-5. 조건문(if조건문과 Boolean)

2-6. 반복문(for)

2-7. 함축적 자바스크립트

(1) 화살표 함수

(2) 비구조 할당

(3) 줄바꿈 자유롭게 리터럴 - 백틱( `)

(4) 객체 리터럴

(5) map 반복문

2-8. 예제 풀어보기

'DEV > App 개발' 카테고리의 다른 글

관련글

댓글

티스토리툴바