[Front-end🦁] #27 JavaScript JSON / 18장

1. 멋사 수업

이력서와 깃헙 이야기.. 를 먼저 들었다.
가장 중요하게 배워야 할 것은 페이지 구현.

1. Array, String, Math method 복습

string.repeat(10)
Array.from('a'.repeat(10)) // 이런식으로 많이 사용한다.
Array(10) // 완전히 아무것도 들어있지 않은 undefined도 안들어간 Array 생성.
Array(10).fill(0) // 10개에 전부 0 채움.
Array(10).fill(0).map((value, index) => value + index)
// reduce 는 많이 안씀.
arr.reduce((sum, current) => sum + current)
let s = 0
[1, 2, 3, 4, 5].forEach(i => s+i)
[1, 2, 3, 4, [1, 2, [1, 2, 3]]].flat() // 한단계 펼쳐줌
[1, 2, 3, 4, [1, 2, [1, 2, 3]]].flat().flat() // 두단계
[1, 2, 3, 4, [1, 2, [1, 2, 3]]].flat(2) // 두단계
[1, 2, 3, 4, [1, 2, [1, 2, 3]]].flat(Infinity) // 삭 다 펼쳐줌

2 ** 3 ** 2 // 우결합이므로 주의하자.
s.split(' ') // ' ' 기준으로 잘라서 array를 만들어준다.
// map 은 반환값이 있고, forEach 는 반환값 없이 함수만 실행해줌.
const arr = '12345'.split('').forEach(x => parseInt(x))

let today = new Date()
today.toISOString()

Math.max([1, 2, 10, 6, 7]) // NaN
Math.max(...[1, 2, 10, 6, 7]) // 10 펼쳐야 알려줌.
Math.max.apply(null, [1, 2, 10, 6, 7]) // ... 등장 전엔 이렇게 사용했다.
Math.PI
Math.SQRT2 // root 2
Number.MAX_SAFE_INTEGER
Number.MIN_SAFE_INTEGER
Number.EPSILON // javascript에서 날 수 있는 오차 범위.

2. strict mode

• 원래 js는 최대한 오류를 내지 않게 설계되어 있는데 해당 부분들을 엄격하게 사용하고 싶으면, 'use strict' 를 이용해서 엄격하게 사용할 수 있다.

• js 다른 파일의 변수도 참조 가능하다.

3. this

function sayName() {
  console.log(this.name)
}
let peter = {
  name: 'Peter Parker',
  sayName: sayName
  sayName2: function (name1, name2) {
    console.log(this.name + ' is' + name1 + ' or ' + name2);
  }
}
let bruce = {
  name: 'Bruce Wayne',
  sayName: sayName
}
sayName() // this == window
peter.sayName() // this == peter

let peter2 = {
  name: 'Peter Parker',
  // bind : this가 고정된 함수를 가져와버림.
  sayName: sayName.bind(bruce)
}
// call: 다른 object의 함수를 가져오는데 재정의 하지 않고 가져옴.
peter.sayName.call(bruce) // peter 함수인데 this == bruce
// apply: 함수를 가지고 오는데, 인자를 전달.
peter.sayName2.apply(bruce, ['batman', 'richman']) // peter 함수인데 this == bruce

4. closure

정보 은닉을 위해 사용.

function 제곱(x) {
  function 승수(y) {
    return y ** x 
  }
  // 함수를 return
  return 승수
}
제곱(2)(10) //100

5. 생성자 함수

일반 함수와 차이 없음. 첫 글자를 꼭 대문자로 쓰자.

6. JSON (JavaScript Object Notation)

JavaScript에서 사용하는 데이터 형식. JS에서 사용해서 JSON 이었다니..
그 전에는 xml 형식을 사용하기도 했다.

// key 값도 쌍따옴표라는 것에 유의하자.
{
  "squadName": "슈퍼히어로",
  "members": [
    {
      "name": "아이언맨",
      "age": 29,
      "본명": "토니 스타크"
    },
    {
      "name": "헐크",
      "age": 39,
      "본명": "부르스 배너"
    }
  ]
}

JSON.stringify(user, null, 4); // 공백 문자 4개를 써서 들여쓰기 한 형태로 만들어줌.
var arr = [1, 2, 3, 4]
var arrString = JSON.stringify(arr)
JSON.parse(arrString)

JSON 받아와서 처리하기

function sortTable(key) {
    if (click) {
        click = false;
        data.sort((a, b) => (a[key] > b[key] ? -1 : (a[key] < b[key]) ? 1 : 0));
    } else {
        click = true;
        data.sort((a, b) => (a[key] < b[key] ? -1 : (a[key] > b[key]) ? 1 : 0));
    }
    renderTable(data);
}
//
function renderTable(data) {
    let tbodyData = [];
    for (const iterator of data) {
        // console.log(iterator);
        tbodyData.push(`
            <tr>
                <th>${iterator.index}</th>
                <th>${iterator.picture}</th>
		<th>${iterator.name}</th>
				// ... 생략.
            </tr>
        `)
        const tbody = document.querySelector('tbody');
        tbody.innerHTML = tbodyData.join('');
    }
}

HTML 에 쓰지 말자. js로 쓰자.

3. Deep Dive

18. 함수와 일급 객체 링크

에 대해 공부했다.

4. 갑자기 진행된 조은님의 리액트 특강

코드를 완벽 이해하려고 하지는 않고 찍먹하는 느낌으로 들어봤다. 그냥 JavaScript 들을 때도 (최신에 생겼다고 하는 문법들이) Swift에 있는 문법이 많아서 영향을 많이 받았구나 싶었는데, 리액트의 최신 문법들까지도 Swift에서 보이는 구조의 문법이라는게 신기했다. Swift5... 최신 언어가 맞구나..

• 함수를 사용한 컴포넌트 선언 (최신 문법)
• class를 사용한 컴포넌트 선언
• 컴포넌트는 export 키워드를 써서 다른 파일에서 import 하여 사용한다
• '바뀌는 값'을 나타낼 때 State 를 사용한다.
• 컴포넌트로 쪼개서 사용을 한다..

정도가 기억에 남는다. 그리고 바닐라로 짜면 10줄로 짤 코드를 이해하기 쉬운 구조로 3줄 이렇게 짤 수 있는 것이 인상적이었다.

5. 느낀점

• 물론 502 막 이런거 처리를 한 건 아니지만, JSON 처리를 JSON의 원조인 자바스크립트로 해보니까, 왜 json이 그런 형태이고 받아오는 부분도 iOS에서 할 때보다 이해가 잘 간다. json object 가 그런 형태이기 때문이지...
• 면접 준비에 정신을 못차리겠다... 태스크 포커스를 잘 맞춰서 평소에 하던 것이 무너지면 안되는데 면접 준비하니까 평소에 하던게 무너지는 것이.. 두렵다.... 딥다이브 언제 다 읽어...ㅠㅠ