뇌 채우기 공간

* 김병욱님의 강연 (비밀글) - 오늘은 어제까지 잘 사용했던 아이패드 듀얼 모니터 확장이 안돼서 5시간동안 못하고 결국 포기..

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

WEEK4 프로그래스바 달기 스크롤바 움직이기 WEEK5 머테리얼 UI사용하기 스피너 띄우기 과제 이렇게 저 동그라미를 클릭하면 커지는 거 하고 싶었는데 진짜 한 하~루종일 걸려도 못했다. 근데 항해에서 천사같은 분이 가르쳐주셔서 했다. 와 진짜.. 여기서 배운점 props를 넘겨주고 속성을 넘겨줄때는 그것이 꼭 컴포넌트여야 하고 일반 div이면 안됨

로드가 되었는지 안되었는지 로드를 바꿔주는 액션 만들어서 단어 추가와 단어 삭제 시에도 스피너가 나오게 해보자! 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..