TIL (주특기 심화)

jake·2021년 10월 8일

TIL 항해99

TIL

목록 보기

12/54

오늘의 결론

주특기 심화 3주차

오늘 배운 것

3-2강

redux post.js 모듈생성 -> configureStore에 연결(import, combineReducers) -> postlist 컴포넌트에 연결 (import useSelector form "react-redux") -> console확인 후 -> 데이터가져와서 map돌리고 key적용

3-3강
FireStore홈페이지에서 임시데이터 생성(형식에 맞게) ->
firebase파일에서 firebase import , 상수 생성, export하기

-> post.js가서 미들웨어 getPostFB생성 후 export (아래 한꺼번에 해주는곳에)

-> 이제 이 데이터를 사용할 Postlist에가서 아래 내용 적용

-> get PostFB가서 콘솔 확인-> initialState와 firebase에 데이터 유형확인 -> 유형 맞춰주고 -> 리덕스로 넣기위해서 다시 dispatch(setPost)할꺼니까 setPost에 들어갈 post_list는 배열이다. 빈배열을 만들어서 push해주자.) 그리고 dispatch(setPost)되면 reducer (handleActions로 갈꺼니까)에서 return을 써주면된다.유형 맞춰줄 때 좀더 고수답게 reduce사용한다한다 reduce내장함수 알아보기
reduce는 ㄹㅇ 너무어렵다.

3-4강

로그인 페이지 안넘어가게하고 페이지 새로만들어서 history.replace 썼다.(근데 history 가져올때 const {history} = props 로 가져왔는데 이거뭔지모르겠따.
입력값 받을때 어떻게? setState, React.useState사용한다. 그리고 임력값 받는 onchange에 넣을 함수 만들어서 _onChange = () => {onchangeContents} 해주고 함수는
const onChangeContets = (e) => setState(e.target.value)해주면 끝

3-5강

모멘트 패키지 설치 -> 날짜 시간 등을 편하게 다루기위해서 docs 강추라서 한번보란다.
자 이제 다시 포스트 입력값 받은거 파이어 스토어에 넣어줘야한다. 모듈 post에 가서 FB 함수를 만들었다. 근데 여기서 데이터 유형을 먼저 알아야한다. initialPost보면 주석처리해놓은 것들은 user.js에서 가져오거나 나중에 넣을 것들이고 실질적으로 우리는 contents랑 comment_cnt, insert_dt만 넣으면된다. 추가하는 거니까 FB함수에 contents값 인자로 받아야한다.

데이터들을 변수에 넣어준다.( user_info, _post) 이때 user_info는 user.js에서 데이터 받아오기로 했으니까 getState().user.user 로 가져온다. 리덕스에서 데이터 받아오는거다.

그리고 이제 firebase에 추가해줘야하니까 일단 firestore.collection으로 firebase부터 불러온다.
불러온거에다가 .add로 데이터들 변수 해준고 넣어주고 then해주기.
PostDB.add({데이터들}).then((doc) =>{ }).catch((err) => {console.log("에러")})
then 다음에 들어가는 doc는 내가 add해준 데이터들 이라고 보면된다. catch는 보고 따라써라 오류잡는거다. 근데 add해주기전에 콘솔로찍어보자. 콘솔찍고 return쳐주면 아래 부분은 실행안되고 콘솔까지만 실행되니까.

콘솔 찍히는거 확인했으면 콘솔 return지워주고 그대로 다시 firebase에 들어가는지 확인
이제 리덕스에다가 추가할꺼다

핵심은 리덕스와 파이어베이스 데이터 유형이 똑같아야한다. 리덕스 유형은 Post에서 따왔다

3-6,7강 (여기서부터 git hub올려야함)

이미지파일업로드

사이트에서 firebase Storage 룰 변경/ images파일추가
vs코드 firebase 파일에 firebase/storage 변수생성,import, export,
input 태그는 파일리스트 객체와, onchange함수를 사용
ref태그로도 가능
파일업로드 방법은 firebase사이트가서 웹 드가서 파일업로드 찾아서 확인하기
참조파일 만들고, put()메서드 사용하라함
url 가져올 수 있음. 이url을 리덕스로 넘길 것
image.js, post list 정렬법

3-8강

이미지 미리보기

Upload.js에서 Onchange걸린 함수 selectFile에 file reader 사용, 콘솔로 결과까지 확인
콘솔로 나온 데이터 개긴 문장 확인했으면, 이제 이미지가 나오는 부분을 생각해보자.
데이터가 PostWrite의 Image에 props로 받아야 화면에 나타날 수 있다. 즉, 리덕스로 데이터를 관리해야한다. 리덕스를 만들러가보자.
리덕스 만든다. 뭐부터? 액션, 액션 크리에이터, 리듀서 순서다. 아 initialState에 preview 초기값을 null로 만들어주는 것도 잊지말자. 연습겸 한번 써본다.

const SET_PREVIEW = "SET_PREVIEW" //액션
const setPreview = creatAction( SET_PREVIEW, (preview) => {preview})
export default handleCreation({
	[SET_PREVIEW] : (state,action) => preduce(state, (draft) => {
	draft.preview = draft.payload.preview
})
},initialState)

actioncreator = {
	setPreview
}
export {actioncreator}