[TIL] 23.07.19 Today I Learned / axios, async, await, JSON.stringify(), 전개 연산자, isActive

요약: axios, async, await, JSON.stringify(), 전개 연산자, isActive

일시: 23.07.19 

장소: 더휴먼컴퓨터아트아카데미

배운 점:

HTML

<a> 태그의 rel 속성

• 현재 문서와 링크된 문서 사이의 연관 관계(relationship)를 명시

속성값	설명
alternate	프린트 페이지나 번역된 페이지와 같이 해당 문서의 대체 버전에 대한 링크를 나타냄.
author	해당 문서의 저자에 대한 링크를 나타냄.
bookmark	즐겨찾기(bookmarking)에 사용하는 고유 주소(Permanent URL)를 나타냄.
external	링크된 문서가 현재 문서와 같은 사이트 내에 있지 않음을 나타냄.
help	도움말 문서에 대한 링크를 나타냄.
license	해당 문서의 저작권 정보에 대한 링크를 나타냄.
next	연관된 문서들의 모음 중 다음 문서에 대한 링크를 나타냄.
nofollow	유료 링크와 같이 검색 엔진이나 봇(bot) 등이 추적해서는 안 됨을 나타냄.
noreferrer	사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP 리퍼러 헤더(referer header)를 전송해서는 안 됨을 나타냄.
noopener	하이퍼링크를 따라 연결되는 어떠한 브라우징 컨텍스트(browsing context)도 오프너(opener)여서는 안 됨을 나타냄.
prev	문서들 중에서 이전 문서를 나타냄.
search	해당 문서를 위한 검색 도구를 나타냄.
tag	현재 문서를 위한 키워드(tag)를 나타냄.

 

JavaScript

axios

•  브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
• Ajax, fetch와 같은 웹 통신 기능을 제공하는 라이브러리
• HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동으로 변경

설치방법

npm:
$ npm install axios

yarn:
$ yarn add axios

jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

기본형태

• get

axios.get('/test?name=veneas')
.then(function (response) {
	// 통신이 성공한 경우 실행
	console.log(response);
})
.catch(function (error) {
	// 에러인 경우 실행
	console.log(error);
})
.then(function () {
	// 항상 실행
});

 

• post

axios({
	url: '/test',
	method: 'post',
	data: {
		name: 'Tom'	
	}
})
.then(function a(response) { 
	console.log(response) 
})
.catch(function (error) {
	console.log(error);
});

 

async, await

- async는 function 앞에 위치하여 해당 함수가 항상 프라미스를 반환하게 함.

- 자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다림.

 

예시

function delay() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(), 1000);
    })
}

async function getApple() {
    await delay();
    return "apple";
}

async function getBanana() {
    await delay();
    return "banana";
}

async function getFruites() {
    let a = await getApple(); // 리턴값이 promise의 resolve()이므로 대입 가능
    let b = await getBanana(); // getApple()이 처리되고 getBanana()가 처리됩니다.
    console.log(`${a} and ${b}`);
}

getFruites(); // 결과 : apple and banana

 

JSON.stringify()

avaScript 값이나 객체를 JSON 문자열로 변환

const obj = {
  name: "홍길동",
  age: 25,
  married: false,
  family: {
    father: "홍판서",
    mother: "춘섬",
  },
  hobbies: ["독서", "도술"],
  jobs: null,
};

const str = JSON.stringify(obj);
-> 결과
'{"name":"홍길동","age":25,"married":false,"family":{"father":"홍판서","mother":"춘섬"},"hobbies":["독서","도술"],"jobs":null}'

 

전개 연산자( Spread Operator )

• 배열이나 문자열과 같이 반복가능한 객체를 하나씩 펼쳐서 리턴

const arr1 = [1, 2, [3, 4]];
const arr2 = [...arr1, 5, 6, 7];

console.log(arr2);
// [1, 2, [3, 4], 5, 6, 7]

 

isActive

• NavLink는 자체적으로 isActive라는 boolean값을 가지고 있어 선언하여 활성화시키고 싶은 스타일에 css를 적용할 수 있습니다. 

<NavLink to="movies" style={({ isActive }) => (isActive ? active : {})}>
        Movies
      </NavLink>

 <NavLink to="/profiles/ycLee" style={({ isActive }) => ({ color: isActive ? 'black' : 'yellow' })}>ycLee</NavLink>

 

부족한 점:

 

출처

http://www.tcpschool.com/html-tag-attrs/a-rel