Javascript 기초 문법

Jiyeahhh·2021년 7월 25일

JavaScript

[React-Native] 앱개발 종합반

목록 보기

1/5

📒 앱 개발 종류

📌 네이티브 앱

안드로이드, iOS 각각 개발

iOS, 안드로이드OS 등 각 OS에 맞는 언어로 앱을 개발하는 것을 말한다. 스마트폰에 설치하는 앱은 고객이 자신이 원하는 것만 골라 설치한다는 점에서 일종의 ‘러브마크’라고 할 수 있다.

[네이버 지식백과] Native App 네이티브 앱 (지형 공간정보체계 용어사전, 이강원, 손호웅)

📌 하이브리드 앱

웹 사이트를 만들고 껍데기를 씌워 간단히 배포

기본 기능은 HTML 등의 웹 문서로 구현하고, 패키징은 아이폰, 안드로이드 등 모바일 운영 체제(OS)별로 구현하는 앱.
먼저 HTML, 종속 스타일 시트(CSS: Cascading Style Sheets), 자바스크립트(JavaScript) 등 웹 표준 기술을 사용하여 웹 페이지를 구현하고, 안드로이드(Android)나 아이폰(iOS) 개발 환경에서 웹 브라우저로 해당 웹 페이지들을 로딩하여 OS 환경에 맞게 빌드(build)하여 만든다.

[네이버 지식백과] 하이브리드 앱 [Hybrid mobile application] (IT용어사전, 한국정보통신기술협회)

📌 크로스 플랫폼 앱

네이티브 앱과 하이브리드 앱 개발의 장점을 모아놓음

소프트웨어나 하드웨어 등이 다른 환경의 OS에서 공통으로 사용되는 것.
예를 들면 1개 기종의 하드웨어가 워크스테이션 또는 PC에서 사용되거나, 유닉스 시스템이나 윈도즈, 맥 OS 등의 복수 환경에서 사용되는 것을 말한다.

[네이버 지식백과] 크로스 플랫폼 [cross platform] (IT용어사전, 한국정보통신기술협회)

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

크로스 플랫폼 앱 개발 언어 중 하나
페이스북에서 만들고 지원
사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술
- 자바스크립트로 개발 가능 (js = javascript 줄임말)

📒 자바 스크립트(Javascript)

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

웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어.
사용자 경험을 향상시키기 위한 방법으로 주로 사용된다. 일반적으로 HTML 문서에 내재되며, 브라우저에서 실행된다.

[네이버 지식백과] 자바스크립트 [JavaScript] (IT용어사전, 한국정보통신기술협회)

💻 크롬 개발자도구 콘솔을 사용하여 공부! ~~(엔터 치기 불편..)~~

💡 참고

코드를 마칠 때, 코드 마지막에 세미콜론(;)을 써도 되고 안 써도 됨!

let num = 1;
let num = 1

변수를 선언할 때, let을 써야 할까 var을 써야 할까?
- 둘 다 무엇을 써도 똑같은 기능!
- but let은 재선언 불가능, var은 재선언 가능

딕셔너리? 객체? => 둘다 똑같음!

배열? 리스트? => 둘다 똑같음!

📌 console.log();

console.log(변수) : 콘솔 창에 괄호 안의 값을 출력

console.log("Hello World!");

📌 변수

let으로 변수 선언

let num = 20
num = 'Bob'

// 변수는 값을 저장하는 박스
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣을 수 있음

사칙연산, 문자열 더하기 가능

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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

변수명은 아무렇게나?

snake case
: 단어 사이의 공백을 밑줄로 대체
camel case
: 단어의 중간에 띄어쓰기나 표기 없이 대문자를 사용

let first_name = 'bob' // snake case

let firstName = 'bob' // camel case

const로 변수 선언
: 코드상에서 쉽게 변하면 안 되는 고정 값을 관리할 때 사용

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

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

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

console.log(value_fix) // 에러 발생, const로 선언한 변수에는 새로운 값을 재할당할 수 없음

📌 리스트

배열(array)라고도 함
순서를 지켜서 가지고 있는 형태
[] 안에 변수 넣을 수 있음
.push : 리스트에 요소 넣기
.length : 리스트의 길이 구하기

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를 출력

📌 딕셔너리

객체라고도 함
키(key)-밸류(value) 값의 묶음
{} 안에 변수

let a_dict = {}  // 딕셔너리 선언

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
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'

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'

JSON 데이터 구조 : 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조

웹과 컴퓨터 프로그램에서 용량이 적은 데이터를 교환하기 위해 데이터 객체를 속성 · 값의 쌍 형태로 표현하는 형식.

[네이버 지식백과] 제이슨 [JavaScript Object Notation] (IT용어사전, 한국정보통신기술협회)

💻 크롬에서는 JSONView 확장 프로그램으로 가독성 높일 수 있음

💡 딕셔너리의 다른 표현

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

// bob 이름을 꺼낼 땐 두 가지 방식으로 값을 꺼낼 수 있음
b_dict['name']
b_dict.name

// 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내 옴

💡 왜 필요할까?

순서를 표시할 수 있고, 정보를 묶을 수 있음
변수만 사용했을 때

let customer_1_name = '김스파';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박르탄';
let customer_2_phone = '010-4321-4321';

👉 알아보기 힘듦

딕셔너리를 활용했을 때

let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};

👉 고객 별로 정보 묶기 가능

추가로 리스트도 활용했을 때

let customer = [
    {'name': '김스파', 'phone': '010-1234-1234'},
    {'name': '박르탄', 'phone': '010-4321-4321'}
]

👉 순서 나타내기 가능, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 추가 가능

📌 기본 제공 함수

나눗셈의 나머지를 구하고 싶을 때 : %

let a = 20
let b = 7

a % b	// 6

알파벳을 대문자로 바꾸고 싶은 경우 : .toUpperCase()

let myname = 'ramji'

myname.toUpperCase()	// RAMJI

💡 소문자는 .toLowerCase() 함수 사용

특정 문자로 문자열을 나누고 싶을 경우 : .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

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!



let txt = '서울시-마포구-망원동'

let names = txt.split('-'); // ['서울시','마포구','망원동']

특정 문자로 합치고 싶은 경우 : .join()

let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)

📌 함수

기본 틀

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

📌 조건문

if, else if, else

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

is_adult(12)

AND 조건, OR 조건

// AND 조건
function is_adult(age, sex){
	if(age > 20 && sex == '여'){	// 나이가 20초과이면서, 여자
		alert('성인 여성')
	} else if (age > 20 && sex == '남') {	// 나이가 20초과이면서, 남자
		alert('성인 남성')
	} else {	// 나머지
		alert('청소년이에요')
	}
}

// OR 조건
function is_adult(age, sex){
	if (age > 65 || age < 10) {	// 나이가 65보다 크거나, 10보다 작은 경우
		alert('탑승하실 수 없습니다')
	} else if(age > 20 && sex == '여'){
		alert('성인 여성')
	} else if (age > 20 && sex == '남') {
		alert('성인 남성')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25,'남')

📌 반복문

for

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

0부터 99 출력

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

리스트와 반복문

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

// i가 1씩 증가하면서, people의 원소를 차례대로 불러옴
for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
}

리스트 & 딕셔너리

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

// 점수가 70점 미만인 사람들의 이름만 출력
for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}

💡 앱개발에 자주 쓰이는 Javascript

📌 화살표 함수(Arrow Function)

기존 방식

let a = funciton() {
  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)**

📌 리터럴(literal)

줄바꿈을 자유롭게 : 백틱() 사용

const id = "myId" ;
const url = `http://noahlog.tistory.com/login/${id}` ;
// 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"}

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

📌 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

📌 module system

자바스크립트 파일을 모듈화
특정한 파일에서 정의한 값, 함수 또는 딕셔너리를 다른 자바스크립트 파일에서 불러야 할 때 사용
export : 자바스크립트의 값, 함수, 딕셔너리(객체) 또는 자바스크립트 파일 자체를 외부로 내보내는 키워드
-> 밖에서 쓸 수 있게 준비한다는 의미
import : 반대로 자바스크립트 파일 안으로 가져오는 키워드
-> 외부로 내보낸 것들을 가져 온다는 의미

🔎 예시

util.js 파일

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

외부의 index.js 파일에서 util.js에서 내보낸 함수 사용

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

export default로 선언한 함수

// in util.js
export default function times(x) {
  return x * x;
}

// in app.js
// 작성된 함수 이름은 times지만 가지고 올 때는 k로 가져옴
import k from './util.js';
console.log(k(4)); // returns 16

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

📝 과제

1. 배열에서 특정 원소 갯수 구하기

❓ 문제

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

map 함수 사용하기
'딸기'는 몇 개인지 구하기

💡 제출

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

fruit_list.map((fruit) => {
    if(fruit == '딸기')    count++;
})

console.log(count);	// 2

❗ 정답

let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']
let count = 0;
fruit_list.map((f)=>{
    if(f == "딸기") count += 1
})

console.log(count)

2. 이메일 판별하기

❓ 문제

function checkEmail(email){
	...
}

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

indexOf 사용해보기
정규 표현식 사용해보기

💡 제출

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

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


// 자바스크립트 이메일 정규표현식 사용
function checkEmail(email) {
    var 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("ramji22@gmail.com")	// 이메일이 맞습니다.
checkEmail("ramji22$gmail.com") // 이메일이 아닙니다.

❗ 정답

indexOf 사용

function checkEmail(email){
    if(email.indexOf('@') < 0){
        console.log("이메일이 아닙니다");
    }else{
        console.log("이메일이 맞습니다");
    }
}

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

정규식 사용

@가 이메일에 있는지 없는지를 판별하면서, 동시에 @ 기준으로 앞뒤에 특수문자가 들어가면 이메일이 아님을 알려줌

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

}

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

도메인에 .com이 없는 경우 판별

function email_check( email ) {    
    var regex=/([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return (email != '' && email != 'undefined' && regex.test(email)); 
}

console.log(email_check('gunhee21@gmail'))

📌이 포스팅의 모든 자료의 출처와 저작권은 SpartaCodingClub 강의에 있습니다.📌

Jiyeahhh

람차람차

다음 포스트

Javascript 기초 문법

[React-Native] 앱개발 종합반

📒 앱 개발 종류

📌 네이티브 앱

📌 하이브리드 앱

📌 크로스 플랫폼 앱

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

📒 자바 스크립트(Javascript)

💡 참고

📌 console.log();

📌 변수

📌 리스트

📌 딕셔너리

💡 리스트와 딕셔너리의 조합

💡 딕셔너리의 다른 표현

💡 왜 필요할까?

📌 기본 제공 함수

📌 함수

📌 조건문

📌 반복문

💡 앱개발에 자주 쓰이는 Javascript

📌 화살표 함수(Arrow Function)

📌 비구조 할당

📌 리터럴(literal)

📌 map

📌 module system

📝 과제

1. 배열에서 특정 원소 갯수 구하기

❓ 문제

💡 제출

❗ 정답

2. 이메일 판별하기

❓ 문제

💡 제출

❗ 정답

리액트 네이티브, Expo 실행

0개의 댓글