[TIL] 오늘의 개발일지 ( 리액트 심화강의 바탕으로 CRD 기능 구현)

<오늘의 개발일지>

1. 프젝에 앞서 손으로 정리해보며 코드 분석

2. CRD 기능 구현 ( update는 내일 분석해봐야지 )

 

리액트를 공부하면서 느끼는게, 컴포넌트화를 시키고 편하게 쓰려고 한다는 건 알겠지만

오히려 초보자 입장에선 쪼개고 쪼개지는 구조에 중구난방처럼 느껴지는 것 같다

몇 달 뒤면 왜 이런식으로 쓰는지를 지금보다 더 확- 와닿을 것이라고 생각한다 (지금은 되게 안개처럼 어렴풋이 느껴짐 ㅎ.ㅎ)

 

구조 분석하다가, 문득 들었던 의문점

 component랑 feature가 정확하게 어떤 기준으로 나눠지는거지??

궁금해서 튜터님께 여쭤보니, 사실 feature를 아예 안쓰는 개발자도 있고 리덕스는 개발툴이 아니다보니 형식이 정해진 게 없어 스타일이 정말 다양하다고 말씀해주셨다.

 

나는 컴포넌트를 실제 기능 구현 대상이라고 생각하고, feature를 '이런 일을 할거야' 라고 말하는 애라고 느껴졌다.

그리고 컴포넌트는 재활용하려고 만들어진 넘 아닌가??

 

 

2. CRD 기능 구현 ( update 는 내일 분석!!! )

 

json-server에 데이터를 넣고 삭제하는 부분은 axios를 사용해서 넣는 코드의 틀(?)이 그냥 뽷! 정해져있는것 같은데

(제공된 메소드로 내가 따로 구현할 코드가 크게 없었음)

 

but, 큰 흐름은 확실히 알고 있어야지

 

modules 폴더에 thunk와 slice가 있고, thunk는 액션벨류 만들어주고 try, catch로 slice한테 요청하는애 slice는 받은 액션으로 state 바꿔주는애(state) 얘네가 configStore에서 최상위 객체로 내려져질고, 다른 컴포넌트들에서는 useSelector로 사용하겠쥐

그리고 thunk를 dispatch로 쓸거고 ( 원래는 dispatch에 바로 객체를 실어보냈지만, thunk를 콜백함수로 쓰징 )

 

지금 새벽 4시 30분이 넘었으니 진짜 의식의 흐름대로 쓰고 있다

 

 

<막힌 부분>

(2시간을 넘게 고민해도 해결을 못했어 ㅠ 어쩌겠어 내일해야지 퓌발)

— response 로 firebase에 있는 사진의 URl 주소를 불러오는 건 성공했는데,

왠걸, 그 URl 주소를 이제 <img> 태그의 src에 갖다 붙이려고 작업을 하려했는데, 자꾸 undefined로

뜨는 것이 아닌가…

심지어, 아래 코드처럼 arr 객체를 임의로 만들어서, 객체에 push를 하고 실제 객체 인덱스 1에 주소값 들어가는 것까지 확인했는데 arr[0]은 찍히고, arr[1]은 찍히지 않는 아이러니 발생 😱

새벽까지 싸맸는데도 왜 그런지 원인을 찾지 못했다.

const onSubmitHandler = (e) => {
 
    e.preventDefault();

    const imgRef = ref(storage, `images/${uuidv4()}`);
    const imgDataUrl = localStorage.getItem("imgDataUrl");
    let downloadUrl;
    let arr = ["test"];

    if (imgDataUrl) {
      uploadString(imgRef, imgDataUrl, "data_url")
        .then((response) => {
          downloadUrl = getDownloadURL(response.ref).then((response) => {
            console.log("response : ", response);
					
            arr.push(response);
          });
        })
        .catch((error) => {
          console.log("error", error);
        });
    }

    constnewBoard = {
      id: uuidv4(),
      user: user,
      pw: pw,
      title: title,
      content: content,
      ImgUrl: arr[1],
    };

    console.log("newBoard:", newBoard);
    console.log("arr: ", arr);

    dispatch(__postBoards(newBoard));

  };

 

 

이건 input type이 file인 태그 클릭했을때, (onChange이벤트지) 사진 임시로 localStorage에 넣는거

예전에 썼던 코드, 오랜만에 다시 꺼내봤는데 역시 이 방식은 재밌다고 느껴진다.

사진 업로드했을때, localStorage에 사진 임시저장하는 코드

const onFileChange = (event) => {
    const theFile = event.target.files[0];
    const reader = new FileReader();
    console.log("theFile : ", theFile);
    reader.readAsDataURL(theFile);
    reader.onloadend = (finishedEvent) => {
      const imgDataUrl = finishedEvent.currentTarget.result;
      localStorage.setItem("imgDataUrl", imgDataUrl);
      document.getElementById("boardImg").src = imgDataUrl;
    };
  };

 

 

 

 

어제는 급하게 심화강의 다시 곱씹다가 새벽에 잤는데, 오늘은 아예 밤을 새게 될 줄 몰랐넹 ㅎ.ㅎ 

근데 다 재밌어서 내가 새는거넹 ❤️ (코딩아 고마웡 나의 몰입도를 높여줘서 ❤️❤️ )

redux-toolkit , json-server, thunk , Axios에 대해 다시 곱씹어보았다. 

리액트랑 너~무 너무 친해지고 싶은데, 우리 천천히 알아가려는거징 액트야 ^_^ ?

역시 제일 좋은 방식은 손으로 직접 써보는 손코딩(진정한 하드코딩)인 것 같다.

 

아래는 내가 오늘 정리한 리덕스 구현 순서와 원리!!

 

https://warn-code.tistory.com/200

리액트 심화 강의 복습 / redux-toolkit , json-server, thunk , Axios