TIL(22.05.09)

TypeScript 설치

새로운 프로젝트 생성

npx create-react-app my-app --template typescript

yarn create react-app my-app --template typescript

기존 프로젝트에 씌우기

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

yarn add typescript @types/node @types/react @types/react-dom @types/jest

기존의 ~.js -> ~.tsx 후 restart your development server

axios

axios란?

Promise API를 활용하는 HTTP 비동기 통신 라이브러리

• GET 요청

onst axios = require('axios');

// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });

// 선택적으로 위의 요청은 다음과 같이 수행될 수 있습니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });  

// async/await 사용을 원한다면, 함수 외부에 `async` 키워드를 추가하세요.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Array.at()

ES 몇에 추가된지는 정확히 모르겠지만, 양수, 음수를 모두 이용해서 해당 인덱스에 해당하는 값에 바로 접근이 가능하다. 음수를 대입시 뒤에서부터 접근을 할 수 있어서, 유용해 보인다.

const array = [1, 2, 3, 4, 5]

console.log(array[array.length - 1]
// expected: 5
console.log(array.at(-1))
// exptected: 5