앱개발 1주차

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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

01. 1주차 오늘 배울 것 :)

• 앱 서비스의 기본 동작 구조
  • 클라이언트와 서버서버는 여러분들이 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다.이는 비단 앱 서비스 뿐만 아니라, 웹 사이트 만들때도 일맥상통합니다.</aside>
  • 
  • 그렇다면 우린 사용자들이 보는 앱 화면을 만들고 필요한 데이터를 요청할 수 있는 서버를 만들면 되겠네요? 간단합니다!
  • 앱, 즉 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여줍니다
  • 클라이언트는 사용자가 보는 화면입니다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 여러분들 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당됩니다
  • <aside> 👉 앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻합니다. 앞으로 우린 이 둘을 모두 직접 만들어 앱 서비스를 완성해 나갑니다.
  • 
• 앱과 리액트 네이티브
  • 앱을 만들려면?안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능합니다.</aside><aside> 👉 그런데 Java&Kotlin 또는 Swift 언어는 다소 높은 러닝커브가 존재하며, 심지어 이 중 하나를 공부했다고 하더라도 우리는 안드로이드 또는 iOS 앱 중 "하나"만! 개발이 가능한 겁니다.</aside>
  • 그렇다면 앱개발에는 이 두 가지를 배워야 하는 것 말고는 존재하지 않을까요?
  • 
  • 각기 다른 개발 기술 언어가 필요한 이유는, 안드로이드와 iOS가 실행되기 위한 OS,즉 환경이 다르기 때문인데요! 그래서 보통 회사에서 안드로이드와 iOS 개발자를 각각 뽑는 모습을 볼 수 있습니다.
  • <aside> 👉 앱 개발이라고 하면 단연 "안드로이드" 와 "iOS(아이폰)" 두 가지가 떠오를 겁니다.
  • 앱 개발 종류!그리고 우리가 배우려고 하는 "크로스 플랫폼 앱"! 개발이 존재합니다.</aside>
  • 크로스 플랫폼 앱 개발은 네이티브 앱과 하이브리드 앱 개발의 장점들을 모아놨습니다.
  • <aside> 👉 안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!
  • 리액트 네이티브(React Native)페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술입니다.</aside>
    • 리액트 네이티브를 사용하고 있는 회사는 다음과 같습니다.
    </aside>
  • 즉, 많은 사람들이 이미 다양한 경험을 거쳐서 리액트 네이티브를 사용해 많은 앱을 만들었다는 뜻입니다. 믿고 안심해도 됩니다! 😉
  • <aside> 👉 이밖에도 많은 회사들이 사용하고 있으며, 리액트 기반의 앱 개발 기술인 만큼 형성되어 있는 커뮤니티가 상당합니다.
  • 리액트(React.js) 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발 가능 합니다. (js = javascript 줄임말)
  • <aside> 👉 크로스 플랫폼 앱 개발 언어 중 하나입니다!
• 1~5주차 배울 순서
  • 1주차: 자바스크립트</aside>
  • <aside> 👉 앱을 만들 때 알고 있어야 하는 자바스크립트 기초 체력을 다집니다!
  • 2주차: 리액트 네이티브와 Expo 기본 사용 방법 및 필수 리액트 지식</aside>
  • <aside> 👉 리액트 네이티브와 Expo 기본기를 배웁니다. 앱 화면을 구성하는 JSX 문법도 배우며 앱 화면을 그릴 수 있게되고, 1주차때 배웠던 자바스크립트 문법을 앱 코드상에서 직접 적용해봅니다!
  • 3주차: 리액트 네이티브와 Expo의 유용한 기능들그전에 리액트 네이티브! 앱을 만들기 위해 필요한 최소한의 리액트 지식을 공부합니다.</aside>
  • 그런 다음 앱이라면 보통 가지고 있는, 앱 내의 페이지, 상태바, 외부링크, 공유등 유용한 앱 기능을 여러분 앱에 적용해봅니다.
  • <aside> 👉 2주차에 화면을 그리고 리액트 기본 지식들을 배워 익숙해졌다면! 이젠 정말 앱다운 앱을 위한 기술들을 배울 차례입니다.
  • 4주차: 파이어베이스</aside>
  • <aside> 👉 앱 서비스에 필요한 데이터를 저장하고 꺼낼 수 있는 서버를 구축합니다
  • 5주차: 구글 광고 붙이기 + 배포</aside>
  • 
  • <aside> 👉 마지막 5주차엔 여러분이 만든 앱에 광고를 붙이고! 마켓에 배포까지 완료합니다!
• 만들 앱 살펴보기
• 

02. 필수 프로그램 설치

• (공통) VSCode&안드로이드 스튜디오**- OS에 맞는 버전 다운로드**
  • Visual Studio Code 설치 (다운로드 링크)
  • 
  • 안드로이드 스튜디오 (다운로드 링크)<aside> ⚠️ 안드로이드 스튜디오 설치 경로에 한글이 있는 경우, 설치가 안되니 주의바랍니다.
  • </aside>
  • 
• (Windows 사용자만) node, npm, git 설치
  • node, npm 설치 (다운로드 링크)
  • git 설치 (다운로드 링크)
• (Mac 사용자만) XCode&node, npm 설치
  • 만약 자신의 OS 버전이 Catalina인 경우 XCode 12.4 버전을 설치해주세요
  • XCode (다운로드 링크)
  • node, npm 설치 (다운로드 링크)
  • Homebrew 설치

  /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
  

  • Homebrew 설치 후, 터미널로 Node 설치하는 방법

  brew search node
  brew install node@16
  

  • Homebrew가 이미 있거나 설치 후
    • watchman 설치

    brew install watchman
    

    • 만약 자바를 설치하지 않으셨다면..

    brew tap AdoptOpenJDK/openjdk
    brew install cask
    brew install --cask adoptopenjdk11
    

    • 설치 시, 유의사항입니다!
    
    • 이미 설치된 자바가 11이 아니라면 (터미널에서 작성)
    • 1. vi .zshrc
      
    • 1. 해당 코드 작성하기
      
    • 1. 작업 저장 및 종료하기 esc를 누른 후, :wq! 작성하고 엔터 누르기!
      
  • </aside>
  • <aside> 🔒 터미널에서 작성을 해주실 때는 password를 입력하여도 위와 같이 보이지 않는 형태인데요! 보이지 않는 것으로 당황하지 마시고 본인 mac의 비밀번호를 적고 Enter를 눌러주시면 설치가 잘 완료됨을 알 수 있어요!

03. Javascript 기초 문법 - 1

• 1. 자바스크립트란?
  • 1. 자바스크립트에 대하여
    <aside> 👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
    • 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
    
    • 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
    
  • (이 드라마 아시는 분?)
  • </aside>
  • <aside> 💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
  • </aside>
  • 1. 자바스크립트로 어떤 것들을 할 수 있을까?
    <aside> 👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)그럼 이제 본격적으로 자바스크립트 문법을 연습해보도록 하겠습니다!
  • </aside>
  • 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
• 1. 자바스크립트 공부 준비!
  <aside> 👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.윈도우는 : F12 맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!↑ 맥 개발자 콘솔 창console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!</aside>
• console.log("Hello World!");
• console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
• <aside> 👉 이번 시간에 우리는 이 콘솔 창에 코드를 작성하며 공부를 진행해볼게요! 🙂
• 
• ↑ 윈도우 개발자 콘솔 창
• </aside>
• 크롬 브라우저를 실행한 다음
• [미리 궁금해 하실 부분]
• //여러분들이 코딩을 시작하기 전에, 미리 궁금해 하실 것들을 준비해봤습니다! 1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다! let num = 1; let num = 1 2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가? 둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다! 3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞 는것이냐? 둘다 똑같습니다! 우린 딕셔너리 라는 이름으로 배울 거지만, 혹시 제가 객체라는 말이 툭 튀어 나와도 이해부탁드립니다 (_ _) 4) 마찬가지로 배열과 리스트라는 어휘도 똑같은 개념이라고 보시면 됩니다! //이 밖에 강의를 듣다 궁금한 점들이 생긴다면 즉문즉답시간에 언제든지 물어봐주세요 :)
• 1. 변수
  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
  • 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 변수명은 아무렇게나?
  • let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • const로 변수 선언
  • </aside>
  • <aside> 👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
  • let value_box = '값' value_box = '변경한 값'; console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다. const value_fix = '값'; value_fix = '변경한 값'; console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

04. Javascript 기초 문법 - 2

• 1. 리스트(배열) & 딕셔너리(객체)
  <aside> 💡 리스트를 배열(Array)이라고도 부릅니다
  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
  • 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) 값의 묶음</aside>
  • 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}을 출력
  • <aside> 👉 딕셔너리는 객체로도 불립니다
  • 리스트와 딕셔너리의 조합
  • 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'
  • 딕셔너리의 자주쓰는 또 다른 표현
  • let b_dict = {'name':'Bob','age':21} //bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. b_dict['name'] b_dict.name 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
  • 왜 필요할까요?앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    • JSON 데이터 구조
      • 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다
      • 다음은 서울시 Open API JSON 데이터 구조입니다.
        • [코드스니펫] 서울시 미세먼지 값
          • 큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습입니다.
        • <http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
        • [코드스니펫] JSONView</aside><aside> 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
        • </aside>
        • <https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko>
        • <aside> 👉 크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
  • </aside>
  • 👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
  • let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
  • <aside> 💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
• </aside>
• 1. 자바스크립트 기본 제공 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.</aside>

    **또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
    
    let myname = 'spartacodingclub'
    
    myname.toUpperCase() // SPARTACODINGCLUB
    

    **또, 특정 문자로 문자열을 나누고 싶은 경우 1**
    
    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 -> 간단하게 쓸 수도 있다!
    

    **특정 문자로 나누고 싶은 경우 2**
    
    let txt = '서울시-마포구-망원동'
    
    ****let names = txt.split('-'); // ['서울시','마포구','망원동'
    

    **특정 문자로 합치고 싶은 경우**
    
    let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
    

  • **예를 들면, 나눗셈의 나머지를 구하고 싶은 경우** let a = 20 let b = 7 a % b = 6
  • <aside> 👉 왠지 이건 있을 것 같은데? (예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!
• 1. 함수
  • 수학 시간엔 함수가 가장 재밌었던 것 같습니다.(?) 함수로 던진 값은 함수 안에 담긴 로직에 의해 값이 바뀌어서 나오곤 했죠? 자바스크립트의 함수에서도 똑같습니다.
  • 기본 생김새
  • // 만들기 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()

05. Javascript 기초 문법 - 3

• 1. 조건문
  • 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)
  • AND 조건과 OR 조건!
    • [코드스니펫] 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,'남')
• 1. 반복문
  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
  • console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    	4. 매번실행
    }
    
    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    
    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    

  • 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]); } // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

    for (let i = 0 ; i < scores.length ; i++) {
    	if (scores[i]['score'] < 70) {
    		console.log(scores[i]['name']);
    	}
    }
    
    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    

• 1. 합을 구하는 함수 만들기
  <aside> 👉 0부터 n-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); // return 결과인 sum이 result에 저장
  console.log(result)       // 45를 출력
  

• </aside>
• 1. 배열에서 특정 원소 갯수 구하기
  <aside> 👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서!
  • [코드스니펫] 과일 리스트
  • let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

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

• </aside>
• 1. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
  <aside> 👉 미세먼지 지수가 40보다 작은 구 찾기!
  • [코드스니펫] 서울시 미세먼지 값
  • let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, O3: 0.013, NO2: 0.016, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, O3: 0.012, NO2: 0.027, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, O3: 0.019, NO2: 0.018, CO: 0.5, SO2: 0.005, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, O3: 0.018, NO2: 0.015, CO: 0.6, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, O3: 0.012, NO2: 0.021, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, O3: 0.018, NO2: 0.016, CO: 0.6, SO2: 0.001, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, O3: 0.018, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 33, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, O3: 0.015, NO2: 0.019, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 34, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, O3: 0.022, NO2: 0.014, CO: 0.5, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, O3: 0.024, NO2: 0.011, CO: 0.3, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, O3: 0.022, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, O3: 0.017, NO2: 0.016, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 36, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, O3: 0.021, NO2: 0.013, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, O3: 0.022, NO2: 0.016, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, O3: 0.01, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, O3: 0.012, NO2: 0.023, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, O3: 0.012, NO2: 0.022, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 37, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, O3: 0.015, NO2: 0.02, CO: 0.4, SO2: 0.004, IDEX_NM: "좋음", IDEX_MVL: 43, ARPLT_MAIN: "PM25", }, { MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, O3: 0.016, NO2: 0.017, CO: 0.4, SO2: 0.003, IDEX_NM: "점검중", IDEX_MVL: -99, ARPLT_MAIN: "점검중", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, O3: 0.018, NO2: 0.018, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, O3: 0.024, NO2: 0.019, CO: 0.3, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 41, ARPLT_MAIN: "PM10", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, O3: 0.014, NO2: 0.025, CO: 0.4, SO2: 0.003, IDEX_NM: "좋음", IDEX_MVL: 42, ARPLT_MAIN: "NO2", }, { MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, O3: 0.016, NO2: 0.02, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 39, ARPLT_MAIN: "PM25", }, ];

  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
  

• </aside>

06. 앱개발에 자주 쓰이는 Javascript

• 1. 함축적인 자바스크립트
  <aside> 👉 지금까진 기초 자바스크립트 문법을 배워 봤습니다. 이제부턴 리액트에서 많이 사용되는 자바스크립트를 배워 볼텐데요,</aside>
• 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한답니다! 그렇기 때문에 여러분들이 공식문서를 볼때 당황하지 않고 적용하기 위해서! 그리고 기존 자바스크립트 보다 더 함축적이고 간결한 문법을 사용하기 위해! 배워봅니다.
• 1. 함수를 더 짧게! - 화살표 함수
  <aside> 👉 기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

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

  [최신 방식]
  
  let a = () => {
    console.log("arrow function");
  }
  a();.
  

• </aside>
• 1. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
  <aside> 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

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

• </aside>
• 1. 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴
  <aside> 💡 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능합니다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  
  const message = "줄바꿈을 하려면 \\n 이 기호를 써야 했죠!"
  
  const message = ` 줄바꿈도 마음대로
  사용이 가능합니다. ` 
  

• </aside>
• 1. 딕셔너리를 짧게 만들어보기! - 객체 리터럴
  • 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

  [기존 방식]
  
  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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
• 1. map -반복문의 또 다른 방식
  <aside> 👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

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

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