[TIL] 2021/11/26 Fri -

 

 

 

 

 

 

Today I Learned

 

 

 

 

🎉 개인 과제 끝! 🎉

 

     

Main page

 

 

Add page

 

 

Detail page

 

 

 

📌 단어 카드 체크 아이콘 클릭 시 색 변경 기능 오류 해결

 

     어제 만들었던 checked 기능이 알고 보니 제대로 동작하지 않고 있었다.

 

     원래는 클릭하면 Firestore에 있는 checked 의 값이 변경이 되고, 

     변경된 데이터로 다시 State를 교체해서 데이터를 구독하는 컴포넌트에도 연동이 되어야 하는데

     알고보니 미들웨어 코드를 잘못 작성해서 클릭했을 때 Firestore의 checked 값이 변경되지 않고 있었다.

 

     그래서 체크 아이콘을 클릭해서 색을 변하게 한 후 새로고침하거나 다른 페이지로 이동하고 다시 돌아오면 

     다시 checked의 값이 false로 바뀌고, 아이콘도 다시 흰 색으로 되어 있었다.

 

     알고보니 미들웨어 함수에서 checked 키의 경로를 잘못 적었었다.

 

     아래의 이전 checked의 값이 false 또는 true 인지에 따라 다시 값을 변경해주는 삼항연산자에서

     조건문을 아래 처럼 작성하지 않고 바로 docRef.checked == false? 로 작성했었기 때문에

     항상 값은 undefined 여서 Firestore에 데이터 연동이 안 되고 있었던 것이었다.

 

     그래서 아래와 같이 다시 이전의 checked 값을 확인하는 코드를 다시 작성하였더니 

     Firestore 에도 클릭 시 checked의 변경된 값이 잘 연동되고 화면에서도 아이콘이 잘 유지되었다!

 

   

export const checkVocaFB = (voca_id) => {
    return async function (dispatch, getState) {
        const docRef = doc(db, 'voca', voca_id)
        
        const pre_voca_list = getState().voca.list;
        const voca_index = pre_voca_list.findIndex((vc) => {
            return vc.id === voca_id;
        });
        const pre_checked = pre_voca_list[voca_index].checked;

        pre_checked == false ? await updateDoc(docRef, {checked: true})
        : await updateDoc(docRef, {checked: false});

        const voca_list = getState().voca.list;
        const voca_checked = voca_list[voca_index].checked;

        dispatch(checkVoca(voca_index, voca_checked));
    }
}

 

 

 

📌 input 유효성 검사 추가

 

   그리고 input 의 유효성 검사도 추가했다.

   

   어차피 데이터 타입은 String이기 때문에 간단하게

 

   1) 입력 글자 수 제한

   2) 다섯 개의 입력란 중 하나라도 비어 있으면 추가 또는 수정이 되지 않도록 하였다.

 

 

    const updateVocaList = () => {
        window.alert('단어를 수정하시겠습니다?');
        let wordValue = word.current.value;
        let pronunciationValue = pronunciation.current.value;
        let meaningValue = meaning.current.value;
        let exampleValue = example.current.value;
        let translateValue = translate.current.value;

        if ((wordValue && pronunciationValue && meaningValue &&
            exampleValue && translateValue) !== '') {
            dispatch(updateVocaFB({
                word: wordValue,
                pronunciation: pronunciationValue,
                meaning: meaningValue,
                example: exampleValue,
                translate: translateValue,
                checked: current_voca.checked,
            }, current_voca.id));
            history.push("/");
        } else {
            window.alert('Please, fill in all blanks.');
            return false;
        }
    };

    return (
        <Container>
            <UpdateBox>
                <label>word</label>
                <TextArea type="text" ref={word} maxLength='14' 
                defaultValue={current_voca ? current_voca.word : ""} />
                <label>pronunciation</label>
                <TextArea type="text" ref={pronunciation} maxLength='20' 
                defaultValue={current_voca ? current_voca.pronunciation : ""} />
                <label>meaning</label>
                <TextArea type="text" ref={meaning} maxLength='20' 
                defaultValue={current_voca ? current_voca.meaning : ""} />
                <label>example sentence</label>
                <TextArea type="text" ref={example} maxLength='20' 
                defaultValue={current_voca ? current_voca.example : ""} />
                <label>translation</label>
                <TextArea type="text" ref={translate} maxLength='20' 
                defaultValue={current_voca ? current_voca.translate : ""} />
                <ChangeVocaButton
                    onClick={() => {
                        updateVocaList();
                    }}
                >CHANGE<br />VOCA</ChangeVocaButton>
            </UpdateBox>
        </Container>
    )
}

 

 

 

📌 페이지 로딩 중 보여지는 스피너 추가

 

   강의 보면서 스피너 화면을 만들어서 추가했다.

   기본 배경색이 어두운 색이라서 달 아이콘으로 만들었다.

 

 

Spinner

 

 

 

 

이번 주를 시작할 때만 해도 '개인 과제 빨리 끝내고 부족한 공부 해야지!' 라고 마음을 먹었었는데,

오히려 그런 다짐이 나를 더 조급하게 만드는 것 같았다.

 

그래서 빨리 끝내려는 욕심과 다른 사람과 나를 비교하려고 하는 무의식적인 습관들을 내려놓으려고 마인드셋을 열심히 했다.

 

생각해 보니 나는 아직 많은 부분에서 부족하기 때문에 개인 과제 하나를 하면서도

내가 배울 수 있는 것들이 아주 많았는데, 하마터면 이러한 깨달음을 놓칠 뻔 했다.

 

그래서 이번 주는 저번 주보다는 여유로운 마음을 가지려고 노력하고,

필수로 요구하는 사항 외에도 더 개선할 수 있는 부분은 없는지 고민하면서 과제를 진행했다.

 

그래서 결과적으로는 필수로 요구하는 기능보다 조금 더 많은 것들을 구현했다!

그래서 이번 주 개인 과제 결과물도 애정이 간다.

 

또 하나의 작고 소중한 페이지가 생겨났기 때무네~

자세한 내용은 작소페 카테고리에서 다룰 예정이다.

 

오늘의 TIL 끝!