φ(．．;) φ(．．;)

웹개발

• Firebase (2)

  웹개발/Firebase 2021. 1. 17. 01:09

  - Database Setup · Cloud Firestore · 테스트 모드로 시작하기 · fbase.js에서 import "firebase/database"; 추가 · Cloud Firestore의 database는 NoSQL database · 많은 것들을 프로그램하지 않아도 되고, 유연함을 가지고 있지만 몇 가지 제한 사항이 있음 (1) Collection과 Document가 있음 Collection은 기본적으로 폴더와 같음 Document는 컴퓨터에 있는 문서 같은 것 (doc 문서 같은 텍스트) 하나의 database는 collection들을 가지고 있고 각 collection은 documents들을 가지고 있음 (2) firebase.google.com/docs/reference/js/fir..

  Read More
• Firebase (1)

  웹개발/Firebase 2021. 1. 15. 02:45

  - jsconfig.json 파일 생성 create-react-app.dev/docs/importing-a-component/ Importing a Component | Create React App This project setup supports ES6 modules thanks to webpack. create-react-app.dev - Firebase 인증 firebase.google.com/docs/reference/js/firebase.auth auth | JavaScript SDK | Firebase Reference for auth firebase.google.com - setPersistence 사용자들을 어떻게 기억할 것인지 선택할 수 있게 해줌 React Native 앱과 웹 브라우..

  Read More
• React Hooks (3)

  웹개발/JavaScript 2021. 1. 12. 18:34

  - useScroll · 때때로 유저가 스크롤 해서 무언갈 지나쳤을 때 색상을 바꾸거나 무엇이든지 할 필요가 있음 import React, { useEffect, useState, useRef } from "react"; import ReactDOM from "react-dom"; const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({y: window.scrollY, x: window.scrollX}); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.r..

  Read More
• React Hooks (2)

  웹개발/JavaScript 2021. 1. 10. 13:14

  * Use Effect · useEffect는 componentWillUnmount와 componentDidMount, componentWillUpdate와 비슷함 · useEffect는 2개의 인자를 받는데 첫 번째 인자는 function으로써의 effect 두 번째 인자는 deps, deps가 있다면 effect는 (deps) 리스트에 있는 값일 때만 변하도록 활성화 import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; const App = () => { const sayHello = () => console.log("hello"); const [number, setNumber] = useState(0..

  Read More
• React Hooks (1)

  웹개발/JavaScript 2021. 1. 6. 22:41

  · 리액트의 신박한 기능으로 state, component에 대한 것들을 바꿔놓을 예정 · functional component에서 state를 가질 수 있게 해줌 · 앱을 리액트 훅으로 만든다면, class component, did mount, render ... 이런 것들을 하지 않아도 됨 · 모든 것은 하나의 function이 되는 것 (functional programmimg 스타일이 된다는 뜻) · 훅의 역사는 recompose 라이브러리에서 시작됨 (함수형 프로그래밍이고, state를 줌) · 즉, recompose + 리액트팀의 결합 = 리액트 훅 - React Hooks를 사용하지 않는 경우 import React, {Component} from "react"; class App exte..

  Read More
• ReactJS: props, state

  웹개발/JavaScript 2021. 1. 6. 17:31

  * props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값 자식 컴포넌트에서는 props를 받아오기만하고, 받아온 props를 직접 수정할 수는 없음 자신이 받아온 props 값은 this. 키워드를 통하여 조회할 수 있음 ex) {this.props.name} * state : 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있음 동적인 데이터를 다를 때 사용

  Read More
• ReactJS로 영화 웹 서비스 만들기

  웹개발/JavaScript 2021. 1. 4. 23:18

  [노마드코더] ReactJS로 영화 웹 서비스 만들기 - HOME - ABOUT - 영화 제목 클릭 : 각 영화의 전체 설명을 볼 수 있음 - 웹 사이트 501501.github.io/movie_app/#/ Movie App 501501.github.io - 소스코드 github.com/501501/movie_app/commit/33528090ff38de487a8950197284b6af7fa18eff #2.0 movie_app · 501501/movie_app@3352809 ... github.com

  Read More
• ReactJS (5)

  웹개발/JavaScript 2021. 1. 4. 21:38

  * Fetching Movies from API · axios : axios는 마치 fetch 위에 있는 작은 layer 터미널에 npm install axios 하여 설치 //async //javascript에게 componentDidMount 함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 말해주고 그걸 기다려줘야 함 async componentDidMount(){ const movies = axios.get("https://yts-proxy.now.sh/list_movies.json"); } * Rendering the Movies getMovies = async () => { const movies = await axios.get("https://yts-proxy.now.sh/list_movies..

  Read More