뇌 채우기 공간

리액트가 만들어진 배경 리액트가 뭐냐?! 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, AIP통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야한다. JavaScript DOM을 변형시키기 위해서 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택한 뒤 특정 이벤트가 발생하면 변화를 주도록 설정한다. 인터렉션이 자주 발생하면 규칙이 다양하고 관리도 힘들다. Ember,Backbone,AngularJS 프레임워크 자바스트립트의 특정 값이 바뀌면 특정 DOM의 속성이 바..

로드가 되었는지 안되었는지 로드를 바꿔주는 액션 만들어서 단어 추가와 단어 삭제 시에도 스피너가 나오게 해보자! 2021.06.30 - [WEB/REACT] - [REACT] Material UI를 설치하고 로딩하기 전에 스피너화면 보여주기 (1) 리덕스에서 액션만들기 (2) 기본 변수 설정 (3) 액션 생성함수 (4) 리듀서 (5) 파이어베이스와 통신하는 곳에서 단어를 추가하기 전에는 isLoaded를 false로 설정하고 add한 후 then에서 isLoaded를 true로 설정 words.js 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626..

https://material-ui.com/ Material-UI: A popular React UI framework React components for faster and easier web development. Build your own design system, or start with Material Design. material-ui.com 1. 패키지 설치 yarn add @material-ui/core @material-ui/icons 2. Spinner만들기 Spinner.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 import React from "react"; import styled from "s..

(1) 버킷 리덕스에 상태값 넣기 완료하기 버튼 (2) 완료하기 버튼을 단다. (3) 액션 만든다. (4) 액션 생성함수를 만든다 (5) 리듀서를 만든다 (6) 버튼을 누르면 액션을 호출한다. 완료했으면 색을 바꿔주자! BucketList.js에서 completed라는 변수를 ItemStyle에 넘겨주자 props로 completed값을 받아와서 완료됐으면 색을 바꿔주도록 한다. 프로그래스바를 만들어주자!! 이렇게 생긴 친구를 만든다 안에 있는 보라색은 완료한 비율에 따라서 width값이 바껴야하니까 이렇게 count라는 변수를 만들어주고 HighLight에 width값을 넘겨주고 HighLight에서 props로 받아온다. 코드보기 App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14..

keyframes 사용하기 yarn add styled-components App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 import React from 'react'; import './App.css'; import styled, {keyframes} from "styled-components"; function App() { return ( ); } const boxFade = keyframes` 0% { opacity: 1; top: 20px; } 50% { opacity: 0; top: 400px; } 100% { opacity:..

리덕스에서 FireStore 데이터 사용하기 firestore데이터를 리덕스 스토어에 넣으려면 미들웨어 설치! firestore에서 데이터를 가져올때 비동기 통신을 함 리덕스에 비동기 통신을 할 때 필요한 미들웨어를 설치해주어야한다. 미들웨어란? 리덕스 데이터를 수정할 때 액션이 디스패치되고 리듀서에서 처리하는 과정이 있다. 미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 역할을 한다. 액션이 일어나고 -> 미들웨어가 할 일 하기-> 리듀서에서 처리 yarn add redux-thunk redux-thunk는 무엇을 하는 미들웨어인가? 액션생성함수가 무엇을 반환하지? 액션 객체를 반환한다. redux-thunk는 객체 대신 함수를 생성하는 액션 생성 함수를 작성할 수 있게..

create, update, delete에 firestore적용하기 순서 파이어베이스랑 통신 리듀서 고치기 필요한 곳에서 import후 사용 (1) 파이어베이스와 통신 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // 파이어베이스랑 통신하는 부분 export const addBucketFB = (bucket) => { return function (dispatch) { console.log(bucket); // 생성할 데이터를 미리 만들게요! let bucket_data = { text: bucket, completed: false }; // add()에 데이터를 넘겨줍시다! bucket_db .add(bucket_data) ..

데이터 추가하기 bucket.add({ text: "수영 배우기", compeleted: false }); 콜렉션이름 = bucket text, completed = 지정해주었던 필드명 데이터 수정하기 bucket.doc("bucket_item").update({ text: "수영 배우기", compeleted: false }); bucket_item = 도큐먼트 id 해당 id의 문서 변경 데이터 삭제하기 bucket.doc("bucket_item").delete([도큐먼트 ID]); 콜렉션 이름을 바꾼다면? const bucket = firestore.collection("buckets"); bucket.doc("bucket_item").set({ text: "수영 배우기", compeleted: f..

파이어베이스 https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 1) 프로젝트 만들기 (2) 파이어스토어 파이어스토어란? Firebase에 포함되어 있는 서비스 중 하나로 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스 Collection: 문서(다큐먼트)의 집합 Document: JSON 형식으로 데이터를 저장할 수 있음 프로젝트를 선택하고 Cloud Firestore에 들어간다. 데이터베이스를 만든다. localhost에서 수정할 수 있게 테스트 모드로 시작한다. 나라를 지정해준다. (3) 데이터 저장 나는 컬렉션 이름은 my..

프로젝트 만들기 yarn create react-app project name 스타일컴포넌트 설치 yarn add styled-components import styled from "styled-components"; 라우터설치 yarn add react-router-dom import { withRouter } from "react-router"; import { Route } from "react-router-dom"; 리덕스 설치 yarn add redux react-redux (index.js) import { Provider } from "react-redux"; // 연결할 스토어도 가지고 와요. import store from "./redux/configStore"; ReactDOM.rend..