DEVLOG

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다! useState useEffect useRef useMemo useCallback useReducer 커스텀 Hooks ○ useState 가장 기본적인 Hook이며 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서 state를 사용할 수 없었다. 16.8이후부터는 useState함수를 이용하여 함수형 컴포넌트에서도 state를 사용하여 가변적인상태를 지닐 수 있게 해준다. 따라서 함수형..

axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트이다. 한 번 연습해보자:) yarn add axios ** 가장 먼저 프로젝트 폴더에서 axios설치! API데이터 받아오기 먼저 API를 호출해서 데이터를 받아오는 연습을 해보자! react APP을 하나 생성하고 App.js를 다음과 같이 작성한다 import React, {useState} from 'react'; import axios from 'axios'; const App = ()=>{ const [data, setData] = useState(null); const onClick = ()=>{ axios.get('https://jsonplaceholder.typicode.com/todos/1').then(repons..

Google APIs에서 Youtube API key를 발급받아보자!! 학교다닐때 구글맵API를 여기서 발급받았었는데... 오랜만에 들어오는구나... ㅎㅎㅎ ● 먼저 Google APIs로 접속하기 https://console.developers.google.com ● 새로운 프로젝트 만들기 프로젝트명 설정후 만들기! ● 좌측 탭 라이브러리 메뉴로 이동 ● 검색창에 youtube를 검색하고 YouTube Data API v3를 눌러서 사용설정한다. ● 사용자 인증정보 만들기 위 단계를 거치면 내 APIkey가 발급된다! 짜잔~~끝~~~

class값을 갖고있는지 판단하는 .hasClass() jQuery문법을 javascript로 바꾸려면?? classList를 활용하자! classList에는 add, remove, item, toggle, contains, replace등의 메서드들이 있다 이중에서 클래스가 포함되어있는지 확인해주는 contains를 메서드를 사용하면 아주우~ 쉽게 javascript로 바꿀 수 있다! if (!$('.event-btn').hasClass('on')) return; if (!document.querySelector('.event-btn').classList.contains('on')) return; 그 외 다른 메서드 살펴보고싶다면 요기↓↓↓ developer.mozilla.org/ko/docs/Web/..