[TIL]항해 45일, 그동안의 기록(1)

#클론 코딩이 일찍 끝나고 시간의 여유가 생겨서

  항해 기간동안 배운 기능들을 정리해보려고 합니다~!

 

로딩 화면 구현

```Page.js```
const Page =()=>{

const [loading, setLoading]= useState(true);

  React.useEffect(() => {
   let timer= setTimeout(()=>{
      setLoading(false)
  },300)
}, []);

return (

{loading?(<Spinner type={'page'} is_dim={true}/>):<>(보여주고 싶은 페이지)</>)

);
};
export default Page;

 

-useState를 사용해서 초기에 true값을 주어 준비해둔 Spinner페이지를 보여주고 setTimeout으로

시간을 주여 충분히 보여주었습니다.

뚜벅초가 뚜벅뚜벅!

-setTimeout으로 시간을 준 이유는 로딩 시간을 버는 것도 있지만 Spinner에 넣어준 이미지가 gif파일이기 때문에

충분히 보여주고 싶어서 시간을 주었습니다.

 

좋아요 기능

 

```Page.js```(import는 따로 표기 안했습니다~!)

const Page = ()=>{

	const history = useHistory();
	const dispatch = useDispatch();

	const [like, setLike] = useState(false);
   	const [Heart,setHeart]= useState(props.like_id.length);
    
   	const is_token = localStorage.getItem("token")?true:false;
     
   useEffect(() => {
       setHeart(props.like_id.length)
       let is_like =false
       props.like_id.map((c,idx)=>{
      		if(c===name){
       	is_like =true;
        	  return
      		};
  		});
       setLike(is_like?is_like:false)
   		}, [props.like_id.length])
   
   	const toggleLike = () => {
        if (!is_token) {
            window.alert("로그인 해주세욥!")
          return;
       };
       setLike(!like)
       dispatch(actionCreators.LikeDB(props.id, name));    
   };
   return(
   <>
   <Like like={like} onClick={toggleLike} />
                    <div className="datePostHeart">
                         <p>{Heart}</p>
   </>
   );
};
export default Page;

Like.js 에서 like라는 불린 값을 받으면 준비된 이미지 2개 중 해당되는 이미지를 하나 보여주었습니다.

src={like?Heart:emptyHeart}

그리고 리듀서를 사용해서 실시간으로 값이 바뀌는 것을 나타냈습니다. 새로고침할 경우에는 리듀서 값은 날아가지만 

그 때는 서버에서 변경된 값을 보여주기 때문에 자연스럽게 좋아요 기능이 사용되는 것을 볼 수 있습니다.

액션 크리에이터와 액션, 미들웨어가 있는 곳
```post.js```(import는 생략하겠습니다.)
const EDIT_LIKE = "EDIT_LIKE";
const editLike =createAction(EDIT_LIKE, (post_id,post_like) => ({post_id,post_like}));

const initialState = {
like: [],
};

const LikeDB = (post_id, user_id)=>{
    return  function(dispatch, getState, {history}){
        
      if(!post_id)
      {
        console.log("게시물 정보 앖음")
        return;
      }
      const token = localStorage.getItem('token');
      let is_like=false
      const _post_idx = getState().post.list.findIndex(p=>p.id ===post_id);
      const test =getState().post.list
      
      const _post = getState().post.list[_post_idx];
      
     const _post_like = _post.like_id
    
     _post_like.map((c,idx)=>{
        if(c === user_id){
            is_like= true;
            console.log("있니?")
        } 
    })
    if(is_like){
    const idx = _post_like.findIndex((p)=> p ===user_id);
    console.log("있니?")
    const post_like =_post_like.filter((l, i) => {return idx !== i;})
     api.put(`/api/deleteLike/${post_id}`, null,
            {
                headers: {
                    Authorization:
                        `Bearer ${token}`
                }
            }
        ).then(function (response) {
                   })
    dispatch(editLike(post_id,post_like));
    }else{
      const post_like = [..._post_like,user_id]
        api.put(`/api/editLike/${post_id}`,null,
      {
          headers: {
              Authorization:`Bearer ${token}`
          }
      }
  ).then(function (response) {
   
      });

      dispatch(editLike(post_id,post_like));
      }
    }
  }
  export default handleActions(
    {

미들 웨어에서 버튼을 누를 때마다 db로 좋아요 내용을 보내주는 방식으로 기능을 구현했습니다.