</ 6주차 복습 및 정리>

JavaScript 데이터

• 문자

  • .indexOf(): 지정된 요소가 몇번째에 있는지를 알 수 있는 메소드로 요소가 없다면 -1로 출력된다.

    const result = 'Hello world!'.indexOf('Korea!')
    console.log(result) // 결과는 -1로 나옴.

  • .slice(): 문자열의 일부를 추출하면서 새로운 문자열을 반환해주는 메소드다.

    const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
    console.log(animals.slice(2, 4)); // camel과 elephant가 추출된다.
    console.log(animals.slice(-1) // -1은 제일 마지막인 elephant만 추출된다.

  • .replace('변경하고 싶은 부분', '변경할 문구'): 원하는 부분을 대체할 수 있는 메소드다.

    const str = 'Hello world!'
    console.log(str.replace(' world!', ' Korea!'))
    // Hello Korea!로 출력된다.
    
    // 만약 replace를 통해 글을 지우고싶다면 뒤에 아무 인수도 안 넣어주면 된다.
    console.log(' world', '')

  • .match(): 문자열이 정규식과 매치되는 부분을 검색하는 메소드다.

  • .trim(): 공백문자들을 없애주는 메소드다.

    const greeting = '   Hello world!   ';
    console.log(greeting.trim());
    // 공백없이 Hello world!로 출력된다.

• 숫자와 수학

  • .toFixed(): 몇번째자리에 소수점까지 나오는지에 대해 알려주는 메소드다.

    const pi = 3.14159265358979;
    const str = pi.toFixed(2);
    console.log(str); // 3.14가 출력된다.

  • parseInt(): 문자열을 정수로 바꾸는 함수이다.

    const str = pi.toFixed(2); // 3.14
    const integer = parseInt(str);
    console.log(integer); // 정수인 3이 출력된다. 

  • parsefloat(): 소수점을 유지해주면서 문자열 실수로 변환해주는 함수이다.

    const str = pi.toFixed(2); // 3.14
    const float = parseFloat(str);
    console.log(float); // 3.14로 출력된다.
    cosole.log(typeof float); // number로 출력된다.

  • Math.abs(): 주어진 숫자의 절대값을 반환한다. x가 음수면 x의 반대값, 즉 양수를 반환한다.

    console.log(Math.abs(-12)) // 양수인 12가 추출된다. 
    // 만약 양수인 12가 들어간다면 그대로 12가 추출된다.

  • Math.min(a, b): 둘 중 가장 작은 숫자를 반환해주는 함수이다.
  • Math.max(a, b): 둘 중 가장 큰 숫자를 반환해주는 함수이다.
  • Math.ceil(): 입력받은 숫자를 올림한 정수를 리턴하는 함수이다.

    console.log(Math.ceil(3.14)) // 4로 출력된다.

  • Math.floor(): 입력받은 숫자를 내림처리하여 리턴하는 함수이다.

    console.log(Math.floor(3.14)) // 3이 출력된다.

  • Math.round(): 입력값을 반올림한 수와 가장 가까운 정수 값을 반환하는 함수이다.

    console.log(Math.round(3.5)) // 4로 출력된다.

  • Math.random(): 0~1(1은 미포함) 구간에서 부동소수점의 난수를 생성하는 함수이다.

• 배열

  • .length: 배열의 길이를 반환한다.

    const fruits = ['Apple', 'Banana', 'Cherry']
    console.log(fruits.length) // 3이 출력된다.
    console.log([].length) // 0이 출력된다. 0이 나왔다는것은 배열이 없다는 의미이다.

  • .concat(): 두개에 배열데이터를 병합해서 새로운 배열데이터를 반환해주는 메소드이다. 원본은 손상되지않는다.

  • .forEach(): 주어진 함수를 배열 요소 각각에 대해 실행하는 메소드다.

    const array1 = ['a', 'b', 'c'];
    
    array1.forEach(element => console.log(element));
    
    // 첫번째: "a"
    // 두번째: "b"
    // 세번째: "c"

    ※ 매개변수이름은 원하는 이름으로 작성하면된다.

  • .map(): 콜백에서 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메소드다.

  • .filter(): 특정한 기준에 대한 필터링 된 결과를 나오게 해주는 메소드이며 원본은 훼손하지않는다.

    const numbers = [1, 2, 3, 4]
    const b = numbers.filter(number =>  number < 3) 
    console.log(b) // [1, 2]만 출력된다.

  • .find(): 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환하며 요소가 없을때는 undefined로 반환된다.

    const array1 = [5, 12, 8, 130, 44];
    
    const found = array1.find(element => element > 10);
    
    console.log(found); // 12가 출력된다.

  • .findIndex(): 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환하는 메소드이다.

    const array1 = [5, 12, 8, 130, 44];
    
    const isLargeNumber = (element) => element > 13;
    
    console.log(array1.findIndex(isLargeNumber)); // 3이 출력된다.

  • .includes(): 인수가 해당배열에 들어있는지를 확인해주는 메소드이다.

  • .push(): 배열 맨 뒤쪽에 특정한 데이터를 삽입해주는 메소드이다. 원본이 수정되니 주의할 것!

    const numbers = [1, 2, 3, 4]
    numbers.push(5)
    console.log(numbers) // [1,2,3,4,5]

  • .unshift(): 배열에 맨 앞쪽에 특정한 데이터를 삽입해주는 메소드이다. 원본이 수정되니 주의할 것!

    const numbers = [1, 2, 3, 4]
    numbers.unshift(0)
    console.log(numbers) // [0,1,2,3,4]

  • .reverse(): 배열의 순서를 반전해주는 메소드이다. 원본이 수정되니 주의할 것!

  • .splice(): 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경해주는 메소드이다. 원본이 수정되니 주의할 것!

    const numbers = [1, 2, 3, 4]
    const fruits = ['Apple', 'Banana', 'Cherry']
    
    numbers.splice(2, 1)
    console.log(numbers) [1, 2, 4]로 출력된다.
    
    // numbers.splice(2, 0) -> 뒤에 0이 들어가는건 아무것도 지우지않는다는 것을 의미
    // numbers.splice(2, 0, 999) // 3번째 자리에 999를 넣는다는 것을 의미
    // numbers.splice(2, 1, 99) // 3번째 자리에 3을 뺴고 99를 넣는다는 것을 의미
    
    fruits.splice(2, 0, 'Orange')
    console.log(fruits)
    // ['Apple', 'Banana','Orange', 'Cherry']가 출력된다.
    // 문자도 삭제 또는 추가가 가능하다.

• 객체

  • Object.assign(): 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣고 대상 객체를 반환하는 메소드이다.

    const userAge = {
    // key: value
    name: 'Heropy',
    age: 85
    }
    const userEmail = {
    name: 'Heropy',
    email: 'thesecon@gmail.com'
    }
    const target = Object.assign(userAge, userEmail)
    console.log(target) 
    // userAge와 userEmail에서 중복되는 값을 뺀 나머지값이 출력된다.
    
    const target = Object.assign({}, userAge, userEmail)
    // 앞쪽에 {}이 뒤에 있는 속성들을 흡수하여 새로운 객체데이터를 만들 수 있다.
    console.log(target === userAge)
    // target은 새로운 객체데이터가 되었기 때문에 false로 출력된다.

  • Object.keys(): 객체가 가지고 있는 키들의 목록을 배열로 반환해주는 메소드이다.

    const user = {
    name: 'Heropy',
    age: 85,
    email: 'thesecon@gmail.com'
    }
    const keys = Object.keys(user)
    console.log(keys)
    // ['name', 'age', 'email']로 출력됨.

• 구조 분해 할당(= 비구조화 할당)

  • 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.

    const fruits = ['Apple', 'Banana', 'Cherry', 'Orange']
    const [a, b, ...fruit] = fruits
    console.log(fruit) // ['Cherry', 'Orange]가 출력됨.

• 전개 연산자(Spread)

  • 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있으며 사용된다.

    const fruits = ['Apple', 'Banana', 'Cherry', 'Orange']
    
    const toObject = (a, b, ...c) => ({ a, b, c })
    console.log(toObject(...fruits)) // ...이 전개 연산자의 작성방법임.
    // {a: 'Apple', b: 'Banana', c: Array(2)}로 출력됨.

• 데이터 불변성

  • 원시 데이터: String, Number, Boolean, Undefined, Null
  • 참조형 데이터: Object, Array, Function -> 불변성이 없음, 그래서 한쪽을 수정하면 다른쪽도 수정될 가능성이 있음.

    let a = 1
    let b = 4
    console.log(a, b, a === b) // 1 4 false
    b = a
    console.log(a, b, a === b) // 1 1 true
    a = 7
    console.log(a, b, a === b) // 7 1 false
    let c = 1
    console.log(b, c, b === c) // 1 1 true

• 얕은 복사와 깊은 복사

  • 얕은 복사(Shallow Copy): 객체의 참조값(주소 값)을 복사하는 것.

    let a = {name:'빨간 사과'};
    let b = a;
    
    a.name = '초록 사과';
    
    console.log(a); // '초록 사과'
    console.log(b); // '초록 사과'
    // 해당데이터의 메모리를 전달하게 되면서 데이터를 공유하기 때문에 값이 같이 변경된다.

  • 깊은 복사(Deep Copy): 객체의 실제 값을 복사하는 것.

    let a = '빨간 사과';
    let b = a;
    
    a = '초록 사과';
    
    console.log(a); // '초록 사과'
    console.log(b); // '빨간 사과'
    // 복사 시 독립적인 메모리를 만들어내기 때문에 a가 재할당 되더라도 b는 영향을 받지 않는다.

• 가져오기 & 내보내기

  • 내보내기(export)

    export function random() {
    	return Math.floor(Math.random() * 10)
    } // Named export는 이름을 맘대로 지정할 수 있으며 여러번 사용이 가능하다.
    
    export default 123 // export default는 여러번 사용이 불가능하다.

  • 가져오기(import)

    import random from './getrandom'
    
    import * as R from './getRandom'
    // *를 와일드카드라고 부름, getRandom 안에 모든 정보를 가지고 오고 싶을 때 사용한다.

• Lodash: 일반적인 유틸 함수들을 모아서 제공해주는 라이브러리다.

  • _.uniqBy(데이터, 기준값): 기준값을 통해 중복되는 값은 뺀 값들을 반환해주는 메소드이다. 배열데이터가 하나일 때만 사용한다.

    const userA = [
     { userId: '1', name: 'HEROPY'},
     { userId: '2', name: 'Neo'}
    ]
    const userB = [
     { userId: '1', name: 'HEROPY'},
     { userId: '3', name: 'Amy'}
    ]
    
    const usersC = userA.concat(userB)
    console.log('concat', usersC)
    console.log('uniqBy', _.uniqBy(usersC, 'userId'))
    
    // 결과
    0: {userId: '1', name: 'HEROPY'}
    1: {userId: '2', name: 'Neo'}
    2: {userId: '3', name: 'Amy'}

  • _.unionBy(데이터1, 데이터2, 기준값): 합치기 전의 데이터들을 합쳐서 중복 되는 값을 제거한 값들을 반환해주는 메소드이다. 배열이 여러개일 때 사용한다.

    const userA = [
     { userId: '1', name: 'HEROPY'},
     { userId: '2', name: 'Neo'}
    ]
    const userB = [
     { userId: '1', name: 'HEROPY'},
     { userId: '3', name: 'Amy'}
    ]
    const usersD = _.unionBy(userA, userB, 'userId')
    console.log('unionBy', usersD)
    
    // 결과
    0: {userId: '1', name: 'HEROPY'}
    1: {userId: '2', name: 'Neo'}
    2: {userId: '3', name: 'Amy

  • _.find(데이터, 찾을 조건): 조건에 대한 정보를 알려준다.

    const users = [
    {userId: '1', name: 'Heropy'},
    {userId: '2', name: 'Neo'},
    {userId: '3', name: 'Amy'},
    {userId: '4', name: 'Evan'},
    {userId: '5', name: 'Lewis'},
    ]
    
    const foundUser = _.find(users, {name: 'Amy'})
    
    // 결과
    {userId: '3', name: 'Amy'}

  • _.findIndex(데이터, 찾을 조건): 조건이 몇번째 요소인지 알려준다.

    const users = [
    {userId: '1', name: 'Heropy'},
    {userId: '2', name: 'Neo'},
    {userId: '3', name: 'Amy'},
    {userId: '4', name: 'Evan'},
    {userId: '5', name: 'Lewis'},
    ]
    
    const foundUserIndex = _.findIndex(users, {name: 'Amy'})
    console.log(foundUserIndex)
    
    // 결과
    2

  • _.remove(데이터, 지울 조건): 원하는 요소를 지울때 사용한다.

    const users = [
    {userId: '1', name: 'Heropy'},
    {userId: '2', name: 'Neo'},
    {userId: '3', name: 'Amy'},
    {userId: '4', name: 'Evan'},
    {userId: '5', name: 'Lewis'},
    ]
    
    _.remove(users, {name: 'Heropy'}) 
    console.log(users)
    
    // 결과
    0: {userId: '2', name: 'Neo'}
    1: {userId: '3', name: 'Amy'}
    2: {userId: '4', name: 'Evan'}
    3: {userId: '5', name: 'Lewis'}

• JSON: 자바스크립트의 객체 표기법

  • JSON.stringify(): 자바스크립트의 값을 JSON의 문자열로 변환시키는 메소드를 말한다.

    const user = {
    name: 'HEROPY',
     age: 85,
     emails: [
      'thesecon@gmail.com',
      'neo@zillinks.com'
    ]
    }
    const str = JSON.stringify(user) 
    console.log('str', str)
    
    // 결과
    str {"name":"HEROPY","age":85,"emails":  ["thesecon@gmail.com","neo@zillinks.com"]}

  • JSON.parse(): JSON 문자열을 자바스크립트의 값으로 변환시키는 메소드를 말한다.

    const user = {
    name: 'HEROPY',
     age: 85,
     emails: [
      'thesecon@gmail.com',
      'neo@zillinks.com'
     ]
    }
    const str = JSON.stringify(user)
    const obj = JSON.parse(str)
    console.log('obj', obj)
    
    // 결과
    {name: 'HEROPY', age: 85, emails: Array(2)}

• storage

  • Session Storage(세션스토리지): 웹페이지의 세션이 끝날 때 저장되어있던 데이터가 지워진다.
  • Local storage(로컬스토리지): 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.
    • localStorage.setItem(key, value): 데이터를 저장할 때 사용
    • localStorage.getItem(key): 데이터를 조회할 때 사용
    • localStorage.removeItem(key): 키의 데이터를 삭제할 때(콘솔에는 남아있음.)
    • localStorage.clear(): 모든 키의 데이터를 삭제할 때

      // 정보를 수정하고 싶을 때!
      const str = localStorage.getItem('user') 
      const obj = JSON.parse(str)
      obj.age = 22 
      console.log(obj)
      localStorage.setItem('user', JSON.stringify(obj))

• API

  • 주소?속성=값&속성=값&속성=값 -> 속성을 추가하고싶은면 &를 넣어 추가하면된다.

    function fetchMovies() {
    axios
    .get('https://www.omdbapi.com/?apikey=키값&s=frozen')
    .then(res => {
      console.log(res)
      const h1El = document.querySelector('h1')
      const imgEl = document.querySelector('img')
      h1El.textContent = res.data.Search[0].Title
      imgEl.src = res.data.Search[0].Poster
    })
    }
    fetchMovies()

    ↑ 위 코드의 결과

    

</ 6주차를 마치며>

드디어 자바스크립트의 대한 모든 수업이 끝났다. 매 일지마다 이야기 하고 있지만 내가 국비지원교육을 받을때 배웠던 수업이랑은 너무 달랐다는걸 다시 한번 느꼈고 그래서 더 뜻깊은 시간이었다. 자바스크립트를 같이 복습하면서 이제 리액트강의도 같이 들어야겠다.