[React] 4 주차

1. Firebase

yarn add firebase

- BaaS: 벡엔드 부분을 빌려오는 것 

 

2. Firestore 

- noSQL
- collection(document모임)  & document(딕션너리 하나)로 구성
- promise 요청한 정보가 구성되어 있는 것 ; 언젠간 답변을 주겟거니,,,,,
*async(비동기처리를 하려는 친구)  await(작ㅇㅂ이 끝나고 결과를 가져올때까지 기다리는애)
- dash보드에 컬렉션 없어도 react에서 추가해주면 자동 생성됌

 

 

[기본 방식]

React.useEffect(async()=>{
    console.log(db);

    //추가하기
    addDoc(collection(db,'buckets'), {text: 'nepeat도 되니?', completed: false})

    const docRef = doc(db, 'buckets', 'ytcHQDjxaXBR9JxyTEc4');

    // deleteDoc(docRef)

    //수정하기
    // updateDoc(docRef, {completed: true})


   // 가져오기
    // const query = await getDocs(collection(db, 'bucket')); //getDocs안에는 어떤 컬렉션인지를 넣어준다! => 컬렉션 모든 데이터를 가져옴  
    // console.log(query);  // => promise로 나옴 why? 서버와 통신사이엔 답을 언제 줄 지 확신할 수 없다! (비동기통신) => async await를 사용(기다릴게~) 
    // query.forEach((doc) =>{ //=> 가지고 온 정보가 배열이 아닌 객체이기에 배열로 바꾸어 주자!
      // console.log(doc.id, doc.data())      //doc; 도큐먼트 하나하나 
    // });
  },[])

 

3. 미들웨어 

- 액션을 디스패치 - ??? - reducer 
=> 이 중간 다리 역할 
[redux-thunk]

: 객체대신에 함수를 리턴=> 기본적으로 리덕스가 객체를 디스패치하기 때문에 함수를 생성해서 디스패치 하기 전 행동을 처리해줌! (액션 디스패치 - 미들웨어에 저장 - 리듀서 업데이트) 

 

[CRUD; create read update delete] 
액션을 실행시켜! => (저장공간/미들웨어) =>리듀서 모든 컴포넌트에게 알려줘서 보여줘 

 

** firebase에 접근할때는 항상 collection => db 
** promise는 사실 비동기처리를 쉽게 해주기 위한 객체다.... 
** await 결과가 나올때까지 기다리는 친구 - async랑 짝꿍 
일종의 대기상태! 

 

[리덕스-파이어베이스 프로세스]

Action을 dispatch => 미들웨어 거쳐 firbase에서 값 변경 후 리덕스에게 알려줌=> Action Creators 실행 => Reducer 실행 => store 변경된 값을 알림

1) 액션을 디스패치 

2) 미들웨어가 파이어베이스에 값을 변경하고 리덕스에게 전달해주기 위해 Action Creator 를 디스패치

3) Action Creator는 Reducer에게 원하는 형식 값을 넘겨줌

4) Reducer가 실제로 요청을 실행!

 

** 기능이 실행되고 로드되는 페이지로 넘어오는 경우, 이미 데이터 값이 firebase에서 변경되었기 때문에 Middle Wear에서 Action Creator에 디스패치를 안해줘도 자동으로 데이터 값이 리렌더링 되면서 화면에 변경된 값이 나타나게 된다. 

---

[참고] 

[preventDefault]

: 브라우저의 구현에 의해 처리되는 기존의 액션(동작)이 진행되지 않고, 결과적으로 해당 이벤트가 발생하지 않는다.

1. a 태그를 클릭해도 원하는 href링크로 이동하지 않게 하기. 

2. submit 태그를 클릭해도 창이 새로고침(reload)되지 않게 하기.

 

** firebase에 접근할때는 항상 collection => db 
** promise는 사실 비동기처리를 쉽게 해주기 위한 객체다.... 
** await 결과가 나올때까지 기다리는 친구 - async랑 짝꿍 
일종의 대기상태! 

 

[location]

- 현재 페이지 정보

 

**location.href vs location.replace
1) location..href;  새로운 페이지로 이동 (기록o/뒤로가기o)
ex) location.href='gocoder.php' 

2) location.replace; 기존 페이지를 새로운 페이지로 변경시킨다. (기록x/뒤로가기x)
ex) location.replace('gocoder.php')

 

[input에 focus주는 법 ]

1) 정적인 방법
- input박스에 autofocus 넣기
ex)

<input type='text' onChange={onChange} name='word' value={inputs.word} autoFocus />

2) 동적인 방법
- ref와 useEffect에 current.focus이용! 

ex) 

 React.useEffect(() => {

        if(word_text){

            word_text.current.focus()

        }      

    }, []);

 

[동기 vs 비동기]

- 동기: 서버에서 요청을 보냈을 때 응답이 돌아아야 다음 동작을 수행 
- 비동기:  요청을 보냇을 때 응답상태와 상관없이 다음 ㅗㅇ작을 바로 수행