7) React Project - Instagram Clone coding

★

 

- firebase DB에 등록 ㄱㄱ

- Redux 잘 쓰면 멍청한짓을 면한다... 

---

 

이래 만들었잖음..?

 

이제 저기 데이터 입력해서 sign up하면 firebase에 등록이 되고

입력해서 Login되면 firebase에 등록된 회원인지 비교를하는걸 만들어야함

 

원래 백엔드 서버쪽을 이렇게 하는게 아닌데.. 그 기능을 저기 구글에서 만든 firebase에서 번거로운 인증절차는 다 손봐주니깐.. 일단 얻어갈건 분명 있음

 

---

데이터 넣고~ 아 빼고~

	이미 알고 있는 onChange()를 쓸거다 이건 내가 입력한걸 보게 할수도 있고 어딘가로 던져줄수도 있다 내가 입력한 값을 담을 useState를 빈값으로 만들고  onChange() 써서 입력값 담게 함. 별로 크게 중요하진 않은데..
	어차피 똑같으니 가입하는곳에도 복붙 뭐 여기까진 아는건데.. 조금 햇갈리는 부분을 정리 해야겠으

---

이제 사용자를 생성할건데

이미 공부 했던거 정리하는 차원에서.. ★  Redux를 사용할거다

	설치... 상태관리 라이브러리다 이렇다.. 라고 공부 했었음
	src안에 app과 features 폴더를 만들어 줬다 - app 폴더 :    - features 폴더 :
	app에는 store라는 저장소 파일을 만들었다 store라는 이름으로 스토더 객체를 만든다음 리듀스 설정을 해주는데 이는 스토어의 상태를 어떻게 업뎃 할지 정의 하는 함수로써 date라는 키와 root라는 값으로 설정을 한다  요약 : 이 코드는 date 키를 가진 상태 값을 관리하는 Redux 스토어를 설정합니다. 스토어는 configureStore 함수를 사용하여 쉽게 만들 수 있으며, "root" 리듀서를 사용하여 상태를 업뎃
	index.js 파일로 들어가 안쓰는 저 수적해놓은건 지우고 Provider와 store import 해준다음 <App />을 Provider로 감싸고 < Provider/> 안에 아까 store를 넣어 준다 이렇게 하면 어떻게 되냐면 props 전송이 없어진다 최상위 부모에서 최하위자식과 연결 하려면 하나하나 타고가야 하는데 그럴필요없이 그냥 뽝!
	그 다음 reducers 파일로 넘어와 combineReducers를 import 해주는데 rootReducer란 이름으로 리듀서를 내볼거다 user라는 키에 slice라는 리듀서를 결합하는데 이 slice는 일반적으로 특정 영역의 상태를 관리하는 리듀서를 말한다 요약 : 이 코드는 user 키를 가진 상태 값을 관리하는 rootReducer라는 리듀서를 만듭니다. 이 리듀서는 combineReducers 함수를 사용하여 user 키로 slice라는 리듀서를 결합

Redux를 왜 쓰고
어떻게 쓰며
어떤 활용이 가능한지
잘 알아야된다
현업에서 많이 쓰이니깐 

근데.. 클론코딩 이건

사용법이 아닌 현업버전의 뭔가..

실전 느낌이고

내가 애플쌤한테 배운건 그냥

일케일케 하는거에요~ 응용은 니가 공부해야되요~ 느낌이라

사용법 배우고 현업버전인 클론코딩을 하니깐 눈에 들어오는게 다름

---

왜 이렇게 쓰는건지 알아야 따라 써도 쓰는거고

응용을 해도 하지 않겠는가 싶음..

	Redux Toolkit을 사용해 유저관련 상태관리를 위한 리듀서 슬라이스를 정의 하는 부분이다 createSlice 함수는 reducer, action, state, action type 등을  통합한 슬라이스를 쉽게 생성할수있게 해주는데 보면 먼저 initialState에 유저 상태 초기값을 정의해준다 user는 현 유저 객체, isLoading은 데이터를 불러오는 중이냐 아니냐를 정의 해주는거 그럼 이제 userSlice변수에 createSlice 함수를 사용해 리듀서 만들어 저장하자
	리듀서 슬라이스 이름을 user라 정의, 아까 정의한 초기 상태, 액션에 따라 상태를 변경하는 리듀서 함수 정의하는 객체, { loginUser 액션 발생 시 실행되는 리듀서 함수인 loginUser는 액션의 payload(데이터)를 user상태에 저장한다는 것 logoutUser액션 발생 시 실행될 리듀서 함수인  logoutUser는 user 상태를 null로 초기화 시킨다 setLoading 액션 발생 시 실행될 리듀서 함수인 setLoading은 액션의 payload(true/false)를 isLoading상태에 저장 }
	마지막으로 이렇게 리듀서 슬라이스를 제공하는 액션 생성자만 따로 추출해 내보내는것으로 로그인, 로그아웃, 로딩 상태 등 유저관련 데이터를 관리하는 Redux Tookit 리듀서 슬라이스를 정의 해 봤다

그러니깐 이거 props를 쓰면 전역으로는 못쓰니깐

이 Redux Toolkit을 사용해서 전역으로 쓸수있게 도와주는녀석일 뿐이다

그럼 전역으로 쓰려면 어떻게해야됨?

 

<유저관련된거만 전역으로 쓴다치고...>

- 유저상태 초기값 정의하고

- 데이터 불러오는동안 로딩시간이란게 있으니 로딩도 정의해주고

- 슬라이스를 만들어줘. 이슬라스명은 user고, 아까 기본정의 한거 불러다 넣고, 리듀서를 만드는데

- loginUser, logoutUser, setLoading등 만들어 줘

 

이제 정의를 다 내렸으면 reducer에 갖다 넣어줘야지

---

	저자리에 슬라이스 들어간다고 해놨지?
	import해서 넣어주는것으로 끝! 이로써 이둑스 작업은 끝이 났고  앞으로 뭐 또 필요하다면 이렇게 하면 된다. 모든걸 이걸로 할필요는 없고 전역으로 값을 내리고 올리고 해야 할땐 이거 쓰자 props 써야 할곳에선 props 쓰는게 좋다

 

몸으로 격어봐야 할듯. .

---

	자 이제 여기로 돌아 왔다 여기 App 메인페이지다 인증하고 맞는 페이지를 보여줘야 할 차례다
	useSelector() 이것은  import { useSelector } from "react-redux"; 해야 쓸수있는 훅인데 로그 찍어 보면 으잉? 왜
	여기 요거 나와야 하는데?
	저기서  userSlice에서 reducer 쓴다 해줘야 함
	그럼 나온다 그런 내가 써야 할건 저기  user니까
	해주고. . 유저가 존재하면 Hompage로 가고 null이면 인증페이지로 남고 를 만들어 주자
	인증이 안되 여전히 null이기때문에 false가 되서 화면은 홈페이지를 보여주지 않는상황이 된다

---

	만약 여기 user기본 정의란에서 user키에 값을 강제로 username를 줘버린다면?
	오오 진입이 된다! 이거 그러니까 뭔 라우팅 지정한거 아니고 인증절차 정의만 내려서 true냐 false냐로 나눠 화면을 이래 보여주는거잖음?
	이 난리를 피울 필요가 없는거네 이거... 와 지금 몇줄 안쓰고 인증하는거 만들어서  소름이 돋아 나고 있는중. .  유저임? 아님? 만 판독해서 어디로가고 저리고 가고 하면 되는거구만...... 멍청한 짓을 했구만 내가
	자 그럼 여기엔 이것만 해주면 되는거 아녀? 맞으면 넣고 틀리면 null이구나 참