210220_TIL

API 활용하기

API(Application Programming Interface)

보통 클라이언트(자원을 요청)가 서버(자원을 제공)에 자원을 요청해 원하는 데이터를 제공해주는데 이런 데이터를 제공 받아서 잘 활용할 수 있도록 해주는 것이 API.

출처: https://moonspam.github.io/What-is-an-API/

손님(클라이언트) -> 분식집(서버), API(알바생)

손님 -> 떡볶이 2인분 얼마에요? -> 분식집
손님 <- 떡볶이 2인분은 4000원 입니다. <- 분식집

손님 -> 파스타 주세요. -> 알바
손님 <- 파스타는 없습니다. <- 알바

API: 서버에 있는 데이터를 개발자가 활용할 수 있도록 도와주는 역할

Fetch 이용해 서버에 요청하기

1. 서버에 http 요청
2. 해당 서버에서 송신 -> 하지만 JS에선 못 알아들음
3. json을 이용해서 JS가 알아들을 수 있게 바꿔서 return

fetch('http://서버주소/weather?q=Seoul') // Promise라는 데이터를 가져옴
.then(function(resp) { // .then은 data를 읽는 역할(JS객체 형태가 아님)
  // 응답 형식에 따라 resp.text() 가 될 수도 있다
  return resp.json(); //JS에서 읽기 가능한 형태로 변환
})
.then(function(json) { // 다시 .then으로 json을 읽음
  console.log(json); // { tempature: 27 }
});

---

그러뭍기

count 활용

원하는 값을 얻거나 특정 조건을 수행 후 작업을 하고 싶을 때
재귀함수를 사용 할 때 특정 조건에서 원하는 값을 얻고 싶을 때
변수에 초기값을 주고 변수가 변할 때 조건을 주면 된다.

// 문자가 3개이상 연속되면 합친다
function compressString(str) {

  let first = str[0]
  let result = '';
  let count = 1; // count를 초기화 해준다
str = str + ' ';
  for(let i = 1; i < str.length; i++) {
    if(first === str[i]) { // 문자열의 첫번째가 str[i]와 같으면 
      count++ // count만 하나 올린다
    } else {
      if(count >= 3) { // 그래서 count가 3보다 크거나 같아지면
        result = result + first // 변수에 첫 번째 문자열을 할당한다
      } else { // 만약 문자가 3개 미만으로 반복된 경우를 위해
        result = result + first.repeat(count); // 변수에 문자열이 count된 수 만큼 다시 할당한다
      }
      first = str[i] // 첫 번째 문자는 str[i]로 교체되고
      count = 1 // 카운트도 다시 초기값을 주고
    }
// 반복한다

  }
  return result;

}

reduce로 대소 비교하기

reduce 클로저 안에 조건문을 주어서 비교한다
reduce는 꼭 축적된다는 느낌이 아니라
클로저 안에서 return된 값이 다시 초기값(보통 acc)로 간다
cur은 다음 값만 온다
반환 값에 .length와 같이 원하는 타입으로 리턴 할 수 있다

let arr = ['one', 'two', 'three']

// 가장 긴 단어 그대로 리턴
let longestWord = arr.reduce(function(acc, cur) { // 꼭 acc, cur로 할 필요 없다
  if(acc.length > cur.length) { // 그냥 acc, cur로하면 문자열이기 때문에 길이 비교가 안된다
    return acc;
  } else {
    return cur;
  }
})
console.log(longestWord) // 'three'

// 가장 긴 단어의 길이를 리턴
let longestWordLen = arr.reduce(function(a, b) {
  if(a.length > b.length) { 
    return a.length; // 원하는 방법으로 return 하는 것도 가능하다
  } else {
    return b.length;
  }
})
console.log(longestWordLen) // 5

map 클로저 안에서 고차함수 활용

배열안의 요소에 접근해서 원하는 정보만 골라내고 싶거나
골라낸 정보를 압축시키고 싶을 때 map 안에서 고차함수를 사용해 해결 할 수 있다

function studentReports(students) {

  let onlyFemale = students.filter(obj => obj.gender === 'female') // gender가 'female'인 요소만 걸러낸다

  let gradesOfFemale = onlyFemale.map(function(obj) { // map으로 걸러낸 요소에 접근
    
    let sumOfGrades = obj.grades.reduce((acc, cur) => acc + cur) // 접근한 요소에서 원하는 작업 수행

    let avgOfGrades = sumOfGrades / obj.grades.length

    obj.grades = avgOfGrades

  }) 
  return onlyFemale
}

sort()를 이용해 서로 다른 변수에 다르게 정렬하기

sort로 정렬할 때 주소값을 참조해서 정렬하기 때문에
다른 변수에 담아도 같은 데이터를 얻는다

이런점을 해결 할 수 있는 방법으론

let test = [1, 3, 2, 4, 5]
let first = [...test.sort((a, b) => a - b)] // Spread Syntax(전개구문)을 이용
let second = [...test.sort((a, b) => b - a)]

console.log(first) // [ 1, 2, 3, 4, 5 ]
console.log(second) // [ 5, 4, 3, 2, 1 ]

추가로 알게된 사실

undefined를 요소로 가진 배열을 만들 수 있다

let test = []
test[2] = 1
console.log(test) // [empty × 2, 1]
console.log(test[0]) // undefined
console.log(test.length) // 3