WIL #10

1. React

 

1) 이번주 배운 내용

1-1) 리덕스

리덕스 구조를 실전으로 익히게 되었다. 여전히 좀 헷갈리는게 적지 않으나 이번 기회에 제대로 공부 좀 하고 넘어가야겠다.

 

1-2) 협업

업무 진행 속도가 느려지는 걸 느낄 수 있었다....

userTest주차가 차주이고... 난이도 높은 기능들 추가하는 등 쫓기는 와중이라 다들 예민해진 상황.

항해99의 멘토로부터 MainPage 등 화면에서,

무엇을 위한 서비스인지 명확히 느끼질 못하겠다는 Feedback을 받았다.

21시에 모여 문제점 확인 & 업무 분담하게 됨.

우리팀 문제	디자이너 문제
1. 처음에 디자이너와 업무분담 명확히 안함.	1. 회의 일정 fix이후에도 회의 일정이 수시로 조절됨.
2. 웹소캣 통신 확인, 뷰 작성이 늦게 완료됨.	2. 와이어 프레임 완성 및 전달하는 데 까지 시간 오래걸림.
우리팀 업무	디자이너 업무
기능 및 뷰 구현 완료.	일러스트, 로고 제작

종합적으로 보면 양쪽 다 문제가 있었음.

 

<현재 진행상황>

그런데 마감까지 얼마 남지 않은 상황에서 계속 이대로 가다간 흐지부지 될 것 같아,

주말 간 맡은 부분 계속 코드 작성하면서 디자이너들 push함.

결과는 차주 userTest기간 거친 후 확인할 수 있을 듯.

 

2) Trouble Shooting

#1

Warning: Failed prop type: Invalid prop `children` supplied to `Unstable_TrapFocus`. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see...

-> 구글 검색 결과, 'forwardRef로 useRef를 바꾸라는 것을 볼 수 있었는데, 아무래도 원인이 useRef 때문인 것 같지 않았다.

->코드를 자세히 살펴보니 addComment(댓글 추가 이벤트)를 '댓글 작성완료' 버튼에 적용하지 않고 있었음. 

-> onClick 이벤트에 addComment 추가했더니 해결됨.

 

#2

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

-> #1의 연장선.

 

#3

Cannot destructure property 'history' of '_ref2' as it is undefined

-> Chrome 콘솔창을 확인해보니, 리덕스 모듈에 있는 comment.js의 42번째 줄에 

const deleteCommentDB = (postId,commentId) => {
    return function (dispatch, {history}){ // 여기서 에러남
        console.log(postId, commentId);

        commentApis.deleteComment(commentId)
        .then((res)=>{
            console.log("댓글 삭제 성공",res);
            dispatch(deleteComment(postId,commentId));
            window.alert("댓글이 삭제되었습니다.")
        }).catch((err)=>{
            console.log("댓글 삭제 실패",err);
            window.alert("댓글 삭제에 실패했습니다.")
        })
    }
};

return function(dispatch, {history} 부분에 에러가 난 것.

이유는 history가 쓰이질 않았는데 있어서 문제가 되었다. 삭제해주었더니 정상적으로 작동함.