DEVLOG

◎ SPA ◎ 라우팅 ◎ 리액트라우터 ◎ Route컴포넌트 + Route하나에 여러개의 path 설정하기 ◎ Link ◎ NavLink ◎ Switch 라우터에 대해 알아보기에 앞서서 SPA에 대해서 먼저 알아보자~! SPA ( Single Page Application ) 한개의 페이지로 이루어진 애플리케이션을 뜻한다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고 페이지를 로딩할때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주는 식으로 동작한다. 이때마다 트래픽이 많이 발생하고 사용자가 몰리면 서버측에 높은 부하가 쉽게 걸릴 수도 있다. 그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 브라우저에 불러와..

문득 import 문에서 궁금한 점이 생겼다. 어떤 것은 그냥 import하고, 어떤 것은 중괄호{ } 안에 적어준다는 것이다. 그동안 별 생각 없이 다운받은 패키지에서 가져올 때는 {}를 붙이고~ 내가 만든거에서는 {}없이 하니 잘되네~ 라고 생각했었는데 왜?라는 생각을 해본적이없었다! 그래서 찾아봤다 :) import React from 'react'; import TodoTemplate from './components/TodoTemplate'; import { TodoProvider } from './TodoContext'; 이 파일은 이제부터 React와 TodoTemplate, TodoProvider라는 변수를 사용할 수 있다. 그런데 아래 두개를 기준으로 볼때 TodoTemplate도 내가 ..

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)는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새..