앱개발 종합반 - 1주차

Seoyeon Kim·2021년 6월 12일

react native 스파르타 코딩클럽

Sparta-Coding-Club

목록 보기

1/8

한이음 ICT멘토링에 참여해 ICT멘토링 블렌디드 러닝을 스파르타 코딩클럽에서 강의를 들을 수 있었다. 프로젝트에서 앱을 만들 예정이기에 앱개발 종합반을 선택했다. 이번 강의도 열심히 듣자!~!

JavaScript

: ReactJS와 React Native, Node.js를 통해 자바스크립트로 웹뿐만이 아니라 앱도 만들 수 있다.

1. JavaScript 변수

값을 담는 그릇에 여러 값을 다시 교체할 수 있다. 재할당 가능하다.

  let num = 20
  console.log(num)
  num = 100
  console.log(num)

const변수는 재할당 불가하다. 중간에 값이 변경되면 안되는 변수에 사용한다.

  const num2 = 1000
  num2 = 2000
  console.log(num2)

2. JavaScript 리스트(배열)과 딕셔너리(객체)

리스트 : 여러가지 데이터를 차곡차곡 쌓아놓는 것

  Array
  let list = [1, 2, 3, 4, 'seoyeon', '6', 'kim']

딕셔너리 : 이름과 나이를 키와 밸류의 형태로 관리하는 것

  Dictionary
  let dict = {"name":"gunhee", "age": 30}

3. JavaScript 기본 제공 함수

toUpperCase() : 문자열을 대문자로 변환해 반환한다.
split() : 문자열 객체를 지정한 구분자를 이용해 여러 개의 문자열로 나뉜다.
join() : 배열의 모든 요소를 연결해 하나의 문자열로 만든다.
concat() : 배열이나 값들의 기존 배열을 합쳐 새 배열을 반환한다.

4. JavaScript 조건문

if ~ else if문을 통해 이상, 이하, 미만, 초과를 이용해 조건문을 사용한다.
AND연산자(&&)는 양쪽이 모두 동일해야 '참', OR연산자(||)는 둘 중에 하나만 참이면 "참"이다.

5. JavaScript 반복문

for 문법 키워드를 사용한다.

6. JavaScript 기초 연습

6-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) //0~9까지의 합
console.log(result)

6-2. 배열에서 특정 원소 갯수 구하기

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

let count = 0; //count 초기화
for(let i=0;i<fruit_list.length; i++){
    let fruit = fruit_list[i]
    if(fruit == "딸기"){ //과일 이름이 "딸기"인 것을 찾아
        count += 1 //count+1
    }
}

6-3. 미세먼지(IDEX_MVL)의 값이 40미만인 구 이름(MSRSTE_NM)과 값 출력하기

리스트와 딕셔너리의 복합구조이므로 반복문, 조건문 돌릴 수 있다.

'서울시 미세먼지 값 .json파일'
for(let i=0; i<mise_list.length; i++){ //list 길이만큼
    let mise = mise_list[i]
    if(mise["IDEX_MVL"]<40){ //40미만
        let gu_name = mise["MSRSTE_NM"]
        let gu_mise = mise["IDEX_MVL"]
        console.log(gu_name+" : "+gu_mise)
    }
}

7. 화살표 함수

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

let test = () => {
	console.log("Arrow Function");
}

8. 비구조 할당

딕셔너리에 있는 값을 변수에 담을 때, 딕셔너리의 키 값 그대로 변수 사용이 가능하다.
객체의 키 값과 이름이 같아야 한다.

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

//비구조 할당 방식
let { owner, getPost } = blog;

9. 리터럴과 객체 리터럴

백틱(`)을 이용해 문자열을 '+' 기호없이 간단히 처리가 가능하다.
백택 안에서 여러 줄의 줄바꿈도 자유롭게 사용 가능하다.
객체 리터럴 시 키와 이름이 똑같은 변수를 할당하면 더 짧은 딕셔너리 선언을 할 수 있다.

const message = `줄바꿈도 마음대로 가능` //리터럴
console.log(message);

var name = "스파르타";
var job = "developer";
var user = {
	name,
    job
}

10. map (반복문의 다른 방식)

: 리스트를 반복하여 값을 확인한다.

리스트의 길이값을 몰라도 되고, 리스트 안에서 몇 번째 순서인지 알려준다.

let numbers = [1,2,3,4,5,6,7];

numbers.map((value, i) => {
	console.log(value, i)
})

11. 모듈화 시스템

: 특정 파일에서 정의한 값, 함수, 딕셔너리를 다른 자바스크립트 파일에서 불러 사용하는 일을 모듈 시스템이라고 한다.

export는 값, 함수, 딕셔너리(객체), 파일 자체를 외부로 보내는 키워드이고,
import는 파일을 안으로 가져오는 키워드이다.
외부로 보내는 것은 밖에서 쓸 수 있고, 내부로 가져오는 것은 외부로 내보낸 것들을 가져온다는 의미이다.
export로 보낸 함수를 import 시킨 파일에서 가져와 사용할 수 있다.

import { times, plusTwo } from './util.js';
export function plusTwo(num){
	return num + 2;
}

꿀팁

개발 공부할 때에 함수나 문법들은 영어로 검색하는 연습을 하자. 하나의 키워드를 선정해서 검색하기.

Seoyeon Kim

다음 포스트