TIL / 20210705

📌오늘한 것

오늘은 파이어베이스의 스토리지 서비스를 사용해 이미지 업로드 기능을 만들었다. 그리고 세션을 부여하여 권한이 있는 사람(작성자)이 작성글을 수정할 수 있는 기능을 만들었다.

어젯밤 잠을 많이 못자서 낮에 졸음이 쏟아졌다. 내일은 덜 졸리도록 TIL을 얼른 적고 자야겠다.

오늘 학습한 내용 중에서도 게시글 목록 만들고, 게시글 추가하는 과정에서 기록할만한 내용을 적어본다.

게시글 목록 만들기

1) redux/modules/post.js 만들기

-'redux-action'
이 과정에서 redux-action 패키지를 사용해봤다. redux-aciton을 쓰게 되면 비슷한 구조를 가진 redux에 비해 코드가 절반으로 줄어든다.

액션생성 함수는createAction으로 하게 되고, 리듀서는 handleActions가 담당하게 된다.
그리고 hadleActions를 사용할 때면 추가데이터 이름은 항상 action.payload가 된다. 그래서 redux-logger로 내용을 로그로 찍어보면
데이터가 payload라는 이름으로 들어간 것을 볼 수 있다.

다만 redux-action은 TypeScript 환경에서는 타입체크가 약하다고 하니 나중에 TypeScript를 공부할 때 주의깊게 봐야겠다.

-여러 action creator 묶어서 export 하기

// action creator export
const actionCreators = {
  setPost,
  addPost,
};

export { actionCreators };

export할 때에는 여러 action creator를 export 할 수 있다.

2) redux/configStore.js에 있는 루트 리듀서에 새로 만든 리듀서 추가하기

3) 게시글 목록에 연동하기

파이어스토어 연동하기

파이어스토어란 구글에서 제공해주는 플랫폼 서비스로 인증인가,DB,스토리지 등을 사용할 수 있는 서비스이다.

파이어스토어 연동하기 위한 방법은 공식문서에서 자세히 확인할 수 있다.
파이어스토어의 Collection에는 데이터를 저장하는데, 그것을 Document라고 한다. Document는 Key, Value로 구성되어 있다.
그리고 컴포넌트에서 호출 가능하다.

포스트 작성하기

게시글을 작성하고 파이어스토어에 저장하는 과정에서
포스트를 작성하고 목록으로 되돌아 올대 꼭 파이어스토어에서 데이터를 다시 가져올 필요가 없다. 추가한 데이터만 리덕스에 추가해주면 요청을 하나 덜 보내게 된다.

작성한 글을 넘겨줄 때에는 useState를 사용해 텍스트 내용을 저장하고,

...
const [contents, setContents] = React.useState('');
...

const changeContents = (e) => {
    setContents(e.target.value);
}
....

Input 컴포넌트에 넘겨준다.

...
<Grid padding="16px">
    <Input _onChange={changeContents} label="게시글 내용" placeholder="게시글 작성" multiLine />
</Grid>
...```

>작성한 포스트 firestore에 넣기

파이어스토어에 값을 저장할 때 moment 패키지를 사용하여 insert_dt라는 변수로 포스팅 시간도 넣어줬다. 자세한 내용은 moment [문서](https://momentjs.com/)를 참고하자

저장하고 나면 리덕스에도 넣어준다. 이때 포스트를 작성한 순서대로 넣고 싶다면 push가 아닌 unshift로 배열의 맨 앞에 데이터를 넣어준다.
```js
[ADD_POST]: (state, action) => produce(state, (draft) => {
        // unshift는 배열 맨 앞에 데이터를 넣어줘요!
         draft.list.unshift(action.payload.post);
    }),

튜터님께서 이런 기능을 만들 때 기능마다 데이터가 어떻게 변할지 고민하고 만드는 습관 기르기를 강조하셨다. 내일 복습할 때 이 점을 고려해서 만들어 봐야겠다.

팀원 중 한분이 좋은 수면 습관을 알려주셨다. 수면 단위가 1.5 시간이기 때문에 6시간, 7시간 30분, 9시간 단위로 자면 좀 더 깊이있게 잔 듯한 느낌을 받을 수 있다는 것이다.

오늘부터 팀원분이 알려주신 이 방법대로 잠을 자보려한다.🤗