DEVLOG

세팅을 하다보면 쿠키를 이용해 작업이 진행되어야하는 경우가 있다! 지금 하고 있는 이벤트의 경우 참여여부를 확인한다던지 뭐 그런경우..?! API접근전 상태를 체크해야할 때 주로 사용해주고 있다. 이벤트를 예로 들어 설명해보자! 쿠키 저장 setCookie 이벤트 참여가 완료되면 setCookie함수를 이용해 브라우저 쿠키에 저장 function setCookie(name, value, exp) { var date = new Date(); date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000); document.cookie = name + '=' + escape(value) + ';expires=' + date.toUTCString() + ';path=/';..

Youtube API를 사용해 데이터를 뽑아오는 과정은 다음과 같다 Youtube API KEY 발급받기 (사전준비) params 설정 url에 연결 (get) 출력된 data속에서 필요한 정보만 골라오기 기본적으로 데이터를 가져오는 원리는 GET방식으로 url뒤에 파라미터를 붙여 필요한 정보를 조회하는 것이다. https://www.googleapis.com/youtube/v3/search? 그래서 위와 같은 주소 뒤에 조건들을 주룰룩 붙여서 통신하면 되는 아주 간단한 것이다!! 조건들은 Youtube API 공식문서에서 필요한 것만 골라서 쓰면된다. Params 가장 기본적으로 쓰이는 파라미터들을 정리해보면 다음과 같다. ○ key(필수) : string; - 발급받은 키 ○ part : string..

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다! useState useEffect useRef useMemo useCallback useReducer 커스텀 Hooks ○ useReducer useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook function reducer(state, action){ return {...}; } 리듀서(Reducer)는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새..

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다! useState useEffect useRef useMemo useCallback useReducer 커스텀 Hooks ○ useRef useRef의 역할은 두가지이다. 1) ref와 같이 DOM을 선택하는 역할 2) 로컬변수(렌더링과 상관없이 바뀔 수 있는 값)을 활용 1) ref와 같이 DOM을 선택하는 역할 먼저 DOM을 선택하는 역할부터 살펴보자 쉽게 생각해서 javascript의 querySelector처럼 DOM에 직접 접근해야할때 사용하..