[React Native] 스파르타 앱개발 종합반 1주차

1주차

• 개발 능력 : 공식문서를 직접 스스로 참고하여 자신이 원하는 기능을 구현하기 위한 방법을 찾아가는 능력. 누가 가르쳐주지 않아도 개발 공식 문서에서 출발할 수 있음!
• 1주차에는 ReactNative를 시작하기 앞서 가물가물한 JS문법을 다시본다. 기초 문법과 ReactNative로 개발하면서 자주 보게 될 최신 JS문법들을 훑는다.

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

• 시작 전 유의사항

  var 와 let은 같은 기능. var은 예전에 사용되던 것인데 문제가 많아서 이후 let과 const가 등장. var대신 let과const를 사용하는 것이 암묵적인 룰.

  이 둘은 같은 말

  딕셔너리 = 객체

  리스트 = 배열

  마지막에 세미콜론 써도 되고 안 써도 됨

• 콘솔 사용

  크롬에서 F12 를 눌러 개발자콘솔을 열고 Console 탭으로 이동함

  console.log("원하는 메세지를 입력")

  오른쪽 점세개 > 콘솔 크기와 위치 조정 가능

  • 좌측 상단에 🚫 버튼 : Clear Console, 콘솔 깨끗하게 지우기. 선언했던 변수들은 사라지지 않음. 단축키 Ctrl L
  • F5를 누르면 아예 새로고침 되어서 선언했던 변수들도 사라짐
  • 콘솔창에서 화살표 위 키를 누르면 전에 입력했던 코드들을 차례로 다시 불러와서 활용할 수 있음

• 변수의 이름 짓기 약속

  카멜케이스 nameIsLikeThis

  스네이크케이스 name_is_like_this

• 변수 선언 방법 2가지

  let : 가변. 변수 값 변경 가능

  const : 불변. 한번 값 할당 후 변수 값 변경 불가능

• list

    let a_list = [1,2,3,4,"jeehea",6,"park"]
    a_list.push("sparta") //새 항목 추가
    console.log(a_list[4])
    console.log(a_list)
    a_list.length

** 참고로 위와 같이 쓰이는 온점 . 은 연결연산자라고 부름!

• dictionary

  키와 키에 물려있는 밸류(값) 구조. 사전형식

    let a_dict = {"name":"jeehea", "age":23}
    a_dict["height"] = 200 //새 항목 추가
    console.log(a_dict["name"]) //출력 결과 : jeehea
    console.log(a_dict)

  사실 딕셔너리의 키값 자리에는 ""큰따옴표가 없어도 됨. 그냥 적어도 키값으로 약속되어 있음

  대괄호 [ ] 기호를 쓰는 건 list 라는 뜻이고
  중괄호 { } 기호를 쓰는 건 dictionary 라는 뜻임!! (정확하진 않지만 보편적으로)
  화살표 => 가 보이면 무조건 함수라는 뜻임(화살표함수)

• list와 dictionary 함께 사용

    //리스트 안에 딕셔너리 여러개가 들어있음
    let names = [{"name":"jeehea", "age":23}, {"name":"kate", "age":10}]
    name.push({"name":"tami", "age":20}) //새 항목 추가
    names[1]["age"] //출력 결과 : 10
    console.log(names)

  이렇게 함께 쓰이는 구조가 바로 JSON구조!

  • JSONView : JSON을 예쁘게 보기 위한 크롬 확장프로그램

• JS 기본 제공 함수

  사칙연산 외에도 여러가지 기능들이 함수로 기존 제공되므로
  왠지 이건 있을 것 같다? 하면 직접 기능으로 만들기 전에 먼저 찾아보기!

  • % : 나눗셈 나머지 구하기
  • toUpperCase() : 대문자로 바꾸기
  • split() : 특정 문자열 기준으로 문자열 자르기
  • join() : 리스트의 값들을 특정 문자열을 사이사이 끼워서 하나의 문자열로 합쳐라
  • concat() : 리스트 여러개를 하나의 리스트로 합치기

• 구글링할 때 - 최대한 영어로 검색. MDN web docs (mozilla)라는 사이트가 나오는데 이곳이 js를 만든 사람들이 설명해놓은 곳이므로 애용할 것! 아무 블로그글 보다는 이런 곳. 예제 많이 볼 것.

• 함수 만들기

  예시1

    function sum(num1,num2){
        console.log(num1+ num2)
    }
  
    sum(10,20)

  예시2 : 리터럴 함수 방식

    let a = function(){
        console.log("리터럴함수")
    }
  
    a()

  리터럴 함수 방식은 변수를 하나 선언하고 변수의 값으로 함수를 넣어주는 것

• 조건문 if

• 반복문 for

• 조건문과 반복문을 이용해 JSON데이터 사용

  
  

---

Chap2. 앱개발에 필요한 자바스크립트

리액트 네이티브는 항상 최신버전의 자바스크립트 문법(ES6)을 사용.

공식 문서를 볼 때 당황하지 않고 적용하기 위한,

기존 자바스크립트모다 더 함축적이고 간결항 문법 사용을 위한 내용을 배우자.

• 함수 선언 : 화살표 함수

  1. 기존 방식 (리터럴 함수)

    let a = function(){
        console.log("리터럴함수")
    }

  2. 화살표 함수

    let a = () => {
            console.log("화살표함수")
    }

  위 두 함수는 똑같은 의미임. 1번의 function()부분이 () =>로 바뀐 것.

  더 길이를 줄이려고 function을 빼버리고 함수라는 것을 나타내주기 위해 () 뒤에 =>를 붙였음

• 비구조 할당 : 딕셔너리의 값을 빠르게 접근해 할당하는 방법

  ❗ 비구조 할당은 변수명과 똑같은 키값이 있어야 데이터를 할당한다.

  아래와 같은 객체(딕셔너리)가 있다고 하자.

    let blog = {
        owner : "noah",
        url : "noahlogs.tistory.com",
        getPost() { 
            console.log("ES6 문법 정리"); 
        }
    }

  1. 기존 할당 방식

    let owner = blog.owner
    let getPost = blog.getPost()

  **2. 비구조 할당 방식**

    let { owner, getPost } = blog
  
    //각각 blog 객체의 owner , getPost() 의 데이터가 할당
    //blog의 키 값과 이름이 같아야 해요!
    //(예 - owner가 아니라 owner2를 넣어보세요! 아무것도 안 들어온답니다.)

  → owner와 getPost라는 이름의 변수를 만들고 blog객체에서 이와 이름이 같은 키값을 찾아 밸류값을 각각 변수에 담아라!

• 화살표 함수와 비구조 할당을 활용한, 앞으로 React Native에서 가장 자주 사용할 방식

    //함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
    **let blogFunction = ({owner,url,getPost}) => {
        console.log(owner)
        console.log(url)
        console.log(getPost())
    }
  
    blogFunction(blog)
    //**let { owner, getPost,getPost } = blog 과 같은 비구조할당 방식이 눈에 직접 보이진 않지만, 
    //함수의 인자를 전달하는 과정으로 포함되어있음

• 리터럴 : 백틱 ` 을 이용해서 문자열 표현을 편리하게

  따옴표가 아닌 백틱을 사용하여 문자열을 입력하면 엔터를 쳐도 그대로 문자열로 인식해주고,

  문자 사이에 ${}를 활용해 변수를 끼워넣기가 편리하다.

    const name = `박지혜`
    const introduce = `안녕하세요.
                                            ${name}입니다.`
  
    //출력결과는 아래와 같다.
    안녕하세요.
    박지혜입니다.

• 객체 리터럴 : 딕셔너리 간편하게 만들기

  넣으려는 값이 담겨져있는 변수명과 키값을 동일하게 한다는 조건으로 딕셔너리를 간결하게 생성할 수 있다. 변수명을 키값으로, 변수의 값을 밸류값으로 하여 딕셔너리를 생성한다.

    let name = "박지혜"
    let job = "학생"
  
    let dic = {
        name,
        job
    }
  
    //생성된 dic의 출력결과는 아래와 같다. 
    {name: "박지혜", job:"학생"}

• map : 반복문의 또 다른 방식

  list에 사용(?)

  map함수 안에는 함수가 들어있음. map이 list에서 값을 하나씩 받아서 함수로 던져줌

  예시를 보는 게 이해가 빠름. map()안에 들어있는 게 화살표함수임

  예시

    let num_list = [1,2,3,4,5,6,7]
  
    num_list.map((i, value)=>{
        console.log(i+" " +value)
    })

• 자바스크립트 파일의 모듈화 - module system

  앞으로 다른 파일의 함수나 객체를 사용할 일이 많음. 이 때 사용되는 것이 module system

  • export : 변수, 함수, 객체, 파일자체 등을 외부로 내보내는 기능

  • import : export 된 다른 파일의 것들을 가져오는 기능

    예시 - utill.js에서 export

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

    예시 - 다른 파일에서 import

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

  • export default : 이 파일의 내용을 다른 파일에서 import 시 특별히 누구를 import 할 거라고 지칭하지 않아도 이 내용이 import된다.

    예시 - export default

    // util.js 에서
    export default function times(x) {
    return x * x;
    }
    // app.js 에서
    import k from './util.js'; // function times(x)가 k라는 이름으로 이 파일에 import 됨
    console.log(k(4)); // returns 16

숙제에서 알게된 것

• indexOf : 문자열에 특정 문자열이 있는지 찾고 있다면 문자열 속 특정 문자열의 첫번째 인덱스값을 반환한다. 없다면 -1을 반환한다.

• 정규표현식(정규식) : 문자열의 특정 문자 조합을 나타내는 방법. 객체임

  • 정규식 만드는 방법

    1. 정규식 리터럴(슬래시 / 로 감쌈) : 스크립트가 불러와질 때 컴파일 됨

    2. RegExp 사용 : 정규식 실행 시점에 컴파일 됨. 정규식 패턴이 변경될 수 있거나 사용자 입력 등의 다른 출처로부터 패턴을 가져와야 하는 경우에 사용.

        //예시
        //정규식 리터럴
        let re = /ab+c/
       
        //RegExp
        let re = new RegExp("ab+c")

  • 정규식 패턴은 단순히 문자로만 구성(단순패턴)될 수도 있고 특수문자가 섞인 형태로 구성될 수도 있음.

    • 단순패턴 : 문자열을 있는 그대로 대응시킴.

      예 ) /abc/ 는 문자열에 정확히 "abc"가 딱 이대로 포함되어 있어야 대응됨. 중간에 다른 문자나 띄어쓰기가 끼어 있으면 대응되지않음.

    • 특수문자 사용

      예 ) /ab*c/ 에서 *는 *의 바로 앞 문자가 0개 이상이라는 것을 의미함.없어도 되고 여러개여도 된다는 뜻. 그래서 이 패턴은 "ac" 나 "abbbbbbbc" 와 모두 대응됨.

• 숙제 해결

  1번

    let fruit_list = ['사과','감','감','배','포도','포도','딸기',
    '포도','감','수박','딸기']
    let count = 0
    fruit_list.map( (value)=>{ if(value=="딸기"){count+=1} } )
    console.log(`딸기는 ${count}개입니다.`)

  2번

    //indexOf 사용 - @가 있는지만 체크
    let checkEmail = (email) => {
        if(email.indexOf("@") != -1 ){
             console.log("이메일이 맞습니다")
        }
    }
  
    //정규표현식 사용 - 전체 형식 체크
    let emailRule = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i
  
        let checkEmail = (email) => {
            if(emailRule.test(email)){
                    console.log("이메일이 맞습니다")
               }
    }