개발+공부/웹
-
2.0 Introduction to useEffect useEffect componentDidmount의 역할을 해서 새로고침하면 sayHello를 실행한다. 2개 인자를 받음 - function으로서의 effect - dependency : 만약 deps가 있다면 effect (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 된다. useEffect는 여기서 componentDidMount, componentWillUpdate이다. dependency일 때만 update한다. 📌 dependency에 change가 발생할 때만 update! + useEffect로부터 function이 return된다. -> componentWillUnmount! import React, { useState, u..
#2-1 USEEFFECT2.0 Introduction to useEffect useEffect componentDidmount의 역할을 해서 새로고침하면 sayHello를 실행한다. 2개 인자를 받음 - function으로서의 effect - dependency : 만약 deps가 있다면 effect (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 된다. useEffect는 여기서 componentDidMount, componentWillUpdate이다. dependency일 때만 update한다. 📌 dependency에 change가 발생할 때만 update! + useEffect로부터 function이 return된다. -> componentWillUnmount! import React, { useState, u..
2021.01.12 -
1.0 Introduction to useState 리액트의 불편한 점 2가지 1. handling input 2. fetching data hooks는 class component, render등을 고려할 필요가 없다. import React, { useState } from "react"; const [item, setItem] = useState(1) item: 변경할 state setItem: item의 modifier Hooks vs Class component import React, { useState } from "react"; // Hooks로 구현한 경우 function App() { const [item, setItem] = useState(1); const incrementItem ..
#1 USESTATE1.0 Introduction to useState 리액트의 불편한 점 2가지 1. handling input 2. fetching data hooks는 class component, render등을 고려할 필요가 없다. import React, { useState } from "react"; const [item, setItem] = useState(1) item: 변경할 state setItem: item의 modifier Hooks vs Class component import React, { useState } from "react"; // Hooks로 구현한 경우 function App() { const [item, setItem] = useState(1); const incrementItem ..
2021.01.12 -
0.2 Introduction to Nooks Hooks functional component에서 state를 가질 수 잇게 해준다. functional programming style이 된다. 0.3 Requirements React, Node.js 지식 0.4 Workflow
#0 INTRODUCTION - 리액트 Hooks0.2 Introduction to Nooks Hooks functional component에서 state를 가질 수 잇게 해준다. functional programming style이 된다. 0.3 Requirements React, Node.js 지식 0.4 Workflow
2021.01.10 -
6.0 Getting Ready for the Router 이전에 만든 사이트를 좀 더 interactive하게 해보자. react-router-dom npm install react-router-dom components, routes 폴더 js와 css를 옮긴다. 기존 App.js의 내용을 Home.js로 옮긴다. (App -> Home 수정 필요) About.js는 아직 작성 안 된 상태 6.1 Building the Router App.js에서 Router 만들기 Router는 url을 가져다가 보고 우리가 라우터에게 명령한 것에 따라 component(page)를 불러온다. import React from "react"; import { HashRouter, Route } from "react-..
#6 ROUTING BONUS6.0 Getting Ready for the Router 이전에 만든 사이트를 좀 더 interactive하게 해보자. react-router-dom npm install react-router-dom components, routes 폴더 js와 css를 옮긴다. 기존 App.js의 내용을 Home.js로 옮긴다. (App -> Home 수정 필요) About.js는 아직 작성 안 된 상태 6.1 Building the Router App.js에서 Router 만들기 Router는 url을 가져다가 보고 우리가 라우터에게 명령한 것에 따라 component(page)를 불러온다. import React from "react"; import { HashRouter, Route } from "react-..
2021.01.10 -
5.0 Deploying to Github Pages gh-pages 설치 github page에 페이지를 올리기 위해 npm i gh-pages packages.json homepage 주소를 추가 주소는 모두 소문자여야 한다. 띄어쓰기 X npm run build 실행 - deploy할 폴더를 얻는다. 좌측 탐색기에 build 폴더가 생성됨 -> deploy할 폴더! scripts 추가 Directory build를 deploy 추가 predeploy 추가 : 매 순간 우리가 deploy를 호출할 때마다, npm은 predeploy를 호출한다. predeploy는 npm run build를 한다. build는 build script를 호출하고, 그 script는 folder를 줄 것이다. 완료되면, ..
#5 CONCLUSIONS5.0 Deploying to Github Pages gh-pages 설치 github page에 페이지를 올리기 위해 npm i gh-pages packages.json homepage 주소를 추가 주소는 모두 소문자여야 한다. 띄어쓰기 X npm run build 실행 - deploy할 폴더를 얻는다. 좌측 탐색기에 build 폴더가 생성됨 -> deploy할 폴더! scripts 추가 Directory build를 deploy 추가 predeploy 추가 : 매 순간 우리가 deploy를 호출할 때마다, npm은 predeploy를 호출한다. predeploy는 npm run build를 한다. build는 build script를 호출하고, 그 script는 folder를 줄 것이다. 완료되면, ..
2021.01.10 -
4.0 Fetching Movies from API fetch axios : fetch위에 있는 작은 layer axios 설치 npm i axios 더보기 사용할 API : YTS-proxy API (by nomad coder) yts.mx/api/v2/list_movies.json JsonView - json파일을 예쁘게 보여주는 크롬 확장프로그램 : https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related axios로 가져온 data를 변수에 저장 axios가 우리에게 data를 주지만, 우리는 그 데이터를 잡아야 한다. 그래야 state에 사용 가능. componentDidMount(){ c..
#4 MAKING THE MOVIE APP4.0 Fetching Movies from API fetch axios : fetch위에 있는 작은 layer axios 설치 npm i axios 더보기 사용할 API : YTS-proxy API (by nomad coder) yts.mx/api/v2/list_movies.json JsonView - json파일을 예쁘게 보여주는 크롬 확장프로그램 : https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related axios로 가져온 data를 변수에 저장 axios가 우리에게 data를 주지만, 우리는 그 데이터를 잡아야 한다. 그래야 state에 사용 가능. componentDidMount(){ c..
2021.01.10